How to center a 3 column Css Div Site?


Tags: css,layout,html

Problem :

My site has a 100% width header & footer, and 3 columns. The columns need to all be fixed width, but in the center of the page.

HTML

<div id="Table_01">
    <div id="Header"></div>
    <span id="LeftCol">Left Col </span>
    <span id="MidCol">Middle    </span>
    <span id="RightCol">Right Col   </span>
    <div id="Footer">Footer</div>
</div>

CSS

 #Table_01 {
    position:absolute;
    left:0px;
    top:0px;
    width:100%;
}    
#Header {
    position:absolute;
    left:0px;
    top:0px;
    width:100%;
    height:42px;
    background-image: url("images/Header.gif");
}
#LeftCol {
    position:absolute;
    left:0px;
    top:42px;
    width:300px;
    height:422px;
    text-align:center;
    border:2px solid;
}    
#MidCol {
    position:absolute;
    left:300px;
    top:42px;
    width:550px;
    height:422px;
    text-align:center;
    border:2px solid;
}    
#RightCol {
    position:absolute;
    left:850px;
    top:42px;
    width:300px;
    height:422px;
    text-align:center;
    border:2px solid;
}    
#Footer {
    position:absolute;
    left:0px;
    top:464px;
    width:1000px;
    height:1536px;
}

JSFIDDLE



Solution :

What you need is a mix of position:relative and margin:0 auto applied to a container.

Add a container div:

.container {
    width:1150px;
    margin:0 auto;
    position:relative;
}

See updated JSFIDDLE


    CSS Howto..

    How can have all the images show up on my slider whilst differentiating each image with its own div tag?

    How to dynamically set the height in a CSS-class depending on the browser's window size with Javascript / jQuery?

    Jquery: how to get menu to expand towards the right instead of the left

    How to add separate style to google.visualization.DataTable without changing its own styles

    Inline blocks somehow don't get displayed in a straight line [duplicate]

    How do I display an image over a table cell that's larger than the cell?

    how to reverse CSS animation on second click with jQuery

    How to use JQuery to identify CSS 'text-decoration' [closed]

    How to return WebElement having particular CSS property using JavascriptExecutor?

    How do I insert an image in HTML so that its fills up the entire screen regardless of screen size?

    How to make an image fully flexible in terms of display size?

    How to change a portion of text on hover with css [duplicate]

    How can I set up a static Webkit Mask

    How to make jQuery show() stay on page

    How to get opaque text on div with transparency?

    How to read this hover syntax in css?

    How can I use ellipses in a fluid width table without making each column the same size?

    How to organize css files in a Joomla 2.5 template? [closed]

    How to create that background on my page with css [duplicate]

    How to pass a css % parameter in javascript/jquery

    CSS - How to move an absolutely positioned item relatively to its current position

    several questions about how to work with divs

    How can I make uneven rows for a 2-column grid with Bootstrap/css?

    How to make non standard shape buttons, non clickable outside of it's border

    How to make div size bigger?

    How do I import 2 different files icons?

    CSS how to change page content depending on page size (zoom) in responsive design

    How do I get the border-radius from an element using jQuery?

    How to set the width of a jQuery Mobile 1.4 responsive Panel in percentage?

    Asset Pipline, how to add image path to background: url()?