Float div to left, other div to right

Question

I am trying to adjust float part of my menu to the left, and the other part to the right. However, I cannot get it to work.

I have been trying to accomplish it using floats, but I can't quite get it to work.

How can I do this in a proper way?

HTML

<div class="topbar">
    <div class="title">Title</div>

    <div class="topbar-boxes">

        <div class="topbar-boxes-left">
            <div class="topbar-box">Box1</div>
            <div class="topbar-box">Box2</div>
            <div class="topbar-box">Box3</div>
        </div>

        <div class="topbar-boxes-right">
            <div class="topbar-box">Box1</div>
            <div class="topbar-box">Box2</div>
            <div class="topbar-box">Box3</div>
        </div>

    </div>

    <div style="clear:both"></div>
</div>

CSS

.topbar {
    width: 100%;

    padding: 14px;

    font-size: 18pt;
    color: white;

    background-color: rgba(42, 42, 42, 0.95);
}

.title {
    float: left;
    padding-right: 50px;
}

.topbar-boxes {
    float: left;
    margin: -14px;
}

.topbar-boxes-left {
    float: left;    
}

.topbar-boxes-right {
    float: right;
}

.topbar-box {
    float: left;

    padding: 20px;

    border-left: 1px solid black;

}

http://jsfiddle.net/8eqSN/

Learn [here](http://stackoverflow.com/a/16568504/1542290) to know how floats work. — Mr. Alien, Feb 06 '14 at 14:09
Try to use float for one of your classes and not use it for all of them — hamidfzm, Feb 06 '14 at 14:24

score 0 · Answer 1 · answered Feb 06 '14 at 14:08

Your problem is because you're floating the .topbar-boxes div. When you float, the length of the element is made as thin as possible (rather than filling the width of the page as you'd expect normally), so your float is working, you just can't see it because the parent div is only as wide as the child elements.

To fix, remove this float:

.topbar-boxes {
    /*float: left; <----- remove this.*/
    margin: -14px;
}

score 0 · Answer 2 · answered Feb 06 '14 at 14:10

That's because float elements depends on the width of the parent to be positioned since the parent of the boxes topbar-boxes is floated too it width isn't 100%.

Based on your structure and since the tittle is floated too I suggest you remove that container and all works fine taking the margin on the others:

.topbar-boxes-left {
  margin: -14px;
  float: left;    
}
.topbar-boxes-right {
  margin: -14px;
  float: right;
}

Check this Demo Fiddle

score 0 · Answer 3 · answered Feb 06 '14 at 14:23

0

The container div (.topbar-boxes) has a width:auto, by default in every element. That means that its width is going to be as much as its content.

Try to set width:100% in the .topbar-boxes.

answered Feb 06 '14 at 14:23

Wakkos

99
1
4

Float div to left, other div to right

3 Answers3