CODEWITHSUNDEEP
htmlcss
Cameron Guthrie
Cameron Guthrie

Reputation: 141

CSS float property to align div's

I'm having some serious trouble getting things to float left correctly, or rather getting elements to float "true" left.

This is my current output:

current (broken) output

and this is what I am hoping to achieve:

ideal output

here is a jsfiddle, any help would be greatly appreciated. :)

html:

            <div id="content">

                <div class="box1">
                    1
                </div>
                <div class="box2">
                    2
                </div>
                <div class="box1">
                    3
                </div>
                <div class="box1">
                    4
                </div>
                <div class="box1">
                    5
                </div>

            </div>

css:

html, body {
    margin: 0px;
    padding: 0px;
}

a {
    text-decoration: none;
}

#content {
    margin: 20px 0px 0px 20px;
    width:180px;
    background-color: green;
    overflow: auto;
    padding-left: 10px;
}

.box1 {
    margin: 10px 10px 0px 0px;
    background-color: red;
    position: relative;
    float: left;
    height: 50px;
    width: 50px;
}

.box2 {
    margin: 10px 10px 0px 0px;
    background-color: blue;
    position: relative;
    float: left;
    height: 110px;
    width: 50px;
}

Oh and just a little note, I'd prefer to accomplish this without using javascript but am happy to use it as a last resort.

Upvotes: 1

Views: 140

Answers (4)

akshaymanerikar
akshaymanerikar

Reputation: 27

i have found answer to what you are looking for.... just see this fiddle i have edited...

.box4 {
margin: 10px 10px 0px 0px;
background-color: red;
position: relative;
float:left;
height: 50px;
width: 50px;
margin-top:-50px;
margin-left:3px;

}

http://jsfiddle.net/fWK2A/6/embedded/result/

Upvotes: 0

ivillamil
ivillamil

Reputation: 108

I think this can't be done with only css at the moment, maybe in some short future, but there is a lot of javascript solutions to this and making some research i found Masonry, wich i think is the most popular. You should try it.

Upvotes: 1

vishalkin
vishalkin

Reputation: 1235

I got something similar to what you want

Fiddle

.box5 {
    margin: 10px 10px 0px 0px;
    background-color: red;
    position:absolute;
    float: right;
    height: 50px;
    width: 50px;
    float:left;
    left:150px;
    top:80px;
}

Upvotes: 2

laymanje
laymanje

Reputation: 833

Floats are not capable of the layout you are looking for. You need something more the columns.

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_multi-column_layouts

But you have to be careful of the cross browser and they are not great at percentage widths either (from experience).

Upvotes: 3

Related Questions