Align div elements side by side using floats

Question

I am mainly a backend developer but am trying to get a layout to come out right. Basically I am creating a list view page that will contain a div tag on the left that has a bunch of filters (drop down lists, checkboxes, etc). On the right side of the screen I am going to have a div tag that contains a grid. This seems to be working but looks terrible when I'm on an overhead or when my screen is not maxed. Am I doing this right? Basically here is what I am after:

The CSS I had done for this was as simple as this:

.filterContainer {
    width:20%; 
    float:left;
}


.gridContainer {
    width:79%; 
    float:right;
}

Basically .filterContainer is my left div (dLeft) and .gridContainer is my right div (dRight). Is this valid for what I am trying to achieve? The result is as shown here:

http://i.imgur.com/WFasMF1.png

However, if I resize my window I end up with the following result:

http://i.imgur.com/4u9HRlK.png

Which I guess is normal because I'm resizing, but is my css valid?

Answer 1

You can use Frameset for dividing your pages into frames and then add css to it for style.

Answer 2

Maybe you can use position:absolute?

Or just use table tag for what it was designed? It is not like W3C plans to discard that tag in near future.

That is not a normal behavoir of floated blocks, since they placed before any normal block and not use normal parent container context.

Answer 3

if you make the left container fixed width that will help. and you can always wrap both those divs in another div where you set a max-width if you'd like.

Answer 4

First of all when you are dealing with Grid Based layouts, always make sure you use

* {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;

   /* Resets */
   margin: 0;
   padding: 0;
}

Note: * is nothing but a universal selector which will apply the defined properties to every element. Inorder to target specific elements, use more specific selectors like div.class_name etc

Now, why you need that?

If you see in the diagram below..

CSS adds margin, padding and border outside the box and not inside, which is default content box behavior, so when you use the snippet I shared, it changes the box model behavior and makes the element count the border and padding inside the element.

---

Coming to your issue, the CSS you provided is perfect, but position, float, or margin or even uncleared floating elements anything can cause the issue which you are facing, so if you can, consider altering your CSS stylesheet, and would be worth if you use box-sizing: border-box;

---

How do you achieve this?

Well, obviously, I won't provide you entire thing, but just a general idea of how to achieve this, as I see you are using width: 79%; now that's the very strong reason of why I suggested you to alter the box model.

Now here, I have two elements floated to the left, with the box model altered, so I don't have to use -1% width for any of the element. When you need spacing, nest more blocks inside the grid and then, instead of margin use padding especially on floated parent elements.

Demo

<div class="wrap">
    <div class="left_wrap"></div>
    <div class="right_wrap"></div>
</div>

* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;

    /* Resets */
    margin: 0;
    padding: 0;
}

.wrap:after {
    clear: both;
    display: table;
    content: "";
}

.wrap > div {
    min-height: 300px;
}

.wrap .left_wrap {
    width: 30%;
    float: left;
    border: 3px solid #f00;
}

.wrap .right_wrap {
    border: 3px solid #000;
    width: 70%;
    float: left;
}