CODEWITHSUNDEEP
csshtml
Kedor
Kedor

Reputation: 1498

Two div columns. Dynamic width of one

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.

Upvotes: 6

Views: 6431

Answers (6)

Shawn Taylor
Shawn Taylor

Reputation: 3969

Use 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/

Upvotes: 2

ramsesoriginal
ramsesoriginal

Reputation: 1920

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!

Upvotes: 2

Philip Badilla
Philip Badilla

Reputation: 1058

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

i hope this helps

Upvotes: 1

JuanOjeda
JuanOjeda

Reputation: 864

Check this fiddle out. Basically, using box-sizing, some padding and a negative margin, you can line the two elements up to the top of their container. and have the content box stretch the expanse of its parent.

Upvotes: 0

sandeep
sandeep

Reputation: 92793

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/

Upvotes: 2

Oliver
Oliver

Reputation: 11597

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

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

jsfiddle.

Upvotes: 4

Related Questions