Page 1 of 1

CSS layout troubles again (3-column: 200px, 50%, 50%)

Posted: Tue Apr 10, 2007 3:54 am
by Chris Corbyn
My general layout has a 200px sidebar, with a fluid content area. I do that like this:

Code: Select all

#sidebar {
  width: 200px;
  float: left;
}

#content {
  margin-left: 200px;
}
However, it's causing me issues when I try to use "clear" inside the content div because for some reason it tries to "clear" the sidebar. I thought because the DIV *inside* the #content div doesn't directly contact the sidebar it shouldn't try to clear it.

Basically, on one of my pages I want to split the #content panel directly in half at 50% vertically. This will happen in more than one place on the same page.

Here's a (colorful) example:

http://localhost/~d11wtq/layout-baff.html

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css">

div#page_container {
  width: 100%;
}

div#sidebar {
  width: 200px;
  background: red;
  float: left;
}

div#content_pane {
  margin-left: 200px;
  background: yellow;
}

div.left50 {
  float: left;
  /* cannot use 50% since IE is crap at calculating it */
  width: 49%;
  background: green;
}

div.right50 {
  /* see comment regarding 50% above */
  margin-left: 51%;
}

div.clearer {
  clear: both;
}

</style>
<title>Layout Baff</title>
</head>
<body>

<div id="page_container">

  <div id="sidebar">
    LEFT<br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    Really long sidebar
  </div>
  
  <div id="content_pane">
    RIGHT
    
    <div>
      <div class="left50">
        INNER LEFT TOP<br />
        <br />
        <br />
        &nbsp;Long sentence.
      </div>
      
      <div class="right50">
        INNER RIGHT TOP
      </div>
    </div>
    
    <div class="clearer">&nbsp;</div>
    
    <div>
      <div class="left50">
        INNER LEFT BOTTOM
      </div>
      
      <div class="right50">
        INNER RIGHT BOTTOM
      </div>
    </div>
    
  </div>

</div>

</body>
</html>
How can I separate two floating divs within the content area without having it accidentally clear the sidebar? :(

Posted: Tue Apr 10, 2007 4:53 am
by matthijs
It should work as you want. And a quick test in FF shows that it works. Sidebar 200px on the left, content area divided by couple of "rows", each with left and right part.

Which browser do you see the problems?

One thing I would do differently is the percentages: as it is now you have everything pixel-perfect. that's definitely going to cause (rounding) troubles. As you already found out. So I would give the content area a slightly larger margin-left then 200px. And I would take 49% + 49% for the columns (or something similar). At some point 49%+51%=100% is going to cause problems.

Posted: Tue Apr 10, 2007 6:03 am
by Chris Corbyn
I see this:

Image

When what I want to see is this:

Image

FF 2.0/Linux. FF 2.0/Mac. Safari.

The "clear" between those two sections is pushing right down below the side bar.

The 200px thing works in all browsers I've tested it in so far (FF, Opera, Safari, Camino, IE6/7). The percentages are done so the left div is 49% wide, and the right DIV has a 51% margin (i.e. 49% wide). I must be doing something wrong with the general flow of the layout though since I thought the fact that the sidebar is floating left shouldn't affect anything around it provided the things around it are inside another DIV :(

Posted: Tue Apr 10, 2007 6:19 am
by matthijs
Now I see. try

Code: Select all


div#content_pane {
  margin-left: 200px;
  background: yellow;
}

#content_pane div {
  clear:right;
  /* float everything */ 
  float:left;
  width:100%;
}
#content_pane div div.left50 {
  float: left;
  /* cannot use 50% since IE is crap at calculating it */
  width: 49%;
  background: green;
}

#content_pane div div.right50 {
  /* float everything */
  width:49%;float:right;
}
Floats combined with non-floats are a headache :wink:

Posted: Tue Apr 10, 2007 8:41 am
by Chris Corbyn
Bingo! :D

Thanks. Here's what is was actually needed for:

http://217.147.94.70/docs/