upper line floating

Question

I want a full screen bar in the upper part of my site that has a list in the left and a right part(whatever elements). Why this doesn't work?

#upperline{
background:brown;
width:100%;}

#upperline ul{
float:left;}

#upperline p{
float:right;}


<div id="upperline">

    <ul>
        <li>our team</li>
        <li>help</li>
        <li>contact</li>
    </ul>
    <p>log in</p>

</div>

i am so confused

As am I user3697574, as am I. Could you edit your question? It's difficult to understand what you need. — RattleyCooper, Apr 08 '16 at 17:12

score 0 · Answer 1 · edited May 23 '17 at 12:24

0

Put an overflow:hidden; on the parent of floating elements to make it works

See it here

#upperline{
background:brown;
width:100%;
overflow: hidden;}

From this post and adapted to your case :

div is a block-level element (they stretch to 100% of the parent width).

Now in your example the div contains only floated elements. This makes it collapse to a height of 0px (It still has 100% width though as you can see in the example).

Now declaring overflow (any value other than visible) establishes a new block formatting context, which makes the div contains its children. Suddenly the div "reappears", not having size 0px anymore.

edited May 23 '17 at 12:24

Community

1
1

answered Apr 08 '16 at 17:11

Vincent G

8,547
1
18
36

worked!! but still can't catch it how exactly it works... yea it works but i need to understand it :( – user3697574 Apr 08 '16 at 17:20
See the first answer on this post : http://stackoverflow.com/questions/16041229/css-overflowhidden-with-floats Good explanation to this :) I edited my answer to your case – Vincent G Apr 08 '16 at 17:22

score 0 · Answer 2 · answered Apr 08 '16 at 17:42

The reason that your code does't work is that in CSS, putting float: left or float: right makes that element no longer affect its parents height. This means that if you put a float rule on all elements in a container, the container will not have any height. There are a few ways of getting around this.

As Vincent G suggested is putting overflow: hidden on the container div. This works because setting the overflow to hidden (or auto) makes the browser do a different kind of check to see what the height should be. This has a pretty serious downside though. overflow: hidden means that any element that is inside the container that can expand (drop down menu for example) will be cut off.
The second way (and in my opinion the best way) is to place a div with the CSS rule clear:both at the very bottom of the container. This div can be empty so you will not see it. clear: both will put this element below any sibling elements. As long as you don't put a float rule on this element the parent element will be resized to include it.

Here is an example of the second version: https://jsfiddle.net/8ewr89jw/

upper line floating

2 Answers2