How to center a DIV, whilst keeping content left???

[t5amec]

Hey I have the following code:

<div id="content">

<img src="/images/main05/head1.jpg" alt="" height="60" width="578" /><br />
<img src="/images/main05/head2.jpg" alt="" height="60" width="578" /><br />
<img src="/images/main05/head3.jpg" alt="" height="60" width="578" /><br />
<img src="/images/main05/head4.jpg" alt="" height="60" width="578" /><br />

<p>Left-Field, Left-Field, Left-Field, Left-Field, Left-Field, Left-Field, Left-Field, Left-Field, Left-Field, Left-Field, Left-Field, Left-Field, Left-Field, Left-Field.</p>

<p><a href="#">Left-Field, Left-Field, Left-Field, Left-Field, Left-Field, Left-Field, Left-Field, Left-Field, Left-Field, Left-Field, Left-Field, Left-Field, Left-Field.</a></p>

<p></p>

</div>

I want the DIV to be centered, as its only 578px wide, how can i do so whilst keeping the content text left, everything i try centers everything...

Please Help...


Make Sense? I hope so (-:

 

[Foamcow]

Depending on the browser...

Standards compliant browsers will center the div if you give it a

margin:0 auto;

However, older browsers may not get this.
So, in the surrounding div set

text-align:center;

Note: this will set everything in that div to be centered.

Then in the div you wanted centered set the text back to left aligned

text-align:left;

You may wish to employ both methods, and perhaps use a CSS hack or IE conditional comment to hide the one for older browsers.

<honk>*:O)</honk>
Designease Ltd. - polyprop folders, ring binders and creative presentation ideas
Earl & Thompson Marketing - Marketing Agency Services in Gloucestershire

 

[kirsir]

Hi there,

A better way to do this and avoid having to have divs wrapping divs that overwrite each other is to use one div that wraps everything you want centered (say pageWrapper).

You tell this div to move 50% of the window from the left (left edge of box would be dead in the center of the screen) and then pull it back towards the left, 50% the size of the box (center of box would now be in the center of screen).

So, in your CSS you would use this style:

#pageWrapper {
	position:relative;
	padding:0px;
	margin:0px;
	left:50%;
	margin-left:-289px; /*578px moved 50% of window to make left edge at center - negative margin half the box width (289px) pulls it back so that the box is at the center*/
	width:578px;
	background:#fff;
}

Any text inside this box will be defaulted left aligned because you haven't told it to be anything else!

Good luck!


Kirsir Support Team

http://www.kirsir.ca

 

[Vragabond]

Krisir, that is an awful advice and throughout the years many many many methods appeared that are way superior to the one you describe. Starting with the only correct one, the one that Foamcow mentions first.

 

[BillyRayPreachersSon]

Interesting to see that

http://www.kirsir.ca

also use the nasty method on their website!

I agree - that's not a very elegant solution - although it is one possible solution. The one Foamcow proposes really is a lot better, as it would also take into account the container changing in size.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[kirsir]

We agree there are numerous ways to do this. Whichever you prefer is the way to go! There's no need to insult anybody. We're just trying to help the guy out!

For us, we wanted one div that works for most browsers instead of having the additional container div that's only purpose is for old IE. Of course we'd prefer to just use margin:0 auto! And very soon we will (old stuff is dying off thank goodness!). For now, the negative margin works equally well as adding an additional container div especially when the size doesn't change (t5amec had said 578px). This method avoids conditional comments, CSS overwriting, or browser-specific code.

While we all still consider older browsers, it's okay that we each prefer different methods. That's what makes the web great. Hopefully we'll all be able to just use 'margin:0 auto' before long.

Best of luck!

Kirsir Support Team

http://www.kirsir.ca

 

[Foamcow]

Hmm.
You are creating a page wrapper anyway.

Try this.

body {
    text-align:center;
}

#pageWrapper {
   margin:0 auto;
   text-align:left;
}

That covers your bases, uses less CSS and doesn't require any more markup than the negative margin method.


<honk>*:O)</honk>
Designease Ltd. - polyprop folders, ring binders and creative presentation ideas
Earl & Thompson Marketing - Marketing Agency Services in Gloucestershire

 

[kirsir]

That's a nice way to do it and avoids the extra container div. It really is too bad that text-align:center is interpreted in two different ways. I've never liked having to overstyle styles (although sometimes it's necessary). If you do too much overstyling and coding for old browsers it can start to make things difficult to follow.

In this case, I think including the text-align:center in the body tag is another good way to implement this solution.

Kirsir Support Team

http://www.kirsir.ca

 

[HobbesFriend]

I've been having the same problem and I see a few different options here and I want to make sure I understand correctly.

There are three different ways of doing the same thing?
1) Foamcow's original post that Vragabond and BillyRayPreachersSon like.

<body>
	<div style="text-align:center">
		<div style="text-align:left; width:578px; margin:0 auto;">Content</div>
	</div>
</body>

2) Kirsir's approach that Vragabond and BillyRayPreachersSon seem to hate.

<body>
	<div style="left:50%, margin-left:-289px, width:578px">Content</div>
</body>

3) Foamcow's new method.

<body style="text-align:center">
	<div style="margin:0 auto; text-align:left; width:578px">Content</div>
<body>

I don't really understand why Vragabond and BillyRayPreachersSon don't like Kirsir's approach. It seems to have less code than Foamcow's first, or even second, suggestion.

Unless I plan on changing the page width regularly I don't see why a negative margin is such a bad way to go. Am I missing something?

 

[Vragabond]

I understand that there are many ways to center an element, but here at Tek-Tips we should provide a way to weed out inferior options and offer only the most standard and best working options. Making just one centered element on the whole page, maybe many solutions seem to be easy enough. But when you start incorporating all that into a full design, it is only Foamcow's solution that works best.

There are problems with shifted content (using left, top, bottom, right), because the element still makes a dent wherever it should be without the value, thus taking up more space than it needs to. That in addition to it needing more rewriting if you want to change the width of the container and the fact that it cannot be used on an odd sized container (to pixel perfection), it makes this approach inferior.

Furthermore, IE6 supports the margin way of centering, the one described in the W3 standards as the way of horizontally centering a container. And usage of IE pre 6 is now as low as a couple percent of all users.

Lastly, HobbesFriend, Kirsir's method requires an additional [tt]position: relative;[/tt] (since statically positioned elements cannot be shifted) if you simply want to count the number of elements where one solution is superior or inferior. And changing the position to relative when not needed can cause some additional problems.

 

[t5amec]

the id method proved best for me... thanks!

Make Sense? I hope so (-: