css – Aligning two divs side-by-side

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 Im not sure its what youre 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 its 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;
}

I dont understand why Nick is using margin-left: 200px; instead off floating the other div to the left or right, Ive 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, Ive used .clear:after which am calling on the parent element, just to self clear the parent.

css – Aligning two divs side-by-side

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

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

css – Aligning two divs side-by-side

css – Aligning two divs side-by-side

Leave a Reply Cancel reply