How to position a div to the center?

Question

I am building a two column layout and I want to keep the total column inside a wrapper in the center of the screen even if it's resized. I have tried floating some CSS divs but not helping.

This is my layout:

<div class="wrapper"><div class="leftCol">Left</div><div class="rightCol">Right</div></div>

CSS:

.wrapper{ width:720px; text-align:centre;} 
.leftCol{ width:200px; float:left;} 
.rightCol{ width:510px; float:right;}

I believe your answer is here sir. http://stackoverflow.com/questions/953918/how-to-align-a-div-to-the-middle-horizontally-width-of-the-page — Ryan G, Mar 12 '16 at 05:34

score 2 · Accepted Answer · 2016-03-12T05:54:30.490

2

All you need to do is set the wrapper as such

CSS:

.wrapper { width:720px; margin:0px auto;}

Furthermore I would recommend using a bit more responsive CSS with percentage to fit with the width as well, so that it doesn't look really tiny on larger screens.

edited Mar 12 '16 at 05:54

answered Mar 12 '16 at 05:43

Thanks for the suggestion. Works fine for me! – DASH Mar 12 '16 at 05:46
Edited the answer now Roko C. Buljan – Mar 12 '16 at 05:55

score 0 · Answer 2 · answered Mar 12 '16 at 05:38

0

You can try the margin trick here on the wrapper class.

.wrapper{ width:720px; margin: 0 auto; }

answered Mar 12 '16 at 05:38

TeaCoder

1,958
13
13

Roko C. Buljan · Answer 3 · 2016-03-12T05:49:46.777

Float removes your children DIV elements from a static document flow.
DIV elements being block-level elements, unless set as inline or inline-block will not in any case apply to the parent's text-align property.

You have more possibilities, the most common are:

.wrapper{
    width: 720;
    margin: 0 auto; /* keeps me centered */
    overflow: auto; /* to contain floated child elements.
                    Or use a .clearfix  http://nicolasgallagher.com/micro-clearfix-hack/ */
}

or using text-align: center;

.wrapper{
    width: 720;
    margin: 0 auto; /* keeps me centered (use anyways) */
    text-align: center; /* my children are not block-level elements */
}
.leftCol{
    display:inline-block;
    width:200px;
    /* text-align: left; probably you might want to reset text alignment */
} 
.rightCol{
    display: inline-block;
    width:510px;
}

I would discourage you from using (in 2016.+) fixed widths. Use another more responsive unit like % or vw

score 0 · Answer 4 · answered Mar 12 '16 at 05:43

0

Please try below css

.wrapper{ width:720px; text-align:centre; margin: 0 auto;} 
.leftCol{ width: 30%;  margin: 0 auto; display: inline-block;} 
.rightCol{ width: 70%; margin: 0 auto; display: inline-block; }

answered Mar 12 '16 at 05:43

Dhaval Patel

1,076
6
19

I didn't want percentages tho. All my attributes are in px, the combo will screw my layout up. – DASH Mar 12 '16 at 05:48
you can change it to px – Dhaval Patel Mar 12 '16 at 05:48

How to position a div to the center?

4 Answers4