It sounds like you've stumbled onto the issue where elements floated within a container aren't included in the dimensionality of the container. (I'm sure other folks have a better way of wording that...). Floated elements are not included in the calculation of the dimensions of any container by default. What you're looking for is called a "clearfix". Check out this post for a very nice, detailed list of fixes: What methods of ‘clearfix’ can I use?
960 grid border confusion.
سؤال
I'm hoping this is something simple and just my inexperience with css. I'm simply trying to add a single pixel border to a group of nested divs.
<div class="grid_11 suffix_1">
<div class="borderupdown">
<div class="grid_1 alpha">
<p>RNK</p>
</div>
<div class="grid_1">
<p>IQ</p>
</div>
<div class="grid_8 omega">
<div class="grid_8 alpha">
<p>title<p>
</div>
<div class="clear"></div>
<div class="grid_8 omega">
<p>comments stuff here</p>
</div>
</div>
</div>
</div>
Here is the borderupdown css
.borderupdown
{
border-top:1px solid red;
border-bottom:1px solid red;
margin-bottom:2px;
}
The class borderupdown is simply a 1px border top and bottom. My "understanding" is that since the other divs are nested under that class it should create a 1px border top and bottom of all of that. Instead I get both borders showing up visually on top with the 2px margin between them. I'm totally confused as to why. ( In case it matters I'm using a fluid version of the 960 grid system.)
Thank you.
المحلول
لا تنتمي إلى StackOverflow