Results 1 to 2 of 2
Thread: How to center floats?
Sep 28, 2004, 13:03 #1
- Join Date
- Sep 2004
- Altbach, near Esslingen, Stuttgart
- 0 Post(s)
- 0 Thread(s)
How to center floats?
I'm trying to build a simple html/css page, which should look like the following:
The page consists of fixed size boxes, say pictures, which float and should be centered. In other words, the pictures form a variable column table, whose columns (the pictures) should be centered. Hope this is understandable.
Example: Say the browser's width is wide enough to display one picture per row, but not wide enough to display two. So only one picture should be displayed and it should be centered, which means left and right margins are equal. Now the browser's width is increased so that two pictures can be displayed per row. The pictures should now rearrange, so that two pictures are displayed per row and they should be centered, which means left and right margins should be equal. This should go on for three or more pictures.
Here's some simple example code, which nearly does what I want:
border: 1px solid black;
All I want is, that these yellow boxes are centered, instead of left aligned. This works fine without float: left; doesn't with it.
So I wonder if there's a trick to make them centered? Any hints?
Thanks in advance,
Sep 28, 2004, 15:19 #2
- Join Date
- Jan 2003
- Hampshire UK
- 153 Post(s)
- 3 Thread(s)
The only solution I found was by forcing ie into quirks mode with the xml prologue.
Heres the test page:
It works in ie and firefox (and opera7). I don't know how it will stand up in real life as this was only an exercise but you're welcome to try it and see how you get on.
Unfortunately there is no real way to centre floated elements or multiple block elements in ie. Mozilla browers etc can use display:table to get the job done but ie doesn't understand it.
Tables won't be much use either , although they will centre nicely the images won't drop down like floats.
Hope its of some use anyway.
if the images do not have captions then you don't need to float them at all but leave them inline and use text-align:center on the parent.