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:

enter image description here

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:

https://i.stack.imgur.com/Ulchz.png

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

https://i.stack.imgur.com/CcwSG.png

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

I would fix left panel size, because most of the textboxes, comboboxes and etc. that are used in filter looks better on constant size... also I don't think it is good idea, to allow grid to resize untill 0 width... definitely it would be better to set some min width — Arsen Mkrtchyan, Jan 28 '14 at 14:43
Your CSS is fine, but you can modify it so that when you resize, the page remains responsive. — Charlie, Jan 28 '14 at 14:43
C'mon, 20K rep and you don't think we'll need to see your code? — j08691, Jan 28 '14 at 14:43
@ArsenMkrt - Fix left panel size to what / where? Do you mean the percentage? — JonH, Jan 28 '14 at 14:44
No. That's not normal. 20% and even 80% not 79% should work will on all browser sizes. You should be doing something wrong, a margin? a padding? Show your full code please! — Ashraf Samhouri, Jan 28 '14 at 14:47
@JonH not a percentage, but a pixels... something like 300px should look good on modern desktop browsers... or less if you want to support mobile too — Arsen Mkrtchyan, Jan 28 '14 at 14:49
@ArsenMkrt - 300px would work for dLeft but what about dRight (the grid container)? — JonH, Jan 28 '14 at 15:02
@ArsenMkrt - That doesnt seem to work for me. I end up with a grid that goes under my filters div (dLeft) so you cant see some of the columns. What I'd like to do is make my dLeft filters div 200px and take the remaining space for the grid? — JonH, Jan 28 '14 at 15:41
Yes @JonH, I made left side to have 200px width and right side take free space, as you can see in fiddle, create a fiddle it will help to understand situation better — Arsen Mkrtchyan, Jan 28 '14 at 21:45
I'll have to leave this open for now I did the same thing and it did not work correctly. Maybe we can do a chat? — JonH, Jan 29 '14 at 14:55

Mr. Alien · Accepted Answer · 2014-01-28T14:51:26.683

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 Box Mode;

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

Where exactly am I adding that, am I adding it to my .gridContainer class? — JonH, Jan 28 '14 at 14:46
Add it to the top of your stylesheet file. * means every element. — Ashraf Samhouri, Jan 28 '14 at 14:48

score 0 · Answer 2 · answered Jan 28 '14 at 14:45

0

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.

answered Jan 28 '14 at 14:45

Doug Chamberlain

11,192
9
51
91

score 0 · Answer 3 · answered Jan 28 '14 at 15:52

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.

score -1 · Answer 4 · answered Jan 28 '14 at 16:26

-1

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

answered Jan 28 '14 at 16:26

user2804021

151
5

Align div elements side by side using floats

4 Answers4

Linked

Related