Problem with float

Question

Problem with float

Navigation

#1 by (2 votes)

2

I'm not able to align two elements side-by-side properly.

The container of these two div 's looks like it has height: 0; or initial , only recognizing the height of the element without float: left; , which in this case are the links of navigation.

But I wanted the container to also respond to the height of the <div id="logo"> element, since it now seems to be behaving like an element with position:absolute; , regardless of its height,% container does not expand as it should if this element does not have any height or float .

Thefirstimageishowitiscurrently.Thesecondishowitshouldbe.

<header><divid="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;
}

html css

asked by anonymous 06.12.2015 / 19:47

1 answer

Update query with last table input Error in SQL code subquery

score 2 · Answer 1

To avoid this and other problems with float , always make sure to use clear:both; whenever you finish floating items.

For this you can create a class specified to do this "cleaning" by assigning it the clear property of 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 you just create a class .clear and assign it the clear property:

.clear{clear:both;}

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

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