How to Align Two Divs Side by Side Using The Float, Clear, and Overflow Elements with a Fixed Position Div/

How to align two divs side by side using the float, clear, and overflow elements with a fixed position div/

This answer may have to be modified depending on what you were trying to achieve with position: fixed;. If all you want is two columns side by side then do the following:

http://jsfiddle.net/8weSA/1/

I floated both columns to the left.

Note: I added min-height to each column for illustrative purposes and I simplified your CSS.

body {  background-color: #444;  margin: 0;}
#wrapper {  width: 1005px;  margin: 0 auto;}
#leftcolumn,#rightcolumn {  border: 1px solid white;  float: left;  min-height: 450px;  color: white;}
#leftcolumn {  width: 250px;  background-color: #111;}
#rightcolumn {  width: 750px;  background-color: #777;}

<div id="wrapper">  <div id="leftcolumn">    Left  </div>  <div id="rightcolumn">    Right  </div></div>

Is it possible to align two DIVs side by side if one is fixed?

I tried to write this code and it is responsive too.

* {
    padding: 0px;
    margin: 0px;
}
#one {
    float: left;
    position: fixed;
    width: 25%;
    background: #666;
    height: 100%;
}
#two {
    box-sizing: border-box;
    padding: 20px;
    position: absolute;
    left: 25%;
    right: 0%;
    float: right;
    width: 75%;
    background: #333;
}

I hope this helps.

Aligning multiple divs side by side

.frontpageBoxLeft,.frontpageBoxRight {  border-radius: 5px;  border-color: lightgrey;  background: #ffffff;  height: 150px;}
.left-container {  float: left;  width: 750px;}
.frontpageBoxLeft {  margin-bottom: 15px;  width: 750px;  display: inline-block;  min-height: 100px;  float: right;  position: relative;  outline: 1px solid red;}
.frontpageBoxRight {  width: 540px;  float: right;  height: 300px;  position: relative;  vertical-align: top;  outline: 1px solid red;}
.frontpageBoxContainer {  width: 1300px;  height: 500px;  position: absolute;  top: 0;  bottom: 0;  left: 0;  right: 0;  margin: auto;}

<div class="frontpageBoxContainer"><p class="newsfeedheadline">NEWS FEED</p><hr class="hrstarter">  <div class="left-container">  <div class="frontpageBoxLeft" id="1">     et eksempel på en kasse1</div><div class="frontpageBoxLeft" id="2">     et eksempel på en kasse2</div><div class="frontpageBoxLeft" id="3">     et eksempel på en kasse3</div>  </div>
<div class="frontpageBoxRight">     et eksempel på en anden kasse</div></div>

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 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;
}

Two divs side by side (one is fixed position)

1. since you set a width:16% for the fixed element you should set the rest 84% width:84% to the right element.

2. Next set a max-width to the right element since the left element has a min-width I have set this to max-width: calc(100% - 170px)

3. Align the right element to the right by adding float: right.

I have made the left element translucent so you can see that there is no overlap.

Read and run the snippet below to understand it in detail.

P.S : I have made the left element translucent so you can see that there is no overlap.

Hope it helps

.left_fixed {
  position: fixed;
  width: 16%;
  top: 0px;
  bottom: 0px;
  left: 0px;
  background-color: #0412303f;
  z-index: 100;
  min-width: 170px;
}

.right_side {
  width: 84%;
  background-color: green;
  height: 100vh;
  float: right;
  max-width: calc(100% - 170px);
}

body {
  margin: 0px;
}

<div class="left_fixed">
  <h1>LEFT SIDE</h1>
</div>

<div class="right_side">
  <h1>RIGHT SIDE</h1>
</div>

how to display two divs side by side, left div with fixed position, right div having vertical scroll

    <div style="overflow:hidden;width:100%;">    <div  style="width:50%;height:100px;overflow:hidden;float:left;background-color:#009900;">  <ul>    <li>aaaaaa</li>    <li>bbbbbb</li>    <li>cccccc</li>    <li>dddddd</li>  </ul>      </div>    <div  style="width:50%;height:100px;overflow-x:hidden;overflow-y:scroll;float:right;background-color:#00CCFF;"  id="result">   It contains a big table <br>   It contains a big table <br>   It contains a big table <br>   It contains a big table <br>   It contains a big table <br>   It contains a big table <br>   It contains a big table <br>      </div>      </div>

Align div elements side by side

Apply float:left; to both of your divs should make them stand side by side.

How to place div side by side

There are many ways to do what you're asking for:

1. Using CSS float property:

 <div style="width: 100%; overflow: hidden;">
     <div style="width: 600px; float: left;"> Left </div>
     <div style="margin-left: 620px;"> Right </div>
</div>

Two divs side by side - Fluid display

Using this CSS for my current site. It works perfect!

#sides{
margin:0;
}
#left{
float:left;
width:75%;
overflow:hidden;
}
#right{
float:left;
width:25%;
overflow:hidden;
} 

how to put two divs side by side in css?

HTML:

    <div id="wrapper">
        <div id="leftcolumn">
            Left
        </div>
        <div id="rightcolumn">
            Right
        </div>
    </div>

CSS:

    body {
        background-color: #444;
        margin: 0;
    }    
    #wrapper {
         width: 1005px;
         margin: 0 auto;
    }
    #leftcolumn, #rightcolumn {
        border: 1px solid white;
        float: left;
        min-height: 450px;
        color: white;
    }
    #leftcolumn {
         width: 250px;
         background-color: #111;
    }
    #rightcolumn {
         width: 750px;
         background-color: #777;
    }

---

Related Topics