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 remove border-bottom of last div in a group - CSS

    How to highlight widget title with CSS?

    Django Allauth - How to add custom css class to fields?

    JavaFX: How do I set a Background Image in code?

    How can I make Non-English quotation marks with a help of CSS? [closed]

    How do I add a logo into the nav bar in CSS?

    How to get the header and navbar on top?

    Data Tables in tabPanel output from navPanel in Shiny: How to change background colors using CSS

    Last inherited display property is inline but computed is block. How is this even possible?

    CSS accordion menu - How to expand and hyperlink

    How to avoid bloating pages with divs?

    How to get bean property on css file?

    CSS: How to target a specific cell inside a table?

    How to add space after border in css

    How to make a site have a built in user-friendly editor?

    How to develop a webpage with Bootstrap [closed]

    How do I fill up the remainder of a div with another div?

    How to select two different elements with an XPath query

    How to move some text down in a li tag?

    How to ignore CSS img styling for certain sections of the website?

    How to define margin (CSS) around an absolutely positioned, floating element?

    How to prevent the scroll of table when click to header on Chrome?

    How can I prevent a form-control from taking a new line in Bootstrap

    How to change radio button place & add line separator

    How to get value of input using Jquery and put it in css of an element

    How to center text in my div

    How to stop divs moving in browser when zoom in/out?

    How to override a link tag with another in css

    How to split page in half using CSS?

    How to apply !important using .css()?