Apologies for not including a picture. You can view the design I am trying to achieve here.
I am attempting to create two boxes with a third box below them, and another box on the right side of the layout. All enclosed within a larger container. Everything is working well except for the last box (under3) that I can't seem to get to float to the right. Can someone with more expertise explain what I might be missing? Thank you!
Sincerely, Regin
Here is my HTML code snippet:
<div id="boks1a">
<div class="mini1">test1
</div>
<div class="mini2">test2
</div>
<div class="under1">Testing
</div>
</div>
<div class="under3">test3
</div>
</div>
</body>
And this is my CSS code:
#boks1a_ydre {
border: 10px red solid;
width: 90%;
}
#boks1a {
border: 4px blue solid;
width: 80%;
}
#boks1a .mini1 {
width: 50%;
height: 200px;
float: left;
outline: 1px red solid;
}
#boks1a .mini2 {
width: 50%;
height: 200px;
float: left;
outline: 1px green solid;
}
#boks1a .under1 {
clear: both;
margin-top: 5px;
width: 100%;
outline: 1px blue solid;
}
#boks1a .under3 {
float:right;
margin-top: 5px;
width: 100%;
outline: 1px blue solid;
}
#boks1a_ydre .mini3 {
width: 100px;
height: 200px;
float: right;
outline: 10px black solid;
}