Two div columns. Dynamic width of one

Question

What i am trying to achieve, is get to divs, next to each other. One would be menu, 150px width, on the left of the screen, and second one, should fill rest of container.

Thats what i came up with: http://jsfiddle.net/Ln49F/3/

But, the contend div is also "under" menu, and working with text, moving it to right a little is impossible. Is it possible, to make div "content" to be wide for "100% - 150px" somehow, and be placed next to the menu div?

To achieve something like that: http://jsfiddle.net/Ln49F/4/ Float left, puts the div "next to" menu div, and padding works well, but i dont know how to make it to be wide for the rest of the container div.

Answer 1

Take out the width:100% (just leave it to auto, which is default) and use this:

div.content{
    margin-left:150px;
    background: green;        
}

jsfiddle.

Answer 2

Write like this:

CSS

.wrapper{
    overflow:hidden;
    padding-bottom:10px;
}
.first{
    float:left;
    height:200px;
    width:150px;
    background:red;
}
.second{
    overflow:hidden;
    height:200px;
    background:green;
}

HTML

<div class="wrapper">
    <div class="first">first</div>
    <div class="second">second</div>
</div>

Check this http://jsfiddle.net/TbRuB/10/

OR

You can also achieve this with display:table property but it's work till IE8 & above.

Check this http://jsfiddle.net/TbRuB/12/

Answer 3

You can view your first fiddle, but updated to work according to your spec, here: http://jsfiddle.net/ramsesoriginal/Ln49F/12/

This works by specifying the right margin on the second div, and simply leaving the width on auto.

the HTMLis unchanged:

 <div class="container">
     <div class="menu">Menu to the left</div>
     <div class="content">Content of site<br>x<br><br><br><br><br></div>
 </div>

And the CSS is pretty similar to yours:

  div.container{
      width: 90%;
      height: 150px;
      background: red;        
  }

  div.menu{
       width: 150px;
       height: 100px;
       float: left;
       background: blue;        
  }

  div.content{
       margin-left: 150px;
       background: green;        
  }

I took away the width: 100%; from div.content and replaced it with margin-left: 150px; As you can see, you nearly had it right!

EDIT: BONUS: (fake) Equal height columns!

I updated the fiddle with some code to create "faux columns" with CSS3, so that it looks as if both divs are expanding down to the bottom of the container. You can see it here: http://jsfiddle.net/ramsesoriginal/Ln49F/13/ I don't know if you actually need it, but it's a common requirement for this kind of scenarios.

I simply placed a gradient background on the container, with a single hard stop in the middle:

  background: linear-gradient(left, blue 150px, green 150px);

And then I expanded that with various vendor prefixes:

 background: -moz-linear-gradient(left, blue 150px, green 150px); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, right top, color-stop(150px,blue), color-stop(150px,green)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(left, blue 150px, green 150px); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(left, blue 150px, green 150px); /* Opera 11.10+ */
 background: -ms-linear-gradient(left, blue 150px, green 150px); /* IE10+ */
 background: linear-gradient(left, blue 150px, green 150px); /* W3C */

I don't know if you need it, but sometimes this can be very useful!