Struggling to align divs in CSS - css

Question

I have the following code shown in this fiddle.
For the life of me I cannot get them to align the way I want them to. It is pretty easy to see where each div should be by looking at the code but here is some more help:
| topLeft | topRight | |
----------------------------------| right |
| bottomLeft | bottomRight | |
Please help me with this!

Answer 1

Ex 1. swapping the right positions in front of the left: http://jsfiddle.net/pTDEX/1/
html:
<div class="top">
<div class="topRight">
topRight
</div>
<div class="topLeft">
topLeft
</div>
</div>
A box floating right after a left floating box will be positioned below the box and then right.
Or ex 2. swapping the float: right for float:left: http://jsfiddle.net/pTDEX/3/
.topLeft {
background: green;
float: left;
width: 300px;
height: 80px;
}
.topRight {
background: gray;
float: left;
width: 100px;
height: 80px;
}
It'll float the right boxes left against the left boxes.
There are more possibilities but it's all about understanding what float does, play with it!
On a side-note, you can safely ditch display: inline when specifying fixed blocks.

Answer 2

I used absolute positioning on the subelements and relative positioning on your container, this is easy as long as you know the dimensions of your elements (in px or %)
.container {
background: cyan;
margin: 0 auto;
width: 500px;
height: 100px;
position:relative;
}
.top {
background: purple;
position:absolute;
top:0;
left:0;
width: 400px;
height: 80px;
}
.topLeft {
background: green;
display: inline;
width: 300px;
height: 80px;
position:absolute;
top:0;
left:0;
}
.topRight {
background: gray;
display: inline;
float: right;
width: 100px;
height: 80px;
position:absolute;
top:0;
left:300px;
}
.bottom {
background: black;
display: inline;
width: 400px;
height: 20px;
position:absolute;
top:80px;
left:0;
}
.BottomLeft {
background: blue;
display: inline;
width: 300px;
height: 20px;
position:absolute;
top:0;
left:0;
}
.bottomRight {
background: red;
display: inline;
width: 100px;
height: 20px;
position:absolute;
top:0;
right:0;
}
.right {
background: yellow;
display: inline;
float: right;
width: 100px;
height: 100px;
position:absolute;
top:0;
left:400px;
}
Check out the updated fiddle:
http://jsfiddle.net/pTDEX/2/
(Note that the position relative attribute on the container is just so that a) absolutely positioned elements within it will position relative to the container. b) it respects your margin 0 auto; (which it wouldn't if you gave it position:absolute)

Answer 3

You main problem in your html code, just an order of div tag Right
<div class="container">
<div class="right">right</div> <!-- replaced top with right -->
<!-- your mistake was fixed here -->
<div class="top'">
<div class="topRight">topRight</div>
<div class="topLeft">topLeft</div>
</div>
<div class="bottom">
<div class="bottomRight">bottomRight</div>
<div class="bottomLeft">BottomLeft</div>
</div>
</div>
Your Css style
//Css Style
.container {
background: cyan;
margin: 0 auto;
width: 500px;
height: 100px;
}
.top {
background: purple;
float: left;
width: 400px;
height: 80px;
}
.topLeft {
background: green;
display: inline;
float: left;
width: 300px;
height: 80px;
}
.topRight {
background: gray;
display: inline;
float: right;
width: 100px;
height: 80px;
}
.bottom {
background: black;
display: inline;
float: left;
width: 400px;
height: 20px;
}
.BottomLeft {
background: blue;
display: inline;
float: left;
width: 300px;
height: 20px;
}
.bottomRight {
background: red;
display: inline;
float: right;
width: 100px;
height: 20px;
}
.right {
background: yellow;
display: inline;
float: right;
width: 100px;
height: 100px;
}