CODEWITHSUNDEEP
csshtmlcss-float
Wildcard27
Wildcard27

Reputation: 1459

Struggling to align divs in CSS

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!

Upvotes: 0

Views: 82

Answers (3)

Marcel
Marcel

Reputation: 1288

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.

Upvotes: 2

Kirk
Kirk

Reputation: 5077

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;
}

Upvotes: 0

Hessius
Hessius

Reputation: 1394

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)

Upvotes: 0

Related Questions