All,
I have been working through lots of CSS issues, and I think I'm starting
to grasp most of the concepts, however, some things are still confusing me.
(relevant HTML and CSS below)
I am trying to reliably layout all of my pages with a banner across the
top and then three block level containers, side by side, for my left
nav, main content well, and right nav. I'm using DIVs for each section
and then using CSS to attempt to lay them out the way that I want them.
This is a layout page that I am plugging content into.
However, I am unable to restrict the width of the main content well (the
DIV with id "main").
If there is a table inside of it that is wider than the 63% of the body
tag that I've given it, the entire main DIV stretches to accomodate it
and overlaps the "right_status" DIV.
How do I force the content well DIV to be restricted in width so that
regardless of what is inside of it, it won't dynamically expand it's
width? I want to enforce the width of the content well DIV on all of
it's child elements in the DOM.
Thanks,
Wes
P. S. (ANOTHER ISSUE: I'm not sure if the layout I'm doing here is the
best way to get my banner box with 3 smaller width, next to each other
boxes underneath it. I'm floating each of those boxes so that I can
retain their block element nature - however, this feels like cheating
since I don't really need to float anything. I'm only floating the divs
because when I tried to use "display: inline;" to put the DIVs next to
each other, I ran into a lot of problems. Is there a better way to lay
this out in general?).
Here is the HTML skeleton.
<HTML>
<HEAD>
stuff
</HEAD>
<BODY>
<DIV id="banner">
banner contents
</DIV>
<DIV id="left_side">
left_side contents
</DIV>
<DIV id="main">
main contents
</DIV>
<DIV id="right_side">
right_side contents
</DIV>
</BODY>
</HTML>
Here is the relevant CSS:
body {
position: relative;
}
#left_side {
float: left;
width: 13%;
}
#main {
float: left;
width: 63%;
}
#right_side {
float: right;
width: 20%;
}
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
