Centering a div in CSS - Webmaster Forum - Web Design, Programming and SEO forums

01-25-2007, 01:53 AM

Epic

Status: Junior Member
Join date: Jan 2007
Location:
Expertise:
Software:

Posts: 82

iTrader: 2 / 100%

Epic is on a distinguished road

Centering a div in CSS

I've been wondering about this lately...

If I have a div that's the container for my layout and I want to center it, what's the best way? Generally, the div that I use to contain my layout is floated left, so the auto margins don't work.

I end up with code that looks like this...

Code:

#container {
width: 750px;
margin-left: auto;
margin-right: auto;
}
#content {
float: left;
width: 750px;
}

HTML Code:

<div id="container">
<div id="content">
</div>
</div>

Now this may not seem like a big deal, but when you need to add padding or a border without extending the width of the div in certain browsers, it can end up quite messy, with multiple more divs starting out your page.

Is there a better way to do this? Or am I stuck with this mess?

01-25-2007, 01:56 AM

rasberry

Status: Soleil Soleil!
Join date: Nov 2005
Location: Polska
Expertise:
Software:

Posts: 1,415

iTrader: 4 / 100%

rasberry is on a distinguished road

I'm not sure if this is what you're talking about, but you could always do...

Code:

<div align="center">
<div id="container"> 
<div id="content"> 
</div> 
</div>
</div>

01-26-2007, 07:00 AM

Zara

Status: Member
Join date: Apr 2006
Location:
Expertise:
Software:

Posts: 249

iTrader: 9 / 100%

Zara is on a distinguished road

Originally Posted by rasberry

I'm not sure if this is what you're talking about, but you could always do...

Code:

<div align="center">
<div id="container"> 
<div id="content"> 
</div> 
</div>
</div>

He will probably want to avoid that because align is not a valid attribute in Strict XHTML

I normally use:

Code:

#container 
{
	width: 700px;
	margin: 0 auto 0 auto;
	text-align: center;
}

01-25-2007, 02:00 AM

Jeff Andersen

Status: Superstar
Join date: Apr 2005
Location:
Expertise:
Software:

Posts: 4,449

iTrader: 10 / 100%

Jeff Andersen is on a distinguished road

#container {
width: 750px;
width:: 0 auto;
}
#content {
float: left;
}

Should work

01-25-2007, 02:08 AM

Epic

Status: Junior Member
Join date: Jan 2007
Location:
Expertise:
Software:

Posts: 82

iTrader: 2 / 100%

Epic is on a distinguished road

Originally Posted by Jeff Andersen

#container {
width: 750px;
width:: 0 auto;
}
#content {
float: left;
}

Should work

You have to have the width of 750px in there for content because divs which are floated left by default have no width, and they'll go on forever. Also, this is basically the same as my code except with the shortcut on the margins (I'm assuming you meant margin instead of width

). Even though the CSS is a little shorter, you still end up with "div soup" (as I saw someone call it

) in the HTML code.

I should probably be more clear with what I'm asking...Is there a way to center a div which is floated left without using another div? It also needs to validate. So far I haven't come across a way, but maybe someone here knows.

Thanks

01-25-2007, 02:22 AM

PYT

Status: Member
Join date: Aug 2006
Location:
Expertise:
Software:

Posts: 115

iTrader: 2 / 100%

PYT is on a distinguished road

yeah the easiest way to do this is as so

in your div add these

margin:0 auto;
width:1000px;

To make this work you always need a set width and the div should be centered.

01-25-2007, 02:23 AM

Julian

Status: Simply to simplify
Join date: Apr 2005
Location: Foxton, Manawatu, New Zealand
Expertise:
Software:

Posts: 5,572

iTrader: 0 / 0%

Julian is on a distinguished road

It's difficult to understand your question properly. Center a div which is floated left without using another div?

Floating left will always move that div to the left, the ONLY way to center a div is with relative positions using % or auto margins. But as soon as you float it you take it out of the normal document flow.

Best answer is Jeffs, you have to specify a width so that the auto centering margins will center the whole container.

01-25-2007, 02:29 AM

Epic

Status: Junior Member
Join date: Jan 2007
Location:
Expertise:
Software:

Posts: 82

iTrader: 2 / 100%

Epic is on a distinguished road

Jeff's code is what I was already using.

Thanks for the answers guys...an example of how this gets really messy is the start of this page that I coded:

HTML Code:

<div class="center">
<div id="container">
<div id="content">
<div id="banner"></div>
<div id="navigation">

The page starts with 5 divs, and it ends with even more </div>s.

Anyway, I guess that's the best way to do it. Thanks for the help.

01-25-2007, 11:10 AM

Salathe

Status: Community Archaeologist
Join date: Jul 2004
Location: Scotland
Expertise: Software Development
Software: vim, PHP

Posts: 3,820

iTrader: 25 / 100%

Salathe will become famous soon enough

Originally Posted by Epic

Thanks for the answers guys...an example of how this gets really messy is the start of this page that I coded:

HTML Code:

<div class="center">
<div id="container">
<div id="content">
<div id="banner"></div>
<div id="navigation">

That code is cleaner than using tables.

HTML Code:

<table class="center">
  <tr>
    <td>&nbsp;</td>
    <td>
      <table class="container" width="750">
        <tr>
          <td class="content">
            <div class="banner">Too lazy to</div>
            <div class="navigation">code these with tables</div>
          </td>
        </tr>
    </td>
    <td>&nbsp;</td>
  </tr>
</table>

01-25-2007, 02:55 AM

#10

Julian

Status: Simply to simplify
Join date: Apr 2005
Location: Foxton, Manawatu, New Zealand
Expertise:
Software:

Posts: 5,572

iTrader: 0 / 0%

Julian is on a distinguished road

Well although I don't recommend div soup, I do believe you can achieve what you want with dramatically less code than using tables for structure.