CSS layout design problem

I've created a design, but I'm having problems to make it work the way I need. It would be too much to post a complete pack here, but here is the problem in short: I have a DIV element side by side with another DIV element. One is a sidebar and the other is content. When I put a fieldset in my content div, anything (like other divs) I put inside stretches fieldset and encapsulating div correctly. But if I remove fieldset, "guest divs" just dont stretch the encapsulating "content div". Why that happens and how can I fix it?

Thank you!

If you need more info, please ask.

Code is something along these lines:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<style type="text/css">

#main-container
{
    background-color:gray;
}
#header-container
{
    background-color:green;
    height: 60px;
}
#sidebar-container
{
    background-color:maroon;
    width: 150px;
    float: left;
}
#content-body
{
    background-color:white;
    position: relative;
}
#block-1, #block-2
{
    float:left;
    width: 50%;
    background-color: blue;
    height: 95px;
}
#block-3
{
    float: left;
    width: 100%;
    background-color:navy;
    height: 156px;
}
#footer
{
    width: 100%;
    background-color:orange;
}

</style>
</head>

<body>
    <div id="main-container">
     <div id="header-container"></div>
     <div id="sidebar-container"><ul><li>menu option</li><li>menu option</li><li>menu option</li><li>menu option</li><li>menu option</li></ul></div>
     <div id="content-body">
      <div id="block-1">&nbsp;</div>
      <div id="block-2">&nbsp;</div>
      <div id="block-3">&nbsp;</div>
     </div>
     <div id="footer">&nbsp;</div>
    </div>
</body>

</html>

You need to set overflow:hidden on your containing div, and make sure it has at least one dimension that is fluid. By default, overflow elements (i.e. floated elements, anything taken out of normal document flow) 'overflow their containing blocks bounds' (overflow: visible) without affecting their parent container. When you set overflow to hidden, you tell the box model to grow the containing div in any dimensions that are not set to fixed size such that it fully contains its content elements.

Depending on whether you need the content of the containing div to scroll or not, you may want to use overflow: auto or overflow: scroll. The auto setting will display scrollbars if necessary, scroll will always display them. Any browsers that support the CSS3 overflow provide additional capabilities that you can look up on W3C.org.

The first change I would make to your code is the following:

#content-body
{
    background-color:white;
    position: relative;
    overflow: hidden;
}

An alternative method that is preferred these days can be found at the link below. I have not used it myself, so I can't say authoritatively how compatible the method is. However it does seem to be preferred over the overflow fix for modern browsers (Opera, FF 3.x, Safari, Chrome, IE8). For older versions of IE, they automatically expand divs anyway, so your set.

http://www.positioniseverything.net/easyclearing.html

ansaurus

tags:

views:

answers:

CSS layout design problem

related questions