CODEWITHSUNDEEP
htmlcss
maximo890
maximo890

Reputation: 3

Why has my ul element disappeared when I utilize the float: right propriety in CSS?

Why does my ul element disappear when I utilize the float: right property in CSS?

I am building the navigation for this website.

You will find the code here in a CodePen:

https://codepen.io/maximo890/pen/JygeVr

CSS

/*-----------------------------------*/
/* HEADER */
/*-----------------------------------*/

header {
    background-color: #de654e;
}

.logo-link h1 {
    font-family: "lobster", sans-serif;
    font-size: 42px;
    padding: 2% 0 2% 6%;
    display: inline-block;
    }

.menu-navigation li {
    display: inline-block;
    float: right;
    color: #fff;
}

Upvotes: 0

Views: 324

Answers (2)

Ravinder Singh
Ravinder Singh

Reputation: 84

I suggest you to use flex property as much as possible as it's future in works great for responsive behaviour. For current I see in header you have logo on left and navigation on right and your html is like:

<header>
        <nav>

            <a href="#" class="logo-link"><h1>Creative</h1></a>
            <ul><li>...

So you can try this:

nav { 
display: flex;
justify-content: space-between;
}

Upvotes: 0

Jose Francisco Pe&#241;a Estrada
Jose Francisco Pe&#241;a Estrada

Reputation: 11

The reason is because when you add the float property to all children of an element, the parent will have no height so the links will appear to be outside the header and the links blend with the background of the page. To fix this you could add to menu-navigation this:

overflow:auto

But I would recommend you to use other techniques like flexbox or using inline-block to build the layout.

You can read more information about floats here: https://css-tricks.com/all-about-floats/#article-header-id-3

Upvotes: 1

Related Questions