How to center two columns using CSS?


Tags: html,css

Problem :

I'm trying to center two columns on my website but there are some problems. The result of every change is left position. What am i doing wrong? More on picture.

body {
    background - image: url("../img/gray.png");
}

#header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100px;
    background: #cc0000;
    text - align: center;
}

#wrapper {
    margin: 100px;
    width: 1280px;
}

#leftcolumn {
    float: left;
    background - image: url("../img/gray.png");
    margin: 10px 0px 10px 0px;
    padding: 10px;
    height: 682px;
    width: 460px;
}

#rightcolumn {
    float: left;
    color: #333;
    border: 1px solid # ccc;
    background: #F2F2E6;
    margin: 10px 0px 10px 0px;
    padding: 10px;
    height: 500px;
    width: 439px;
    display: inline;
    position: relative;
}

website Thanks



Solution :

Since the two columns' width is less than the width of the wrapper (i.e. 959px vs 1280px), you'll need to place the two columns inside a fixed width container:

<div id="wrapper">
    <div id="column_container">
        <div id="column1"></div>
        <div id="column2"></div>
    </div>
</div>

And then do something like:

#column_container {
    width: 959px;
    margin: 0 auto;
}

    CSS Howto..

    How to get dropdown menus to align with the correct menu tab

    How to trigger css :hover event on PageLoad

    How to apply css transformations on HTML elements using jQuery?

    How to re-render a page from a Google Chrome extension?

    How to specify height using fancybox 2.1.4

    How to add multiple CSS elements to a div using jQuery?

    How to inject css into a document via ajax?

    How to make CSS width to fill parent?

    How to layout follow content using CSS?

    How Do I Add Colgroup Tag to ASP:Datagrid Control?

    How to run a Javascript function on an iframe before the source (src) is loaded?

    How come I keep getting a Failed to load resource: Error everytime I run my applacation?

    How to change CSS of ng-view when triggering CSS in ng-include

    CSS - How to change backgound colour for item avatar in ionicframework?

    How to exclude specific control from css?

    CSS Animations - How to make it stay there after animation? [closed]

    How to apply different width stored in PHP to 3 identical DIVs (using same CSS)

    How to dynamically allocate block of text using css?

    How to position my image below and to the right of my text?

    jquery carousel how to have a gradient on start and ending slides

    How to add element to existing css class [closed]

    How to fix animation problems css3

    With CSS, how would I align this banner and navigation menu to XHTML 1.0 Strict specifications?

    How can i override css property

    How to reposition a div

    How to change label color with html and CSS without js?

    How to style responsive table to make table like list?

    How to define changing css property based on incrementing class names?

    CSS Sub Menu shows up outside body

    How to vertically align text to the middle of a list