Aligning two divs side-by-side

Question

I have a small problem. I am trying to align two divs side by side using CSS, however, I would like the center div to be positioned horizontally central in the page, I achieved this by using:

#page-wrap { margin 0 auto; }

That's worked fine. The second div I would like positioned to the left side of the central page wrap but I can't manage to do this using floats although I'm sure it is possible.

I would like to push the red div up alongside the white div.

Here is my current CSS concerning these two divs, sidebar being the red div and page-wrap being the white div:

#sidebar {
    width: 200px;
    height: 400px;
    background: red;
    float: left;
}

#page-wrap {
    margin: 0 auto;
    width: 600px;
    background: #ffffff;
    height: 400px;
}

This got closed as a duplicate even though the "original" is from 2011? — , Aug 22 '20 at 00:35

Nick Craver · Accepted Answer · 2010-04-26T21:27:29.907

83

If you wrapped your divs, like this:

<div id="main">
  <div id="sidebar"></div>
  <div id="page-wrap"></div>
</div>

You could use this styling:

#main { 
    width: 800px;
    margin: 0 auto;
}
#sidebar    {
    width: 200px;
    height: 400px;
    background: red;
    float: left;
}

#page-wrap  {
    width: 600px;
    background: #ffffff;
    height: 400px;
    margin-left: 200px;
}

This is a slightly different look though, so I'm not sure it's what you're after. This would center all 800px as a unit, not the 600px centered with the 200px on the left side. The basic approach is your sidebar floats left, but inside the main div, and the #page-wrap has the width of your sidebar as it's left margin to move that far over.

Update based on comments: For this off-centered look, you can do this:

<div id="page-wrap">
  <div id="sidebar"></div>
</div>

With this styling:

#sidebar    {
    position: absolute;
    left: -200px;
    width: 200px;
    height: 400px;
    background: red;    
}

#page-wrap  {
    position: relative;
    width: 600px;
    background: #ffffff;
    height: 400px;
    margin: 0 auto;
}

edited Apr 26 '10 at 21:27

answered Apr 26 '10 at 21:21

Nick Craver

623,446
136
1,297
1,155

Wouldn't this center everything? I want the white div to remain centered and the nav bar to be pushed alongside it. Sorry, didn't explain that well in the original question. – Ronnie Apr 26 '10 at 21:23
Sorry, didn't see the last paragraph you wrote. Yes, I would like to center just the white div and push the red div alongside it. I would do this by using a negative margin then? – Ronnie Apr 26 '10 at 21:28
@Ronnie - Added that option as well, this just positions the sidebar to the left 200px to match it's width, making the parent container `relative` and the sidebar itself `absolute` is what allows this to occur. – Nick Craver Apr 26 '10 at 21:29
@Ronnie - Yep, you can see a working example of the above here: http://jsfiddle.net/jjRyD/ – Nick Craver Apr 26 '10 at 21:30
the sidebar starts to disappear if the window is smaller than 1000px (600px + 200px for each side), but the content uses only 600px+200px. Is it possible to make it not be centered anymore when the window is between 800px and 1000px? Something like a minimum value for the left margin... – dbarbosa Oct 04 '10 at 19:12
I got it from buildinternet.com/2009/10/purely-css-faking-minimum-margins (alternate method): Put everything inside a `
` and then use: `#wrapper{ text-align:center; padding:0 200px; }`. However, this seems to work only for a minimum left margin... I want to have the sidebar on right.
– dbarbosa Oct 04 '10 at 19:27
For any other CSS noobs out there who skimmed the docs too quickly, the float div must come first in the html... – iforce2d Feb 10 '12 at 14:23
Hi if i don't give these two float divs any width (which i needed for many reasons) then what happens is that if right div content is long which exceeds main div's width then right div content goes down of left div so in that case these two divs are not side by side. So plz help what to do. – dev-m Nov 29 '17 at 16:16

score 20 · Answer 2 · answered Aug 30 '13 at 11:51

I don't understand why Nick is using margin-left: 200px; instead off floating the other div to the left or right, I've just tweaked his markup, you can use float for both elements instead of using margin-left.

Demo

#main {
    margin: auto;
    width: 400px;
}

#sidebar    {
    width: 100px;
    min-height: 400px;
    background: red;
    float: left;
}

#page-wrap  {
    width: 300px;
    background: #0f0;
    min-height: 400px;
    float: left;
}

.clear:after {
    clear: both;
    display: table;
    content: "";
}

Also, I've used .clear:after which am calling on the parent element, just to self clear the parent.

score 12 · Answer 3 · answered Mar 18 '14 at 07:22

This Can be Done by Style Property.

<!DOCTYPE html>
<html>
<head>
<style> 
#main {

  display: flex;
}

#main div {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 40px;
}
</style>
</head>
<body>

<div id="main">
  <div style="background-color:coral;">Red DIV</div>
  <div style="background-color:lightblue;" id="myBlueDiv">Blue DIV</div>
</div>

</body>
</html>

Its Result will be :

enter image description here

Enjoy... Please Note: This works in Higher version of CSS (>3.0).

score 4 · Answer 4 · answered Dec 17 '16 at 12:54

The HTML code is for three div align side by side and can be used for two also by some changes

<div id="wrapper">
  <div id="first">first</div>
  <div id="second">second</div>
  <div id="third">third</div>
</div>

The CSS will be

#wrapper {
  display:table;
  width:100%;
}
#row {
  display:table-row;
}
#first {
  display:table-cell;
  background-color:red;
  width:33%;
}
#second {
  display:table-cell;
  background-color:blue;
  width:33%;
}
#third {
  display:table-cell;
  background-color:#bada55;
  width:34%;
}

This code will workup towards responsive layout as it will resize the

<div>

according to device width. Even one can silent anyone

<div>

as

<!--<div id="third">third</div> -->

and can use rest two for two

<div>

side by side.

thx that helped, and easily made responsive with @media screen and (max-width: NNNpx) {div#fist{display:table-row;width:100%;}etc} — Boris Gafurov, Dec 06 '19 at 04:01

score 2 · Answer 5 · answered Apr 26 '10 at 21:54

It's also possible to to do this without the wrapper - div#main. You can center the #page-wrap using the margin: 0 auto; method and then use the left:-n; method to position the #sidebar and adding the width of #page-wrap.

body { background: black; }
#sidebar    {
    position: absolute;
    left: 50%;
    width: 200px;
    height: 400px;
    background: red;
    margin-left: -230px;
    }

#page-wrap  {
    width: 60px;
    background: #fff;
    height: 400px;
    margin: 0 auto;
    }

However, the sidebar would disappear beyond the browser viewport if the window was smaller than the content.

Nick's second answer is best though, because it's also more maintainable as you don't have to adjust #sidebar if you want to resize #page-wrap.

score 1 · Answer 6 · edited May 30 '13 at 07:46

1

The easiest method would be to wrap them both in a container div and apply margin: 0 auto; to the container. This will center both the #page-wrap and the #sidebar divs on the page. However, if you want that off-center look, you could then shift the container 200px to the left, to account for the width of the #sidebar div.

edited May 30 '13 at 07:46

Chetan Paliwal

1,620
2
15
24

answered Apr 26 '10 at 21:20

Michael Herold

1,292
1
13
22

This sounds like a plan. How would I shift the whole container left by 200px? Thanks for the quick reply. – Ronnie Apr 26 '10 at 21:25

Aligning two divs side-by-side

6 Answers6

Linked