CSS Problem to Make 2 Divs Float Side by Side

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

Placing two DIVs side by side, float:left or right

Place these styles in your CSS

#logo {
    float: left;
    margin: 0 0 25px;
    position: relative;
    width: 20%;
}

#logo h1 {
    color: #555555;
    display: inline-block;
    font-family: "Terminal Dosis",Arial,Helvetica,Geneva,sans-serif;
    font-size: 25px;
    font-weight: 200;
    margin-bottom: 0.2em;
}

#menu {
   float: left;
   width: 80%;
}

.stuart_menu {
  overflow:auto;
}

I guess thats it.

CSS Problem to make 2 divs float side by side

You need to float, inline or position:absolute those inner divs if you want them side-by-side. A "normal" div is a block object which forces following content to appear below it.

Not able to arrange two divs side by side

You can use box-sizing to solve the issue rather than calculating the width and border widths:

Add box-sizing: border-box to the inner containers and box-sizing: content-box to the outer container and there you go!

* {  margin: 0;  padding: 0;  box-sizing: border-box;}.page_layout {  position: fixed;  top: 50px;  width: 100%;  height: 100%;  border: 1px solid green;}.page_container {  width: 800px;  height: 100%;  margin: 0 auto;  clear: both;  border: 1px solid blue;  box-sizing: content-box;} .contacts_box {  float: left;  height: 100%;  width: 300px;  border: 1px dashed magenta;} .message_box {  float: right;  height: 100%;  width: 500px;  border: 1px dashed lemonchiffon;}

<body>  <div class="page_layout">    <div class="page_container">      <div class="contacts_box">        CONTACTS BOX      </div>
      <div class="message_box">        <div class="message_displayBox">          Message Box        </div>
        <div class="message_textBox">        </div>
      </div>    </div>  </div>
</body>

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>

Problem with 2 Divs appearing side-by-side

The problem is if you add up all the margins (left and right) and the widths, you are more than the outer wrap of 800px. try this.

#mid-featureleft
{
background-color:Purple;
height:330px;
width: 300px;
float: left;
}
#mid-featureright
{
height:330px;
width:205px;
background: red;
float:left;
}

Also don't forget to clear the float after the inner divs

.clear{
  clear: both;
}

How to place div side by side

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

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>

How to make two divs appear side by side using CSS not tables?

You just need to add float left to your first div and it will work!

how to make two divs, float side by side, resize responsively over a range, and the second drops down as needed

You should use @media css queries to make it responsive.

This link: http://css-tricks.com/logic-in-media-queries/ may help to explain @media queries.

What you want to do is make each 100% width at mobile size.