Align div elements side by side using floats [duplicate]

Answer 1

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 2

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

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

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