Centering divs in IE and making all three divs the same height!

[Riseykins]

Okay, so I am having problems centering my div layout!

 

http://www.burningviolet.com/bvnew.php

 

It's only IE that's giving me crap, and it was working earlier. IDK what's going on here.

 

Anyhow, I also would like my left, right and centre divs to be the same height always. But the central div will vary, so I don't know how to get the left and right divs to be the same height.

 

The former is the most important, though.

 

This is killing me. I hate using a billion divs but apparently using tables isn't okay any more. :s

[Riseykins]

LOLage I just added <center> before and </center> after the div. x.x

 

But I am still stuck with the div height deal.

[haku]

the <center> tag is deprecated, so you shouldn't use it.

 

If you want to set them to the middle, you need to make your document struture like this:

 

<div id="container">center div content
   <div id="leftdiv">left div content</div>
   <div id="rightdiv">right div content</div>
</div>

 

Then you can set your CSS like this for the three divs:

 

#container
{
   width: 900px; // set this to whatever you want the entire div size to be
   margin: 0 auto;
   padding: 0 300px;
}

#leftdiv
{
   width: 299px; // set this to the left column size. It should be less than the second number in the padding of the #container div
   float: left;
}

#right div
{
   width: 299px; //this should also be less than the second number in the padding of the #container div
   float: right;
}

 

Note: if you have padding/margin/borders on the left and right divs, then you will have to adjust the above numbers somewhat. So try setting all the padding, borders and margins to zero at first, and then adjusting from there. This isn't the easiest technique to perfect, so it may take some playing with at first.

 

As for having the 3 divs be the same size, well that's not actually possible, but there is a workaround for it. Google 'faux columns'. There is a good article on alistapart about it that explains it well.

[Riseykins]

Surely that will mean that it will look different in different resolutions?

[haku]

Yes, but I believe you can change the pixel sizes to % sizes. However, you will have to do the same as I said and keep the paddings on the container div to be larger than the widths of the side divs.

[haku]

Ignore my original code that I gave. I just went back and looked at it, and realized that because I wrote it off the top of my head, there were a bunch of errors in it. I don't know what I was thinking!

 

You want to structure your document like this:

 

<div id="container">
   <div id="left_div">content of left div</div>
   <div id="right_div">content of right div</div>
   <div id="middle_div">content of middle div</div>
</div>

 

You can then set your CSS like this:

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

 

This sets the width of the content. In this case I set it at 80% of the browser, and centered it

 

#left_div
{
   width: 33%;
   float: left;
   background-color: #00CC99;
}
#right_div
{
   width: 33%;
   float: right;
   background-color: #3399CC;
}

 

Here I have floated the left and right columns to the side, and given them a width of 33%, which will be 33% of the #container div, not of the entire screen, since they are contained within the container.

 

#middle_div
{
   padding: 0 34%;
}

 

Here I have given the middle div padding on the right and left sides, that is greater in size than the widths of the left and right divs. (middle's padding = 34%, left and right's widths = 33%).

 

This means that the left and right divs will float over top the area that has padding in the middle div, giving the appearance of three columns.

 

Where this method runs into problems is if you want the 3 divs to be the same height. As far as I know, the faux columns method requires set widths for it to work, meaning that you may not be able to use the method I have outlined.

[Wolphie]

To center things in IE, you just add the text-align: center; property to the element. Although remember to change it back to text-align: left; when writing text unless you want it to appear in the middle also.

 

In firefox it's margin: 0 auto;

 

 

body {margin:0 auto;text-align:center;width: 900px;} // Remember the body needs to be a fixed width.

[haku]

text-align center is a bad practice for centering elements, as elements aren't text. Using margin: 0 auto works on both IE and other browsers, so that should be used.

[BillyBoB]

text-align centers all content of the element.

[haku]

And? It's still bad practice. Tables layout pages. They are bad practice. Just because something can be done, doesn't mean it should.

 

It's the difference between being a hack, and programming properly.

 

[BillyBoB]

Alright sorry bad day. Will look for better techniques.