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

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

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

Post 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? :(
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post 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.
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post 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 :(
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post 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:
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post by Chris Corbyn »

Bingo! :D

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

http://217.147.94.70/docs/
Post Reply