1

I'm trying to do a layout with two top divs, and one below them. See here:

<div style="width: 49%; float: left; border: 1px solid">
    <label>blabla</label>
</div>
<div style="width: 49%; float: left; border: 1px solid">
     <label>blabla</label>
     <br/>
     <label>blabla</label>
</div>
<div style="width: 100%; float: left; border: 1px solid">
     <label>blabla</label>
     <label>blabla</label>
</div>

http://jsfiddle.net/DAYaM/

Problem is I would like the top left div (or right one) to resize to the same dimension as the other one, even if the number of elements are different. So basically to scale to the biggest one. Any suggestions?

Regards, Bogdan

Bogdan
  • 8,017
  • 6
  • 48
  • 64
  • 1
    Duplicate of http://stackoverflow.com/questions/2997767/how-do-i-keep-two-divs-that-are-side-by-side-the-same-height – Aaron May 23 '13 at 21:45
  • I answered something similar here http://stackoverflow.com/questions/16545531/auto-stretching-vertical-columns-divs/16545816#16545816 – Fico May 23 '13 at 22:13

1 Answers1

0

Here you go

I wrapped everything into a section, gave it a fixed width, and gave the first two div a width of 100%.

I also converted your inline styling to external, because inline is depreciated in HTML5.

Also, there is no need to use 49% for your width. If you add box-sizing:border-box, then everything will fit like you want it to.

Cody Guldner
  • 2,888
  • 1
  • 25
  • 36
  • I wasn't aware that inline styles were depreciated and can't find anything on Google to show that they were... – apaul May 23 '13 at 23:50