CODEWITHSUNDEEP
htmlcss
Michael Owen
Michael Owen

Reputation: 375

2 stacked divs next to 1 div

I am trying to create 1 div that has 2 stacked divs next to it on the right hand side. I have managed to write the following code but i am not able to align the green box to be underneath the red box and at present this seems to be falling outside the required area.

My HTML:

<div id="blue"></div>
<div id="red"></div>
<div id="green"></div>

My CSS:

blue {
width: 100px;
height: 100px;
background: blue;
float: left;
position: relative;
} 

#red {
width: 100px;
height: 50px;
background: red;
float:right;
}

#green {
width: 100px;
height: 50px;
background: green;

float: right;
clear: both;
}

Would really appreciate if somebody could please advise on how i could fix this.

Thanks in advance.

Upvotes: 0

Views: 39

Answers (2)

James Oh
James Oh

Reputation: 1

Michael, Maybe this is what you're looking for?

.wrapper {
  width: 200px;
}

#blue {
width: 100px;
height: 100px;
background: blue;
float: left;
} 

#red {
width: 100px;
height: 50px;
background: red;
float: left;
}

#green {
width: 100px;
height: 50px;
background: green;
float: left;
}
<div class="wrapper">
  <div id="blue"></div>
  <div id="red"></div>
  <div id="green"></div>
</div>

Upvotes: 0

BurningLights
BurningLights

Reputation: 2397

For #green, change clear: both; to clear: right;. And voila! See this fiddle: http://jsfiddle.net/ru1vpox8/.

The problem was that clearing both moved it to be positioned down below both the red and blue divs. But, changing it to be cleared only on the right allows it to still be on the same level as the blue div, but forces it to be down below the level of the red div.

Upvotes: 1

Related Questions