CODEWITHSUNDEEP
csshtmlheight
kevinooo
kevinooo

Reputation: 43

Two div with the same height

after one hour of research i'm still stuck with my problem.

I want to make one menu on the left with a fixed width and variable height. And an other div on the right with a variable width and height.

And I want to give the same height to these two div.

Here it is : Code HTML / CSS

Upvotes: 0

Views: 1972

Answers (4)

kevinooo
kevinooo

Reputation: 43

I finally found a solution.

By using some css table stuff (display:table-row, display: table-cell etc).

Upvotes: 2

Jimmy
Jimmy

Reputation: 212

This works. You can set the height of leftnav. Rightnav can also be variable but don't forget to clear: left; before you add something after that.

<body>
  <div id="leftnav" style="background-color: blue; float: left; width:200px;">       
  </div> 
  <div id="content" style="background-color: red; float: left; width: auto; position: absolute; right: 0px; left: 200px;"> 
  </div> 
</body>

Upvotes: 0

Lucky Murari
Lucky Murari

Reputation: 12802

Check the example here : DEMO

Basically, give a fixed height to the "container" and make overflow:hidden. Also give that height to the "nav"

Upvotes: 0

John Hartsock
John Hartsock

Reputation: 86902

Something like this: Note you can replace inline style with CSS classes I just did it this way to make it easy to see what was going on.

<body>
    <div id="leftnav" style="position:absolute; top:0px; left:0px; bottom:0px; width:200px;overflow:auto;"> 
    </div> 
    <div id="content" style="position:absolute; top:0px; left:200px; bottom:0px; right:0px; overflow:auto;"> 
    </div> 
</body>

Here is an example you can preview http://jsbin.com/ovami4/edit

Upvotes: 0

Related Questions