Two column div. Dynamic width of one

Question

What I'm trying to achieve is getting into divs, next to each other. One of them will be the menu, 150 pixels wide, to the left of the screen, and the second - filling the rest of the container.

Here is what I came up with: http://jsfiddle.net/Ln49F/3/

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

To achieve something like this: http://jsfiddle.net/Ln49F/4/ A float to the left puts the div “next to” in the menu div, and the add-on works well, but I don't know how to make it wide for the rest of the container div

Answer 1

Take out the width:100% (just leave it to auto , which is the 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 out http://jsfiddle.net/TbRuB/10/

OR

You can also achieve this with the display:table property, but it works before IE8 and above.

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

Answer 3

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

This works by pointing the right edge on the second div and just leaving the width on the auto.

HTML does not change:

  <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 CSS is very 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 removed the width: 100%; from div.content and replaced it with margin-left: 150px; As you can see, you are almost right!

EDIT: BONUS: (fake) Columns with the same height!

I updated the script with some code to create faux columns "with CSS3 so that it looks like both divs expand to the bottom of the container. You can see it here: http://jsfiddle.net/ramsesoriginal/Ln49F/ 13 / I do not know if you really need it, but this is a general requirement for such scenarios.

I just placed the gradient background on the container with one hard stop in the middle:

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

And then I expanded this 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 it can be very useful!

Answer 4

Use a simple solution.

 <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> div.container{ width: 90%; height: 150px; background: red; } div.menu{ width: 150px; height: 100px; float: left; background: blue; } div.content{ background: green; margin-left: 150px; } 

http://jsfiddle.net/thirtydot/Ln49F/16/

Answer 5

 div.container{ width: 90%; background: red; display: inline-block; } div.menu{ width: 150px; float: left; background: blue; display: inline; } div.content{ display: inline; float: left; width: 65%; background: green; padding-left: 20px; } 

Look at this

Hope this helps

Answer 6

Check this script . Basically, using box-sizing , some indentation, and negative margin, you can align two elements to the top of your container. and the content field stretches the space of its parent.