CODEWITHSUNDEEP
htmlcss
Smashman
Smashman

Reputation: 165

CSS Auto Margin pushing down other elements

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!

Upvotes: 0

Views: 3563

Answers (3)

zzzzBov
zzzzBov

Reputation: 179046

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.

Upvotes: 3

jeroen
jeroen

Reputation: 91734

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.

Upvotes: 0

muirbot
muirbot

Reputation: 2081

#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.

Upvotes: 1

Related Questions