CSS Auto Margin pushing down other elements

Question

I'm attempting to make a site beautiful, and so far it's gone quite well, by problem arose when attempting to center a column with 2 side columns, if I use margin:0 auto; the 2 side columns are pushed down beneath the middle centered column, is there a way for them to occupy space beside the central column, even while centered?

Here's my CSS:

body {

    background-image: url(../images/background.png);

    background-repeat: repeat;

    background-color: #F0C36B;

    font-family:Arial;

    color:#FFF;

}

#header, #footer {

    text-align:center;

    clear:both;

}

#header {
    margin-bottom:0.5em;
    }

#left_column, #right_column, #center_column {

    background-color:#5B7A8C;

    border-radius: 10px;

    -moz-border-radius: 10px;

    -webkit-border-radius: 10px;

    -khtml-border-radius: 10px;

    -icab-border-radius: 10px;

    -o-border-radius: 10px;

    border:solid #FFF 2px;

    -moz-box-shadow: 0 0 10px #000000;

    -webkit-box-shadow: 0 0 10px #000000;

    box-shadow: 0 0 10px #000000;

} 

#left_column {

    width:20%;

    float:left;

    text-align:center;

}

#right_column {

    width:20%;

    float:right;

    text-align:center;

}

#center_column {

    width:50%;

    padding:0.5em;

    margin:0 auto;

}

#page_container {

    width:90%;

    margin:0 auto;

}

#headline {

    font-family:TF2 Build;

    font-size:2em;

    }

#author {

    font-style: italic;

    font-size:0.7em;

    }

@font-face {

  font-family: "TF2";

  src: url(../fonts/TF2.eot);

  src: local("☺"),

    url("../fonts/TF2.ttf") format("truetype");

}

@font-face {

  font-family: "TF2 Build";

  src: url(../fonts/tf2build.eot);

  src: local("☺"),

    url("../fonts/tf2build.ttf") format("truetype");

}

h2 {

    font-family: "TF2";

    color: #FFF;

    margin:0.25em;

}

hr {

    border: 1px solid #FFF;

}

My site resides at http://tf2ware.net

I hope you can help and thanks if anticipation!

zzzzBov · Accepted Answer · 2011-03-02T19:00:50.740

3

Put the #center_column div after the #right_column div.

This isn't the best of all answers as it changes the markup to adjust the style, but it should work for a quick-fix.

Edit to explain: I didn't post a why before, and I think it might be useful.

docs

A float is a box that is shifted to the left or right on the current line. The most interesting characteristic of a float (or "floated" or "floating" box) is that content may flow along its side (or be prohibited from doing so by the 'clear' property). Content flows down the right side of a left-floated box and down the left side of a right-floated box. The following is an introduction to float positioning and content flow; the exact rules governing float behavior are given in the description of the 'float' property.

I bolded the important part. Because the centered div was already in the display list, the current line for #left_column and #right_column is after #center_column. Once you put #center_column after the left and right columns, the current line is next to the floated elements.

edited Mar 02 '11 at 19:00

answered Mar 02 '11 at 18:13

zzzzBov

174,988
54
320
367

But then the items just appear way over the top of the `#center_column` column div. I want them to appear beside. – Smashman Mar 02 '11 at 18:15
Wait, what? http://tf2ware.net/ That worked perfectly. I tried that! Well thanks anyway guys, guess I didn't need to ask for your help at all. – Smashman Mar 02 '11 at 18:17
Why is it in this case that the center column has to be written last, but in this [answer](http://stackoverflow.com/questions/4713181/elastic-layout-with-max-width-and-min-width-using-grid-based-design/4714558#4714558), the column that's not floated can be written before the float? Check out the Live Demo link on jsbin. – huyz Jul 06 '11 at 02:36
Actually, I just posted a separate question: http://stackoverflow.com/questions/6591108/why-does-order-of-float-div-and-non-float-div-matter-only-in-some-cases – huyz Jul 06 '11 at 03:33

score 1 · Answer 2 · answered Mar 02 '11 at 18:16

1

#page_container { text-align: center; }
#left_column { float: left; }
#right_column { float: right; }

and change the order of the dom to make #center column last.

answered Mar 02 '11 at 18:16

muirbot

2,061
1
20
29

score 0 · Answer 3 · answered Mar 02 '11 at 18:19

0

If you don´t want to change the order in your html (for SEO, screenreaders, etc.), you can also use absolute positioning for the side columns, but that might lead to problems if the side columns can have a greater height than the center column.

answered Mar 02 '11 at 18:19

jeroen

91,079
21
114
132

CSS Auto Margin pushing down other elements

3 Answers3

Linked