CODEWITHSUNDEEP
htmlcsscss-float
user5041486
user5041486

Reputation:

HTML Float Property

<nav>
    <div class="row">
       <img src="resources/img/logo-white.png" alt="logo" class="logo">
           <ul class="main-nav">
               <li><a href="#">Food delivery</a></li>
               <li><a href="#">How it works</a></li>
               <li><a href="#">Our cities</a></li>
               <li><a href="#">Sign up</a></li>
           </ul>
   </div>
</nav>

I have the code above for a navigation bar in an Udemy tutorial I am following. The CSS Source Code for the navbar is the following:

.row {
    max-width: 1140px;
    margin: 0 auto;
}

.logo {
    height: 100px;
    width: auto;
    margin-top: 20px;
}

.main-nav {
    float: right;
    list-style: none;
    margin-top: 60px;
}

The part I am confused on is for the img in the div with the class="row" why is it that the image is put off to the top left even though I didn't set the float property of the img to float: left;. As you can see in the image below, that white logo is positioned to the top left even though I never set the float property to left. But for the ul with the class="main-nav" I had to set the float property to right.

enter image description here

Upvotes: 1

Views: 279

Answers (2)

James Snowy
James Snowy

Reputation: 415

The logo displays on the left side as the default direction for every HTML element has the "rule" LTR, so that means even if you haven't made a float: left line it will, though display at the left side.

Have a look at this, it should help you with something, happy programming!

Upvotes: 0

Rovi
Rovi

Reputation: 259

img is a inline element & ul is a block level element. that means that ul would take the 100% width and be on a new line whereas img would take its specific width. and by default the direction is ltr so we have all inline elements floating to the left.

Upvotes: 1

Related Questions