HTML/CSS Content/Sidebar Alignment
Question
I am trying to create a simple website with a content div and a sidebar div but the sidebar div is pushing somethings down in my content div, even though its outside. I believe this is an easy fix, but it has been hard to search for this exact scenario.
I created a jsfiddle here, http://jsfiddle.net/WRs7L/ .
<body>
<div id="wrapper">
<div id="main">
<div id="sidebar"></div>
<div id="content">
<div id="resume">
<section id="employment" class="part">
<h2>Employment</h2>
<section class="item">
<div class="info cf">
<div class="left">
<span class="title">Title</span>
<span class="employer">Employer</span>
<span class="group">Group</span>
</div>
<div class="right">
<span class="dates">Date</span>
<span class="location">Location</span>
</div>
<div style="clear: both;"></div>
</div>
<div class="content">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</section>
</section>
</div>
</div>
</div>
</div>
</body>
1 answers
solution1
0 2013-03-17 21:21:28
You need to look at the width and heights of the two divs you wish to sit side by side.
I think you problem is that you arn't specifying widths/heights to the element which you want to sit next to the sidebar. For instance if you have a page which is 1000px in width, you would create two divs eg
<div id="side1"></div>
<div id="side2"></div>
Then apply the css to make them sit side by side:
#side1
{
width:49%;
height:500px;
float:left
margin-right:1%;
clear:none;
}
#side2 {
width:50%;
height:500px;
float:left;
clear:none;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.