CODEWITHSUNDEEP
csshtmlheight
Jochen Schmidt
Jochen Schmidt

Reputation: 109

100% height of a DIV inside a DIV. Why is this not working?

i know, this is an old question but i can't get this to work...

see here: http://jsfiddle.net/NLRqM/2/

i want to have the "#main_rechts" DIV to be 100% height inside of "#main"... (automatically the same height as the green box)!

thanks so much!

Upvotes: 0

Views: 198

Answers (4)

madborn
madborn

Reputation: 504

Try to give them both a min-height: 200px; (or any other value fitting your design):

#main_links {
  width:680px;
  position:relative;
  float:left;
  background-color:#096;
  min-height:200px;
}
#main_rechts {
  width:260px;
  position:relative;
  float:right;
  background-color:#e7e8e8;
  min-height:200px;
}

Upvotes: 1

Sergey Rybalkin
Sergey Rybalkin

Reputation: 3026

Your #main-rechts is floated so it will not work. Try playing with display: table and display: table-cell CSS properties, but please note that they will not work in IE 7 and lower.

I've updated your fiddle to show what I mean - http://jsfiddle.net/Pharaon/NLRqM/5/

Upvotes: 2

Ruben Nagoga
Ruben Nagoga

Reputation: 2218

You #main has no fixed height do you want to have 100% of what? :) Set some fixed height to #main

Upvotes: 0

user1432124
user1432124

Reputation:

set some fixed height to #main and add height:100% to #main_rechts

Upvotes: 0

Related Questions