13 replies [Last post]
ccondrup
Offline
newbie
Oslo
Last seen: 16 years 16 weeks ago
Oslo
Timezone: GMT+1
Joined: 2006-01-11
Posts: 10
Points: 0

I found a lot of articles on this subject via Google, but none of them worked for me.

This is the code: http://pastebin.com/590866

The 3 floats in the middle are floated left. I want them center-aligned. Tried applying text-align: center and margin: 0 auto to all the elements, also tried setting margin-left: 5% as well as margin-right etc.
All the text is properly aligned, the text within the cleared div is properly aligned, the content of the floats are even centered, but not the floated divs themselves. Why is this?

Thanks in advance!

karinne
karinne's picture
Offline
Enthusiast
Aylmer, QC, Canada
Last seen: 15 years 32 weeks ago
Aylmer, QC, Canada
Timezone: GMT-5
Joined: 2004-01-14
Posts: 291
Points: 0

Center-align set of floats

I don't get it?! :?:

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

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 39 weeks 6 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Center-align set of floats

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

Verschwindende wrote:
  • CSS doesn't make pies

karinne
karinne's picture
Offline
Enthusiast
Aylmer, QC, Canada
Last seen: 15 years 32 weeks ago
Aylmer, QC, Canada
Timezone: GMT-5
Joined: 2004-01-14
Posts: 291
Points: 0

Center-align set of floats

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

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 39 weeks 6 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Center-align set of floats

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

Verschwindende wrote:
  • CSS doesn't make pies

karinne
karinne's picture
Offline
Enthusiast
Aylmer, QC, Canada
Last seen: 15 years 32 weeks ago
Aylmer, QC, Canada
Timezone: GMT-5
Joined: 2004-01-14
Posts: 291
Points: 0

Center-align set of floats

how confusing! :roll:

ccondrup
Offline
newbie
Oslo
Last seen: 16 years 16 weeks ago
Oslo
Timezone: GMT+1
Joined: 2006-01-11
Posts: 10
Points: 0

Center-align set of floats

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

Well, isn't that exactly what I've done?

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.

karinne
karinne's picture
Offline
Enthusiast
Aylmer, QC, Canada
Last seen: 15 years 32 weeks ago
Aylmer, QC, Canada
Timezone: GMT-5
Joined: 2004-01-14
Posts: 291
Points: 0

Center-align set of floats

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%;
}

change the width to whatever you want.

ccondrup
Offline
newbie
Oslo
Last seen: 16 years 16 weeks ago
Oslo
Timezone: GMT+1
Joined: 2006-01-11
Posts: 10
Points: 0

Center-align set of floats

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.

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 39 weeks 6 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Center-align set of floats

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.

Verschwindende wrote:
  • CSS doesn't make pies

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 8 years 3 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Center-align set of floats

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

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

ccondrup
Offline
newbie
Oslo
Last seen: 16 years 16 weeks ago
Oslo
Timezone: GMT+1
Joined: 2006-01-11
Posts: 10
Points: 0

Center-align set of floats

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.

3drom
Offline
Enthusiast
Last seen: 17 years 6 days ago
Joined: 2006-01-25
Posts: 61
Points: 0

Center-align set of floats

ccondrup wrote:
And what's up with "0 auto;" ?

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/

ccondrup
Offline
newbie
Oslo
Last seen: 16 years 16 weeks ago
Oslo
Timezone: GMT+1
Joined: 2006-01-11
Posts: 10
Points: 0

Center-align set of floats

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.