What width for second div

HTML & CSS
1

I’m building a control pane which has a width of 100%. It contains of two floating divs. Left the menu which has a width of 200px. What width should I give the second floating div (.content) to have the 100% remain?

2

100%, with a 200px left margin/padding?

This is like the 2col layout. You don’t have to float them both.

3

Hi,

You can do that in a number of ways.

  1. Float the menu left with a 200px width and then just use a static div with overflow:hidden and haslayout applied and it will fill the remaining space. It will suffer from the 3 pixel jog in IE6 and when squashed the right div will drop under the left if squashed too far.

2)Float the menu with a 200px width left and then float another 100% wide float but add a negative right margin equal to the width of the left menu so that it still fits on one line.

You then need an inner div with a margin right of 200px to keep the content in the right place.

The element may also drop below the left div when squashed but that’s what floats do.

  1. float the menu and just set left margin on the div to clear the menu. You will need to be careful that elements in the right column don’t clear the left float when you add clear to them which is why I have added an inner floated 100% wide float to contain the clearing of inner elements.

This method will suffer from the 3 pixel jog in ie6 and if squashed will not drop under the left div but in ie6 will drop down below the left float but still to the side.

Examples of each.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.wrap {
    width:70%;
    background:red;
    margin:auto;
    overflow:hidden;
    padding:20px;
}
.left {
    float:left;
    background:blue;
    min-height:100px;
    width:200px;
}
.main {
    overflow:hidden;
    background:green;
    min-height:100px;
}
* html .main {zoom:1.0}

/* version 2 */
.w2 .main {
    width:100%;
    float:left;
    margin-right:-200px;/* width of sidebar*/
    background:transparent;
}
.inner2 {
    margin-right:200px;/* width of sidebar*/
    min-height:0;
  background:green;
    min-height:100px;
}
* html .inner2 {zoom:1.0}

/* version 3*/
.w3 .main{
    margin-left:200px;
    overflow:visible
}
.inner3{
    width:100%;
    float:left;
}


</style>
</head>
<body>
<div class="wrap">
    <div class="left">left</div>
    <div class="main">main</div>
</div>
<div class="wrap w2">
    <div class="left">left</div>
    <div class="main">
        <div class="inner2">main</div>
    </div>
</div>
<div class="wrap w3">
    <div class="left">left</div>
    <div class="main"><div class="inner3">main</div></div>
</div>
</body>
</html>
4

Does this work with Paul OB’s method where he uses underlaying absolute positioned divs for the background. Because the second (100%) div needs a background color where the first one don’t

5

Noonenope, is right, of course.

I am curious tho, why dos the container have 100% width. Is it floated as well?

If the container is NOT floated or shrinkwraped, you can take the opportunity to make a an auto stretch column for the left menu.

  1. get rid of the 100% width for the container
  2. give it a 200px border-left and pick a color … puce, for example, I like puce. lol.
  3. IF the left-menu is first in the source order, float it left; and give it a margin-left of -200px; and DONT float the other div.
    3-a) IF the left menu is SECOND in the source order, DONT float it. give it a margin-left of -200px. Now float the other div right, and give that div a width of 100%
  4. you will need to use .clearfix , a clearing element or display:inline-block on your container to auto clear the float.

I hope that helps.

6

There are so many possibilities… Floats, margin, negative margins, big borders, AP. Paul and dresden covered the most. You have to remember the jog :wink:

Here’s what you asked?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
  "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en"><head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>200px</title>

  <style type="text/css">
    html, body {
        width:100%;
        margin:0;
        padding:0;
        border:0;
        background-color:magenta;
      }
    
    div {
        height:100px;
      }
      
    #cpside {
        width:200px;
        float:left;
        border:3px solid white;
      }
    
    #cp {
        background-color:#666;
        margin-left:206px;
      }
  </style>

</head><body>

<div id="cpside"></div>
<div id="cp"></div>
    
</body></html>
7

Yes as all have stated above there are many possibilities :slight_smile:

Things to watch out for as already mentioned:

If you use just the margin-left technique then anything in that right column cannot use clear because adding a clear to it would result in the cleared element dropping below the left floated column and if that was tall the content would disappear below the fold.

That’s why I prefer the overflow method because it contains any clearing. However it is susceptible to dropping just like another float would.

The double float method cures the 3px jog but again the float will drop when squashed.