CSS divs floating - move div

Question

please, could you help me with floating divs? I have this html structure for the divs: http://pastebin.com/sBLbfTv1 and I want to move div with button under div with categories... as it is on the image.

Screenshot:

Here is css file: http://pastebin.com/CC4umrgH

Please, help. Thank you!

Answer 1

Here's a DEMO of the structure you want.

HTML:

<div class="cont">
    <div class="c1">
    </div>
    <div class="c2">
    </div>
</div>
<div class="cont">
    <div class="c3">
    </div>
    <div class="c4">
    </div>
</div>

CSS:

.cont{
    float: left;
}
.c1{
    background-color: red;
    height: 100px;
    width: 100px;
}
.c2{
    background-color: green;
    height: 100px;
    width: 100px;
}
.c3{
    background-color: blue;
    height: 50px;
    width: 100px;
}
.c4{
    background-color: black;
    height: 20px;
    width: 100px;
}

Another option is setting the position of the right-bottom div to absolute:

position: absolute;
top: 100px;
right: 0px;

Your HTML code with new CSS

I'm assuming that your top-right div height is fixed (100px in the example). But it's bad practice, you should avoid it and find a way to control your HTML structure.

Answer 2

You can do it with two divs that will work as columns floated. Then just put in each column what you want:

<form>
    <div class="leftColumn">
        <div class="fieldsetMain main"></div>
        <div class="fieldstMain minor"></div>
    </div>
    <div class="rightColumn">
        <div class="fieldsetMain main"></div>
        <div class="fieldstMain minor"></div>
    </div>
</form>

And the CSS has to be:

.leftColumn { float: left; width: 80%; }
.rightColumn { float: left; width: 20%; }
.leftColumn fielsetMain, .rightColumnfieldsetMain { position: relative; }