0

Well the basic idea is to get the wrapper automaticaly expand height depending on the height of the children. The problem though is that the menu child has a float attr, and if it's bigger than content - it's simply sticking out, this you can see by loading the code. I don't like playing with relative position, table-cells.. And if I set float:left on the wrapper it actually bugs my whole markup for some reason. Is there any other way I can do this?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <style>
            div.wrap{
                background-color:grey;
                padding:5px;
            }
            div.left{
                background-color:orange;
                float:left;
                width:200px;
                height:400px;
            }
            div.content{
                margin-left:200px;
                height:200px;
                background-color:white;
            }
        </style>
    </head>
    <body>
        <div class="wrap">
            <div class="left">
                Menu
            </div>
            <div class="content">
                Text
            </div>
        </div>
    </body>
</html>
Anonymous
  • 4,692
  • 8
  • 61
  • 91

1 Answers1

2

Inside div.wrap:

<div class="clear"></div>

Inside <style>:

div.clear{
    clear:both;
}
element119
  • 7,475
  • 8
  • 51
  • 74
  • Glad that worked for you! As a general rule, floating elements don't play nice with the dimensions of their parent elements. So the div with `clear:both` fixes it because it defines a place for the browser to end the parent element. Just so you know for in the future, this technique is called a "clearfix". – element119 May 08 '12 at 20:57