Float problem

Question

Float problem

Asked 8 years, 7 months ago

Viewed 408 times

2

I’m not being able to align two elements side by side correctly.

The container of these two div'It’s like I’m with height: 0; or initial, only recognizing the height of the element without the float: left;, which in this case are the navigation links.

But I wanted the container also respond to the element’s height <div id="logo">, for he now seems to be behaving as an element with position:absolute; that regardless of their height, the height of container does not expand as it should happen if this element had no float or position:absolute;.

The first image is as it currently is. The second image is as it should be.

<header>
<div id="top-bar">
    <div id="logo"></div>
    <nav id="menu">
        <ul>
            <li><a href="#">Sobre</a></li>
            <li><a href="#">Trabalhos</a></li>
            <li><a href="#">Contato</a></li>
        </ul>
    </nav>
</div>
</header>

CSS

a {
text-decoration: none;
color: #4B4B4B;
}

div#top-bar {

background-color: #f14949;
padding: 25px 80px 25px 80px;
}

div#logo {
vertical-align: middle;
float: left;
width: 86px;
height: 51px;
background-color: #4B4B4B;
border-radius: 6px;
}
nav#menu {

text-align: right;
}
nav#menu ul {
list-style: none;
}

nav#menu li {
display: inline-block;
}

3

I don’t understand what the problem is. Can you explain what you wanted the result to be?

– Sergio

2015/12/06 at 18:58
Actually I did not realize that the problem did not appear here on the site, but the browser clearly shows. div does not consider the "Logo" height of the list only (menu)

– Steve Alisson

2015/12/06 at 19:01
Good afternoon Steve, it’s not that the question here doesn’t work, it’s because you didn’t put all the css, it could be anything that is causing the problem, it won’t help just by an image showing the problem, you have to create an example of such problem that can be reproduced, I recommend you follow these tips carefully: http://answall.com/help/mcve. - take this as a constructive criticism :)

– Guilherme Nascimento

2015/12/06 at 20:34

1 answer

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.

by Chun • **7,440** points · Answer 1 · 2015-12-06T19:54:27+00:00

To avoid this and other kind of problems with float, always make sure to use a clear:both; every time you finish floating elements.

For that you can create a class specifies to do this "cleaning" by assigning you the property clear of the CSS, for example:

<header>
    <div id="top-bar">
        <div id="logo"></div>
        <nav id="menu">
        <ul>
            <li><a href="#">Sobre</a></li>
            <li><a href="#">Trabalhos</a></li>
            <li><a href="#">Contato</a></li>
        </ul>
        </nav>
        <div class="clear"></div> <!-- Este é o elemento criado, para 'limpeza' dos floats -->
    </div>
</header>

Then in CSS just create a class .clear and assign it to you clear:

.clear{clear:both;}

The estate clear:both; will prevent new elements added after these floated elements from being affected by this property as well. By specifying and adding this element, we are saying that from the <div class="clear"></div>, we no longer want anything to stay afloat.

You can read more about the property clear, here at this link - CSS clear Property