CSS centered divs side by side

Question

I have this following chunk of my page.
Style:

.featuredcontainer {

width: 450px;
height: 700px;
margin-left: auto;
margin-right: auto;
position: relative;
right: 160px;
top: 30px;
border: 1px groove grey;
}



.navcontainer
{
margin-left: auto;
margin-right: -8px;
position: relative;
top: 75px;
height: 600px;
width: 300px;
}

And example HTML:

<div class="featuredcontainer">
content
</div>
<div class="lessonnavcontainer">
menu
</div>

When the page is displayed. the navcontainer is to the right of (as it should) but under the featuredcontainer. When I move the navcontainer up using relative positioning, it looks right, but there is a bunch of empty space at the bottom of the page. What do I do?

Now they're next to each other, but aren't moving with page resize and are in a messed up location. — Jaxkr, Jul 09 '12 at 18:04
delete all 'top' and 'right' and fit those two divs inside a parent div
#parent { width: 750px; margin: 0px auto 0px auto; } — Morgan Wilde, Jul 09 '12 at 18:08

score 1 · Answer 1 · answered Jul 09 '12 at 18:12

Put both the nav and the featured containers into another wrapper div.

HTML

<div class='wrapper'>
    <div class="navcontainer">
        menu
    </div>
    <div class="featuredcontainer">
        content
    </div>
</div>

And get rid of all the relative positioning. Relative positioning is not recommended for basic layout issues like this. Use floats instead. The wrapper should have a fixed width, which allows it to be centered properly with margin: 0 auto.

CSS

.wrapper{
    width:752px;
    margin: 0 auto;
    overflow:auto;
}
.featuredcontainer {
    width: 450px;
    height: 700px;
    float:left;
    border: 1px groove grey;
}
.navcontainer{
    float:left;
    height: 600px;
    width: 300px;
    background:#ff0;
}

JSFiddle http://jsfiddle.net/5w5SC/

Thanks. Here's my page. http://jaxtests.comule.com/ Notice that the menu on the right sticks to the right side of the screen? I need to preserve that, and just move it up to where the featuredcontainer is. If I move it up using positioning, it leaves a bunch of white space at the bottom of the page. — Jaxkr, Jul 09 '12 at 21:45

score 1 · Accepted Answer · answered Jul 09 '12 at 18:13

Surround your two divs with a "wrapper" div like so:

<div id="wrapper">
    <div class="featuredcontainer">content</div>
    <div class="lessonnavcontainer">menu</div>
</div>

Then to center them, add margins to the wrapper:

#wrapper { margin: 0px auto; }

Then to have the two divs be side by side, add a float:

.featuredcontainer { float: left; }
.lessonavcontainer { float: left; }

In order for the centering to work, you need to declare a width on the wrapper:

#wrapper { width: 800px; }

Using a wrapper div breaks the menu that sticks to the right side of the page. http://jaxtests.comule.com/ — Jaxkr, Jul 09 '12 at 21:47

score 0 · Answer 3 · answered Jul 09 '12 at 18:06

0

Use the float property. Using float, css can position divs next to each other horizontally.

.featuredcontainer {

width: 450px;
height: 700px;
margin-left: auto;
margin-right: auto;
position: relative;
right: 160px;
top: 30px;
border: 1px groove grey;
float: left;
}



.navcontainer
{
margin-left: auto;
margin-right: -8px;
position: relative;
top: 75px;
height: 600px;
width: 300px;
float: left;
}

Thats a starting point, try to use float left or float right and see what happens. Fiddle with it until it looks exactly how you want it.

answered Jul 09 '12 at 18:06

ryno

304
5
14

Thanks. But, when I apply that, they don't move as the page is resized. – Jaxkr Jul 09 '12 at 18:08
Thanks. Here's my page. http://jaxtests.comule.com/ Notice that the menu on the right sticks to the right side of the screen? I need to preserve that, and just move it up to where the featuredcontainer is, float breaks that. – Jaxkr Jul 09 '12 at 21:47
im confused by what you want the end product to look like. What do you want to have look different? – ryno Jul 09 '12 at 22:43

score 0 · Answer 4 · answered Jul 09 '12 at 18:12

0

To get them side-by-side you need to add the float attribute in the CSS. To get them to resize with page width you need to add relative widths to them. To center them on the page (horizontally) you need to put the divs inside a relative positioned div in the html. Here is a fiddle. http://jsfiddle.net/Ne5zs/

answered Jul 09 '12 at 18:12

smilebomb

5,123
8
49
81

Thanks. Here's my page. http://jaxtests.comule.com/ Notice that the menu on the right sticks to the right side of the screen? I need to preserve that, and using float breaks it. – Jaxkr Jul 09 '12 at 21:46
@Jaxkr You need right menu to stay on the right side of the screen or the right side of the containing wrapper div? – smilebomb Jul 10 '12 at 15:10

score 0 · Answer 5 · edited May 23 '17 at 10:34

0

Be sure to introduce a clearfix (there are many versions of this technique) on any floated object; then center their containing block element using margin: 0 auto.

edited May 23 '17 at 10:34

Community

1
1

answered Jul 09 '12 at 18:14

Igbanam

5,904
5
44
68

Thanks. Here's my page. http://jaxtests.comule.com/ Notice that the menu on the right sticks to the right side of the screen? I need to preserve that, and just move it up to where the featuredcontainer is. If I move it up using positioning, it leaves a bunch of white space at the bottom of the page. – Jaxkr Jul 09 '12 at 21:45

CSS centered divs side by side

5 Answers5