As long as I live (at my age a bit questionable) I will probably never fully comprehend the "box model" and specifically not floats. In the following I think I am clearing the floats, but without the border, I am not.
.cbox {
margin: 0 auto; /* containers for side-by-side <div>'s */
position: relative;
text-align: left;
clear: both;
}
.cleft {
text-align: left;
float: left;
}
.cright {
float: right;
text-align: left;
clear: right;
}
.menuitm {
margin-top: 14px;
padding-top: 2px;
padding-bottom: 2px;
border: 1px solid #0000B0;
background-color: #EAEAEA;
font-size: 20px;
font-weight: normal;
color: #000000;
}
<div class="cbox" style="width:298px; border:1px solid #FFFFFF">
<div class="cright p20" style="width:100px; border:1px solid #008000; padding:2px 0 2px 0; background-color:#eaeaea;">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"o_archive.php?Doit=-1" style="text-decoration:none; color:#008000;">
Reopen</a></div>
<div class="cleft p20" style="width:185px; border:1px solid #0000B0; padding:2px 0 2px 0; background-color:#eaeaea;">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"o_archive.php?Doit=1" style="text-decoration:none; color:#0000B0;">
Close Periods</a></div>
<div class="cbox" style="clear:both; font-size:1px"> </div>
</div>
<div class="cbox" style="width:298px; border:1px solid #FFFFFF; margin-top:8px">
<div class="cright p20" style="width:100px; border:1px solid #008000; padding:2px 0 2px 0; background-color:#eaeaea;">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"o_unset.php" style="text-decoration:none; color:#008000;">
Back</a></div>
<div class="cleft p20" style="width:185px; border:1px solid #0000B0; padding:2px 0 2px 0; background-color:#eaeaea;">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"o_bumps.php" style="text-decoration:none; color:#0000B0;">
Bump In-Person</a></div>
<div class="cbox" style="clear:both; font-size:1px"> </div>
</div>
<div class="menuitm" style="width:295px; border:1px solid #0000B0">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"o_phnbump.php" style="text-decoration:none; color:#0000B0;">
Bump phone-shopped staff</a></div>
Notice the 1px border on the two "cbox" items, which result in a proper display in IE and Firefox. Without them the items display properly spaced in IE but not Firefox, which tells me my markup is wrong in some fashion. In FF without the borders there is no vertical spacing: all three items are touching.
Why are the "clearing <div>'s" not clearing the floats? Or if they are, what is sucking up the top margins on the items below the floats?Are you using a proper doctype? Problems with the box model go away if you do.<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN'
'http://www.w3.org/TR/html4/strict.dtd'>
<html lang='en'>how exactly do you want them to appear?margin-top: 14px;
not touching the element above it.It looks the same to me with or without the border.
Why are you using so much inline CSS?xxxxxxx xxxxxxxxx
xxxxxxx xxxxxxxxx
xxxxxxxxxxxxxxxxxxx
Here you can see that there is some vertical spacing between those items. That's what I want my items to look like, and they do as I have them now with white borders around the two containers that hold the upper pairs of items.
In Internet Explorer 5.5 without the borders they look the same.
In Firefox without the white borders the whole thing collapses vertically and there is no vertical spacing at all. The middle pair if items is touching the top pair of items and the bottom item is touching the middle pair.
There is a "margin-top" specified for those items, and IE is using that specification, but Firefox is disregarding it unless the item above the specification has a border.
Each of the two upper containers has a "clearing <div>" within it, and yet the element below it is still losing its top margin in Firefox.
I'm not sure about the question about inline CSS. I assume you mean that in the "style" portion of my markup. If so it's there because there are something like eleven elements of the "menuitem" class on this page and a couple hundred so (maybe much more) on other pages that use the same style sheet that defines the class, and none of them are the same size or have exactly the same vertical spacing. So rather than define that many classes I define one class and modify it as needed with the "style." If the client asks me to change the color of the menu I only have to change one class. Seemed to me like the best way to do it. Same with "cbox," "cleft" and "cright."What version of Firefox are you using? In Firefox 1.0.7, the vertical spacing does not collapse when I remove the white borders.
Yes, the style attribute is inline CSS.Maybe I'm just insane and it isn't really happening. Certainly looks like it's happening to me, but... Oh well, the borders aren't actually harming anything.
.cbox {
margin: 0 auto; /* containers for side-by-side <div>'s */
position: relative;
text-align: left;
clear: both;
}
.cleft {
text-align: left;
float: left;
}
.cright {
float: right;
text-align: left;
clear: right;
}
.menuitm {
margin-top: 14px;
padding-top: 2px;
padding-bottom: 2px;
border: 1px solid #0000B0;
background-color: #EAEAEA;
font-size: 20px;
font-weight: normal;
color: #000000;
}
<div class="cbox" style="width:298px; border:1px solid #FFFFFF">
<div class="cright p20" style="width:100px; border:1px solid #008000; padding:2px 0 2px 0; background-color:#eaeaea;">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"o_archive.php?Doit=-1" style="text-decoration:none; color:#008000;">
Reopen</a></div>
<div class="cleft p20" style="width:185px; border:1px solid #0000B0; padding:2px 0 2px 0; background-color:#eaeaea;">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"o_archive.php?Doit=1" style="text-decoration:none; color:#0000B0;">
Close Periods</a></div>
<div class="cbox" style="clear:both; font-size:1px"> </div>
</div>
<div class="cbox" style="width:298px; border:1px solid #FFFFFF; margin-top:8px">
<div class="cright p20" style="width:100px; border:1px solid #008000; padding:2px 0 2px 0; background-color:#eaeaea;">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"o_unset.php" style="text-decoration:none; color:#008000;">
Back</a></div>
<div class="cleft p20" style="width:185px; border:1px solid #0000B0; padding:2px 0 2px 0; background-color:#eaeaea;">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"o_bumps.php" style="text-decoration:none; color:#0000B0;">
Bump In-Person</a></div>
<div class="cbox" style="clear:both; font-size:1px"> </div>
</div>
<div class="menuitm" style="width:295px; border:1px solid #0000B0">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"o_phnbump.php" style="text-decoration:none; color:#0000B0;">
Bump phone-shopped staff</a></div>
Notice the 1px border on the two "cbox" items, which result in a proper display in IE and Firefox. Without them the items display properly spaced in IE but not Firefox, which tells me my markup is wrong in some fashion. In FF without the borders there is no vertical spacing: all three items are touching.
Why are the "clearing <div>'s" not clearing the floats? Or if they are, what is sucking up the top margins on the items below the floats?Are you using a proper doctype? Problems with the box model go away if you do.<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN'
'http://www.w3.org/TR/html4/strict.dtd'>
<html lang='en'>how exactly do you want them to appear?margin-top: 14px;
not touching the element above it.It looks the same to me with or without the border.
Why are you using so much inline CSS?xxxxxxx xxxxxxxxx
xxxxxxx xxxxxxxxx
xxxxxxxxxxxxxxxxxxx
Here you can see that there is some vertical spacing between those items. That's what I want my items to look like, and they do as I have them now with white borders around the two containers that hold the upper pairs of items.
In Internet Explorer 5.5 without the borders they look the same.
In Firefox without the white borders the whole thing collapses vertically and there is no vertical spacing at all. The middle pair if items is touching the top pair of items and the bottom item is touching the middle pair.
There is a "margin-top" specified for those items, and IE is using that specification, but Firefox is disregarding it unless the item above the specification has a border.
Each of the two upper containers has a "clearing <div>" within it, and yet the element below it is still losing its top margin in Firefox.
I'm not sure about the question about inline CSS. I assume you mean that in the "style" portion of my markup. If so it's there because there are something like eleven elements of the "menuitem" class on this page and a couple hundred so (maybe much more) on other pages that use the same style sheet that defines the class, and none of them are the same size or have exactly the same vertical spacing. So rather than define that many classes I define one class and modify it as needed with the "style." If the client asks me to change the color of the menu I only have to change one class. Seemed to me like the best way to do it. Same with "cbox," "cleft" and "cright."What version of Firefox are you using? In Firefox 1.0.7, the vertical spacing does not collapse when I remove the white borders.
Yes, the style attribute is inline CSS.Maybe I'm just insane and it isn't really happening. Certainly looks like it's happening to me, but... Oh well, the borders aren't actually harming anything.