Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Outer Div centered and no height, inner Div float:left?

Status
Not open for further replies.

commun1

Programmer
May 26, 2004
41
0
0
DE
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:

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<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>

Thanks for any help! :)
 
An easy fix if you don't care about IE6: Give #outer_div a style of 'overflow:auto'.

If you do care about IE6, for IE6 only, additionally give it a height of 1%.

Read this for more information:


Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:
Code Couch Tech Snippets & Info:
 
Thank you so much Dan!
Works like a charm, sometimes it is just too easy, haha.

Have a great day, you just made mine :)

Cheers,
Bernhard
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top