Question

I have three span elements wrapped in a container. I want the first span to be twice as high as the other two and floated left. The other two should be immediate to the left of the first one. But on different lines so that they take up the same height vertically. I have tried a lot of different approaches, but am unable to get this to work. Does anyone have any idea of how I can achieve this?

<div id="wrapper>
  <span id="span1>text1</span>
  <span id="span2>text2</span>
  <span id="span3>text3</span>
</div>

Answer 1

Take a look at the example I’ve made for you

You need all inner spans to float left, than just control sizes:

div{width:200px;height:200px;border:solid 1px black}
#s1{float:left;background:red;width:50%;height:100%;}
#s2{float:left;background:green;width:50%;height:50%;}
#s3{float:left;background:yellow;width:50%;height:50%;}