Center-align set of floats

I don't get it?! :?:

This is what I see. Looks fine to me?! :?

Of course they will be left aligned You need to enclose all three floated divs in a container, and apply the width and margin to that. That should center them.

But his divs a spread the whole width of the screen?!? How can you know it the site is centered or not :?

You're looking at the wrong site pastebin is just where the code is stored, download it to see the page

how confusing! :roll:

The three floated .imageblock divs are children of the #main container. I have tried setting the width to 80% and the following margins on #main - the floated ones turn up left-aligned with every single one of them:

margin: auto; / margin: 0 auto; / margin-left: 0; / margin-right: 0; / margin: 5%; / margin: 0; etc etc.

What is the preffered way of setting a zero value margin anyways? And what's up with "0 auto;" ?

I don't want to ask such silly questions, but I feel I have tried all the combinations... setting all properties on all id's+classes, some of them, only one at a time etc etc.

I couldn't see the code anymore so here goes. In your CSS, you body should look like this

body {
   text-align: center;
   ...
}

And then you're #main id ... the one that wraps all your divs should look like this

#main {
    margin: 0 auto;
    width: 80%;
}

Ok, I appreciate the help. I still cannot make this work. I don't know what I'm doing wrong, because the tutorials/instructions seem pretty straight forward.

Attaching the file to this post. It has some test-text and bg-colors to help show/highlight the problem.

You need the container div around the floats and nothing else.

centered text before floats
<div id="main">
	<div class="imageblock">
	<img src="1.gif" alt="1"/>
	<p style="background: yellow;">p in first floated div</p>
	</div>

	<div class="imageblock" />
	<img  src="2.gif" alt="2" />
	<p style="background: #ffffff;">p in second floated<br />This text should be in the dead center of the page</p>						</div>

	<div class="imageblock">
	<img src="2.gif" width="110px" height="70px" alt="3" />
	<p style="background: red;">paragraph in 3rd floated div</p>		</div>

</div>

	<div style="clear: both;">cleared both div right after floats</div>

Somethign like that.

Your biggest problem is that you are not declaring any widths for your floats allowing them to just shrinkwrap to their contents,with the contents dictating the width of each float along with the padding giving the impression that those floats span the full width.

Putting a wrapper div around the floats that has a width and auto margins will center up the floats to some extent but not perfectly, you really need to figure out some widths for the floats.

Hugo

pineapplehead: The text before there was just a test to see if it would be centered. Removed now.
hugo: Ok, added width to the float-style (.imageblock).

Seems none of these did the trick, I am getting the exact same result. I tried with 150px width, as well as 15em and 15%. I also removed all whitespace between tags.

I am again attaching the file as it looks now.

The '0' applies to the top and bottom margins, the 'auto' to the left and right margins.
When you are setting the top and bottom margins to be the same height, you can just put in their shared value as the first value, and the same for left and right, if they share the same value, that can be the second value.
i.e.
margin: 5px 10px;

is the same as:
margin-top: 5px;
margin-right: 10px;
margin-bottom: 5px;
margin-left: 10px;

or
margin: 5px 10px 5px 10px;
(margin: top right bottom left;)

* One value: all sides
* Two values: top and bottom, right and left
* Three values: top, right and left, bottom
* Four values: top, right, bottom, left

from: http://www.456bereastreet.com/archive/200502/efficient_css_with_shorthand_properties/

3drom: Thanks for that, very nice tip indeed!

As for the problem, I have not found any solution, but as it was too simple to validate, I have added a title and charset. Now validates, both css and xhtml.