css Float left and Float right issue

Question

I am trying to split a div into two event columns. The first div should be aligned left and the second div should be aligned right.

My solution is basically the following...

    <div style="width:100%;>            
        <div style="width:50%; float:left;">

        </div>
        <div style="width:50%; float:right;">

        </div>          
    </div>

My second column (my button panel) is going on a new line. I'm fairly new to css so help with a quick explanation would be appreciated.

https://jsfiddle.net/ff2yo9n3/

thanks

What do you mean by "My second column (my button panel) is going on a new line." ? — R-J, Nov 26 '15 at 03:40
If you look at [this updated fiddle (added colors)](https://jsfiddle.net/ff2yo9n3/4/), the columns are displaying correctly (though this is not the best way). — PSWai, Nov 26 '15 at 03:44
@Richie do you mean the `border-bottom` of `.header`? Or do you want to achieve equal height in both `div`s? — PSWai, Nov 26 '15 at 03:52
yes. I want that border bottom to underline the heading and also the buttons. But in that fiddle it has moved up through the text. — Richie, Nov 26 '15 at 03:53
@Richie I see. That is another issue when the children of a `div` are all floated. You need to add `clearfix` to the parent `div` when this happens. http://stackoverflow.com/questions/8554043/what-is-clearfix — PSWai, Nov 26 '15 at 03:56

Chris Wijaya · Answer 1 · 2015-11-26T03:58:24.563

2

If you want to split the div into two 50% width elements, you can't go the way you did there.

Both has to have the same floating element or else they will be overlapping with each other. This is a broad topic that is explained in MDN, referred as Block Formatting Context.

What you may want to do instead, make both divs to float: left; and width: 50%; then set the text-align: right; for the right aligned div.

edited Nov 26 '15 at 03:58

answered Nov 26 '15 at 03:41

Chris Wijaya

1,276
3
16
34

I tried that here... https://jsfiddle.net/LjqczL46/1/ ... But it didn't work for me. I will have a read of your link. – Richie Nov 26 '15 at 03:50
You missed a closing `"` on your fiddle there – Chris Wijaya Nov 26 '15 at 03:53
https://jsfiddle.net/LjqczL46/3/ That seems to work but had to add a clear both. I'm struggling with clear:both. Would you know why clear both is required in this scenario? – Richie Nov 26 '15 at 03:55
This is a different question :) At this point, think of `float` property is like a dimension of it's own. When you have a parent element and a child inside that don't share the same `float` property, they are now in a different world. Hence the parent won't be able to acknowledge that there is a child inside of it. – Chris Wijaya Nov 26 '15 at 04:02

score 2 · Accepted Answer · edited May 23 '17 at 12:30

Since you are new to CSS, why not learn a modern layout technique with a broad range of options (flexbox), as opposed to an older method which has limited capacity and was never intended for building layouts (floats)?

With CSS3 Flexible Boxes (flexbox) you can build your layout quickly, simply and efficiently.

Here's all you need:

HTML (removed inline styles)

<div class="header">
    <div>Buttons</div>
    <div>
        <a data-code="button" title="Show Source" class="top-button">
           <i class="fa fa-code"></i>
        </a>
    </div>
</div>

CSS (added two lines of code)

.box .header {
    font-weight:300;
    border-bottom: 1px solid #ccc;
    font-size: 15px;
    margin-bottom: 10px;
    padding: 5px 10px;
    line-height: normal;

    /* new */
    display: flex;
    justify-content: space-between;
}

DEMO

Flexbox benefits:

minimal code; very efficient
centering, both vertically and horizontally, is simple and easy
equal height columns are simple and easy
multiple options for aligning flex items
it's responsive
it's the future of CSS layouts

Note that flexbox is supported by all major browsers, except IE 8 & 9. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add all the prefixes you need, post your CSS in the left panel here: Autoprefixer.

thank you. Yes I like this answer. I'm going to pursue this. — Richie, Nov 26 '15 at 05:49
I've been playing with flex. I really like it and am really glad that I'm learning the new way to do it rather than the old way. Thanks again for your post. — Richie, Nov 26 '15 at 22:56
FYI, here's a good flexbox video tutorial on YouTube: [*What the flexbox?*](http://www.youtube.com/playlist?list=PLu8EoSxDXHP7xj_y6NIAhy0wuCd4uVdid) There are also some on Lynda.com, but you'll need to pay subscription. — Michael Benjamin, Nov 27 '15 at 12:24

css Float left and Float right issue

2 Answers2