'HTML and CSS: 2 DIVS on left, 1 independent DIV on right

I didn't find an answer for this specific case of mine, so I decided to ask a new question. I want to have 2 DIVs on the left side of the page (with a fixed width) and a single DIV on the right side, occupying the rest of the page width. Also the single DIV on the right should have its independent height (when its height is increased it shouldn't affect the height or position of the DIVs on the left). Something like this is what I want:

Divs

This is the HTML code:

<body>
    <div class="div1">Div1</div>
    <div class="div3">Div3</div>
    <div class="div2">Div2</div>
</body>

This is the CSS I have right now:

div.div1 {
    float: left;
    height: 400px;
    margin-right: 10px;
    width: 200px;
}

div.div3 {
    height: 425px;
    overflow: hidden;
}

div.div2 {
    clear: left;
    float: left;
    height: 15px;
    margin-top: 10px;
}

The only problem is that Div2 top position is affected by the height of Div3 and I get something like this: Wrong DIVs

csshtmlpositioncss-float


Solution 1:[1]

Try this:

<html>
<head>
<style>
    div.div1 {
        float: left;
        height: 400px;
        margin-right: 10px;
        width: 200px;
        background-color: blue;
    }
    div.div2 {
        clear: left;
        float: left;
        height: 15px;
        width: 200px;
        margin-top: 10px;
        background-color: red;
    }    
    div.div3 {
        height: 425px;
        overflow: hidden;
        background-color: green;
    }
</style>
</head>
<body>
    <div class="div1">Div1</div>
    <div class="div2">Div2</div>
    <div class="div3">Div3</div>
</body>
</html>

Once I re-ordered the Divs and added a width for Div 2 it works fine

https://jsfiddle.net/6g7qx26b/

This also works if you replace the css height properties with min-height properties, allowing for greater flexibility. Widths may also be specified in percentages

Solution 2:[2]

Check it on http://jsfiddle.net/cz2fP/

<div style="float:left;">
    <div class="div1">Div1</div>
    <div class="div2">Div2</div>
</div>
<div class="div3">Div3</div>

Grouping the left div element by another div element.

Solution 3:[3]

div.div1 {
height: 400px;
margin-right: 10px;
width: 200px;
background: red;
float: left;
}
div.div3 {
height: 15px;
margin-top: 10px;
margin-right: 10px;
background: green;
clear: both;
width: 200px;

}
div.div2 {
   height: 425px;
overflow: hidden;
background: blue;
float: left;
width: 200px;
}

<div style="float:left;">
    <div class="div1">Div1</div>
    <div class="div2">Div2</div>
</div>

<div class="div3">Div3</div>

And see this link http://jsfiddle.net/bipin_kumar/cz2fP/3/

Solution 4:[4]

<style>
    div.left{
        float: left;
    }

    .main{
        width : 100%;
    }

   .clear{
        clear : both;
   }

    div.div1, div.div2 {
      margin-right: 10px;
      width: 200px;
      background: red;
   }

   div.div1 {
      height: 400px;
   }
</style>

<body>
    <div class="main">
        <div class="left">
            <div class="div1">Div1</div>
            <div class="div2">Div2</div>
        </div>  
        <div class="div3">Div3</div>
        <div class="clear"></div>
    </div>
</body>

http://jsfiddle.net/rkpatel/qd6Af/1/

Solution 5:[5]

I needed something similar, just mirrored (1 div left, 2 divs right) and I couldn't work it out. A few Google searches later, I found a website which easily allows you to create a grid, assign number of rows/columns to differently named divs and it even gives you the HTML/CSS code to just copy and paste it. I didn't know about this and wasted a good hour on trying various other ways, so if you didn't know about this website yet, here it is.

Sorry for replying to such an old thread, I just want to help people.

Solution 6:[6]

Try this

<body>
    <div class="left">
    <div class="div1">Div1</div>
    <div class="div2">Div2</div>
    </div>
    <div class="div3">Div3</div>

</body>

DEMO

Solution 7:[7]

  <div class="main">
    <div class="div1">
     <div class="div2"></div>
     <div class=="div3"></div>
    </div>
    <div class="div4"></div>
   </div>

and in css use min-height property

.div1 {
 float:left;
}
.div4 {
float:right;
}
.main {
min-height:200px;
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 chim
Solution 2 Tom Chung
Solution 3
Solution 4
Solution 5 Puntherline
Solution 6 Sridhar R
Solution 7 Praveen M P

Related Questions