CSS auto margin discarding other elements

Question

I am trying to make the site beautiful, and so far everything went well, because the problem occurred when trying to center a column with two side columns if I use margin:0 auto ; 2 side columns are pushed down below the middle central column, is it possible for them to occupy the space near the central column even when centered?

Here is 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 is at http://tf2ware.net

Hope you can help and thank if you expect!

Answer 1

Place div #center_column after div #right_column .

This is not the best of all answers, as it modifies the markup to customize the style, but it should work for a quick fix.

Edit to explain: I did not write why before, and I think it might be useful.

docs

A float is a field that moves left or right on the current line . The most interesting characteristic of a floating (or "floating" or "floating") is that the content can flow along its side (or it is forbidden to do this using the "clear" property). Content flows down from the right side of the field to the left and left of the right panel. 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 highlighted the important part. Since the centered div was already in the display list, the current row is for #left_column and #right_column after #center_column . After you put #center_column after the left and right columns, the current row will be next to the floating elements.

Answer 2

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

and reorder dom to the last column of #center .

Answer 3

If you don't want to reorder your html (for SEO, scrollers, etc.), you can also use absolute positioning for the side columns, but this can lead to problems if the side columns can have a higher height than the center column.