CODEWITHSUNDEEP
htmlcsscontainers
ohmygoddess
ohmygoddess

Reputation: 657

two floating div inside a container

I try to define two div side by side. The left is div content, the right is div sidebar. These two divs are inside the container div. I tried several different ways, but none of them works. Here is my code for css:

#container {
   width:1000px;
   position: relative;
}



#content {
    width:700px;
    background-color: white;
    border-top: 3px solid midnightblue;
    padding: 80px 10px 0px 10px;
    float:left;
}

#sidebar{
    border-top: 3px solid midnightblue;
    background-color:#E0E0E0;
    padding: 20px;
    width: 250px;
    float:left;
}

The code for html looks like:

 <div id="container">

<div id="content">
    <p> This is my blog website. </p>
</div>

<div id="sidebar">
   <p>This is the sidebar. </p>
</div> 

</div>

I also tried change "float:left" to "float:right" in the sidebar, and I also added: "display:table;" in the container. But it didn't work either. The sidebar is alway below the content region, it's not show in the rightside of the content div.

In the most outside, there is a wrapper class. If I removed wrapper class and the container, then it will work. But I need the wrapper class. Any suggestions? Thank you!

Upvotes: 0

Views: 309

Answers (5)

rajesh
rajesh

Reputation: 1485

Set your width and height of the container div and adjust your both content and sidebar div width respectively. Check out the below fiddle link it will work,

#container {
   width:450px;
    height:400px;
   position: relative;
   border: 3px solid midnightblue;
}



#content {
    width:200px;
    background-color: white;
    border: 3px solid midnightblue;
    padding: 80px 10px 0px 10px;
    float:left;
}

#sidebar{
    border: 3px solid midnightblue;
    background-color:#E0E0E0;
    padding: 20px;
    width: 100px;
    float:left;
}

http://jsfiddle.net/w5dmzoqj/

Upvotes: 0

vas
vas

Reputation: 960

As per your CSS

 #container width = 1000px

 #content width   =  720px (700px + 10px + 10px left and right padding ) 

 #sidebar width   =  290px (250px + 20px + 20px left and right padding )

    Total width   =  1010px (since the total width exceeds your #container width, the #sidebar was not able to position itself properly as per css applied)

checkout the working code here (jsfiddle)

Upvotes: 0

shanidkv
shanidkv

Reputation: 1103

Make box-sizing: border-box. Know more about box-sizing

Just add below code in CSS.

* { 
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box;         /* Opera/IE 8+ */
}

JSFIDDLE DEMO

Upvotes: 2

Kyle Coventry
Kyle Coventry

Reputation: 555

The issue pertains to the div padding. Reduce the width of the content div: width:680px; and it will display properly as shown here:

http://jsfiddle.net/k8ggmctq/

Upvotes: 2

kleinohad
kleinohad

Reputation: 5912

The problem you are having is that the total width is bigger then the container's width. Look at this: http://jsfiddle.net/kez5c71m/ I have change the padding of the #sidebar from 20 to 10

#container {
   width:1000px;
   position: relative;
}



    #content {
        width:700px;
        background-color: white;
        border-top: 3px solid midnightblue;
        padding: 80px 10px 0px 10px;
        float:left;
    }

    #sidebar{
        border-top: 3px solid midnightblue;
        background-color:#E0E0E0;
        padding: 10px;
        width: 250px;
        float:left;
    }

Upvotes: 1

Related Questions