Placing two divs side by side and one to stretch to take up the space

Question

I'm trying to accomplish layout below with divs. My current code doesn't work well. How can I do It?

Thanks

Current code: jsfiddle

enter image description here

Actual items in my code are :

#body_block
{
    background-color: #B8B8B8;
}
#body
{
    background-color: #BFBFBF;
}
#body_left
{
    float: left;
    margin-right: 50px;
    background-color: #FFE0F8;
}
#body_right
{
    background-color: #E1FFE0;
}

score 0 · Answer 1 · answered Nov 08 '13 at 10:01

0

on you

#body_right
{  
    float:left;
    background-color: #E1FFE0;
}

you also need to add the float left setting, then on your footer_block you need to then add a clear: both;

   #footer_block
  {
       clear:both;
   background-color: #B3B3B3;
 }

should help you start

answered Nov 08 '13 at 10:01

Simon Davies

3,668
9
41
69

1. Background of body block is gone white. 2. `#body_right` won't stretch to fit in the space on the right. – BentCoder Nov 08 '13 at 10:05
add a height: 100%; to the body_block should work as tested locally if you look @BFDatabaseAdmin it ssome wwhat better as here reconstructed your code and thats what i would have done but not enough time – Simon Davies Nov 08 '13 at 10:18

score 0 · Answer 2 · answered Nov 08 '13 at 10:22

1,use absolute like this http://jsfiddle.net/yujiangshui/uz9NF/7/

2,use jquery , when $(window).load() give low height div the other div's height

3,use the follow code:

<div class="out">
  <div class="div1">
    div1
  </div>
  <div class="div2">
    div2
  </div>
</div>

and css:

.out{overflow:hidden; width:650px; margin:0 auto;}
.div1{padding-bottom: 5000px; margin-bottom: -5000px; width:490px; background:#ff1; float:left; margin-right:10px;height:400px;}
.div2{padding-bottom: 5000px; margin-bottom: -5000px; width:150px; background:#ccc; float:left;height:800px;}

4,use <table>

Althought my English is poor, but hope my answer can give you some help!

score 0 · Answer 3 · answered Nov 08 '13 at 10:30

you also add the position property of the css

I mean position: relative; to the outer division inside which the two left and right divisions are present.

then use the same float: left and float: right to the left and right container respectively.

I think this will work.

BentCoder · Accepted Answer · 2013-11-08T11:11:25.377

0

Solved I've wrapped both divs with <section>

Thanks

/*** BODY-MYACCOUNT *************************/
section { display: table; width: 100%;}
section div { display: table-cell; border: 1px solid #000; }
#body_left
{
    background-color: #FFE0F8;margin-right: 50px;
}
#body_right
{
    background-color: #E1FFE0;width: 100%;
}

edited Nov 08 '13 at 11:11

answered Nov 08 '13 at 10:51

BentCoder

12,257
22
93
165

It's actually using the "display: table" that's made it work rather than the section wrapper. You could have also used that on your div. – Sinister Beard Nov 08 '13 at 14:22

Placing two divs side by side and one to stretch to take up the space

4 Answers4