Outer DIV centered and no height value, inner DIV with float:left?

Discussion in 'CSS' started by kingfisher42, Apr 15, 2009.

  1. #1
    Hey.

    Topic says it all basically.
    I have one div ID that should be centered with a fixed width but no height as I want the height to be relative to its inner content. The inner divs share the same class and should float next to each other but once I give them the float:left attribute the CSS reacts weird and all following layers within that page align very odd. I added a border to see what's happening, see that the borderline does not outline the inner content like it should. If I give the outer DIV a fixed height things work like they should but I need it to be relative and not fixed in height.

    Here's the code:

    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    	<title>CSS Test</title>
    	<style type="text/css">
    	#outer_div {
    	  border: 1px solid;
    	  width: 880px;
    	  margin: 0px auto;
    	}
    	.inner_div {
    	  text-align: left;
    	  float: left;
              margin: 5px;
    	  border: 1px solid;
    	  width: 200px;
    	}
    	</style>
    </head>
    <body>
    <div id="outer_div">
    	<div class="inner_div">
    	should be floating
    	</div>
    	<div class="inner_div">
    	asdasdasdas<br>
    	asdasd<br>
    	asdasdasd<br>
    	</div>
    	<div class="inner_div">
    	asdasdasdas<br>
    	asdasd<br>
    	asdasdasd<br>
    	</div>
    	<div class="inner_div">
    	asdasdasdas<br>
    	asdasd<br>
    	asdasdasd<br>
    	</div>
    </div>
    </body>
    </html>
    
    Code (markup):
    Thanks for any help! :)
     
    kingfisher42, Apr 15, 2009 IP
  2. My220x

    My220x Member

    Messages:
    624
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    35
    #2
    Apply overflow: auto; to the outer div.
     
    My220x, Apr 15, 2009 IP