
August 31st, 2005, 07:40 AM
|
|
|
|
Join Date: Apr 2007
Location: San Diego, CA USA
Posts: 129
Time spent in forums: < 1 sec
Reputation Power: 2
|
|
|
CSS: Center Floated DIVs in a Parent Div
Code:
<html>
<head>
<style type="text/css">
.parent{}
.child{
float: left;
margin: 10px;}
.clear{
clear: both;}
</style>
</head>
<body>
<div class="parent">
<div class="child">content1</div>
<div class="child">content2</div>
<div class="clear"></div>
</div>
</body>
</html>
I want a liquid layout, where the children auto wrap to the width of the page if it is resized.
However, I also want those children to be centered in the div so that if the browser is sized at 700px for example, and only 3 100px children are being displayed - those three will be centered inside the parent div.
I've tried using text-align:center in the parent, I've tried setting the margins of the children to auto - but nothign seems to work.
It's imperative that I float the children so that they wrap liquidly. Centering them in the parent isn't a necessity - but it is something I'd like to be able to do.
ANy help?
|