Forum Moderators: not2easy
Thanks,
BK
My DTD:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
My Markup:
<div id="ContentBody">
<div id="ContentBodyLeftColumn">
<div id="AnnouncementText">
<img src="Media/Images/AnnouncementText.gif" />
</div>
<div id="Announcements">
<div id="AnnouncementHeadline">Blah</div>
<div id="AnnouncementSummary">Blah</div>
<div id="AnnouncementHeadline">Blah</div>
<div id="AnnouncementSummary">Blah</div>
<div id="AnnouncementHeadline">Blah</div>
<div id="AnnouncementSummary">Blah</div>
</div>
</div>
<div id="ContentBodyDropShadow">
</div>
<div id="ContentBodyContent">
<div id="DefaultBody">
<div id="DefaultOuterBox">
</div>
</div>
</div>
</div>
<div id="Footer">
<div id="FooterMenu" class="FooterText">Blah</div>
<div id="FooterCopyright" class="FooterText">Blah</div>
</div>
My CSS:
#DefaultBody {
width:100%;
}
#DefaultOuterBox{
background-color:Black;
width:500px;
height:300px;
margin-left:auto;
margin-right:auto;
}
#ContentBody {
width:100%;
}
#ContentBodyLeftColumn {
width:260px;
background-color:#908A99;
height:430px;
float:left;
}
#AnnouncementText {
margin-top:10px;
margin-left:15px;
}
#Announcements {
margin-left:15px;
margin-top:10px;
}
#AnnouncementHeadline {
color:#E8E8E8;
font-size:110%;
}
#AnnouncementSummary {
font-size:80%;
padding-left:5px;
padding-bottom:10px;
}
#ContentBodyDropShadow {
width:21px;
height:430px;
background-image:url("Media/Images/DropShadowSlice.gif");
background-repeat:repeat-y;
float:left;
}
#ContentBodyContent {
width:auto;
height:430px;
float:left;
}
#Footer {
width:100%;
background-color:#343844;
height:42px;
padding-top:18px;
position:relative;
clear:left;
}
#FooterMenu {
margin-left:auto;
margin-right:auto;
width:300px;
}
#FooterCopyright {
width:auto;
position:absolute;
top:18px;
right:10px;
}
.FooterText {
color:#FFF59E;
}
[edited by: BKahuna at 5:08 am (utc) on April 1, 2008]
The bottom part of my page has three divs - each floated left against the other. They're all contained in "ContentBody".
ContentBody (width:100%)
...ContentBodyLeftColumn (width 260px)
...ContentBodyDropShadow (width 21px)
...ContentBodyContent (width auto)
......DefaultBody
.........DefaultOuterBox
The problem seems to be that ContentBodyContent is "shrink wrapping" its contents because of the width:auto. Then everything inside of ContentBodyContent is the same size and centering makes no sense.
I expected the width:auto to cause ContentBodyContent to fill whatever was left next to ContentBodyLeftColumn and ContentBodyDropShadow but it didn't. How do I get ContentBodyContent to fill what remains?
Thanks,
BK
[edited by: BKahuna at 5:10 am (utc) on April 1, 2008]
Further research tells me that if you use width:auto on a floated element it will shrinkwrap it. It will only stretch a Block Box (in the normal flow) to the size of it's container.
So now we get to the real question - how do I line up the three boxes (ContentLeftColumn, ContentDropShadow and ContentBodyContent) so that they are next to each other (but not inline elements, I think, because width:auto shrinkwraps them too) and the rightmost box stretches to fit the viewport? The first two boxes have fixed widths.
It took me awhile but I think I've finally correctly framed the question.
Thanks,
BK
you've figured out a whole lot of it on your own, yes firebug is a useful tool! :)
the way floats are supposed to work is what you're seeing in FF, in short your
#ContentBodyContentSo you're not actually spacing your "centered" div from the float (although IE would have you believe you are!).. it doesn't know the floats are there! and so the "auto" part of the black
#DefaultOuterBoxfirst off if you try not floating that #ContentBodyContent div, and put a background color onto it
#ContentBodyContent {
background: #ff0;
height:430px;
}you will see that now the div does stretch to 100% of the page, because the float is not shrinkwrapping it anymore, it's defaulting - IE still centers the black div in the content area, FF doesn't, it's actually centering the black box in regards to the whole page width! (change
#DefaultOuterBoxanyhoo.. what you want to able to do is to get FF et al to do the same so you need to not float the content div.. as there's no way to give it a (page width 100% - floats width), not without a script anyway, but there a CSS rule which allows us to do this ;)
#ContentBodyContent {
background: #ff0;
height:430px;
/*float:left;*/
overflow: auto;
}remove the float and use the overflow behaviour which effectively isolates the content from the floated elements and also has it take up the remaining space.
Thank you so much!
Using Overflow worked perfectly. Now I have what I want in IE and FF. I'll spend some time playing with the blocks and using FireBug to see what's going on. Clearly some of the greatest mysteries of CSS positioning revolve around the none-to-obvious rules about floats.
Again - thanks for your prompt and spot on reply.
BK
There is now a scrollbar on the right side of the overflowed div.
I am guessing that this may be one of those times when the only perfect solution is to put one table in the midst of my table free layout.
I'm going to add a table with one row and a cell for each of my three Content divs. I can set up the table to expand the third column to fit whatever is left over. I'll put my CSS inside the table cells.
Thanks very much for the advice and guidance,
BK
