Forum Moderators: not2easy
Using this:
<div id=outerContainer style="text-align: center;">
<div id=subContainer style="display: inline; background: #ccc; position: relative;">
<img ... />
<div>some text</div>
</div>
</div>
The inner div is repeated multiple times, but only one has been included for clairty.
The catch is this: I want the small divs in the main outer container to be CENTRALLY ALIGNED and displayed inline, so they line up next to eachother and cascade down to a new row if the browser is too narrow.
I use the outerContainer to force this text-align: center
The catch is that each subContainer collapses to minimum height and ignores it's content (IN FIREFOX) ... it can be a single image, text ... anything. It then starts exhibiting very odd behavior by essentially spilling it contents all over the place:
I've tried adding the usual clear:both, autoflow:auto, <br/>, heights, widths, and lord knows what else I've found over the course of the last 3 hours ... but enough is enough.
The only thing that works is to add float:left to each sub-container, but then they are not centrally aligned in the main container.
How can I have centrally aligned containing divs, displayed inline, that envelope their content?
Oh, and it's probably relevant, but I'm using this declaration:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
[edited by: tedster at 10:22 pm (utc) on July 6, 2005]
I suppose the simpliest thing for you to do now is to assign a fixed width for the container and make margin: 0px auto; <- this will center it (it only works when the width is specified).
Though I don't know of a way to center each floater regarding each other.
<div id=outerContainer style="width: 800px;margin: 35px auto 0;position: relative; text-align: center;">
<div id=subContainer style="display: inline; background: #ccc; position: relative; float: left;">
<img ... />
<div>some text</div>
</div>
I floated the images, added a width to the container and set the margins... this floats the main container in the center of the page... from there you can float the rest of the inner divs and everything is happy.
