CODEWITHSUNDEEP
htmlcsscss-float
Xameer
Xameer

Reputation: 31237

Why block elements behave like inline elements?

:target {
  border: 2px solid #D4D4D4;
  background-color: #e5eecc;
}
.navigation li {
  list-style-type: none;
  float: left;
  padding: 1em;
}
<ul class="navigation">
  <li> <a href="#help"> Help </a> 
  </li>
  <li> <a href="#about"> About us </a> 
  </li>
</ul>

<p>lorem ipsum</p>

<br/>

<p id="help"><b> Help yourself man </b>
</p>
<p id="about"><b> We're free software lovers </b>
</p>

If we inspect the above snippet (using dev tool) ul and p elements both are display:block under user agent stylesheet. Nothing is applied in element.style and none of them have float:left

Yes, the float is applied to li not ul and removing float:left from .navigation li class will fix the problem.

p and ul both are block elements then why they're behaving as inline elements? Not adding a new line break.

I'm not looking for a fix, I need to understand the concept behind this.

Upvotes: 2

Views: 614

Answers (4)

Jeremy Rans
Jeremy Rans

Reputation: 211

The problem is that all of the elements inside the ul are floated, so the ul behaves as if it has no content.

One solution, if you want the lis to remain on a single line, would be to use display: inline instead of float: left on them.

:target {
  border: 2px solid #D4D4D4;
  background-color: #e5eecc;
}

.navigation li {
  list-style-type: none;
  display: inline;
  padding: 1em;
}
<ul class="navigation">
  <li> <a href="#help"> Help </a>
  </li>
  <li> <a href="#about"> About us </a>
  </li>
</ul>
<p>lorem ipsum</p>
<br/>
<p id="help"><b> Help yourself man </b></p>
<p id="about"><b> We're free software lovers </b></p>

Upvotes: 1

Kaku Sarmah
Kaku Sarmah

Reputation: 171

You can also add a clear:left style after the Floated li that will solve the problem.

Upvotes: 1

tristanslater
tristanslater

Reputation: 66

Solution

Add clear: left to the p tag. This will cause it to drop below the left floated elements before it.

Use Nicolas Gallagher's micro clearfix on the ul tag:

.cf:before,
.cf:after {
  content: " "; /* 1 */
  display: table; /* 2 */
}

.cf:after {
  clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
  *zoom: 1;
}

This will cause the ul tag to expand to the size of the li elements it contains.

Explanation

The floated elements don't take up space in the document flow, so the element they are wrapped in, ul in this case, won't grow to take up space, so it is 0 px high.

The p tag comes right after the ul, which takes up no space, so it appears right at the top.

The li tags float to the left, which means they slide over to the left and push everything to their right that can be pushed over to the left. In this case, the p tag.

Upvotes: 5

Dinesh Kanivu
Dinesh Kanivu

Reputation: 2587

Yup

Remove Float:left from .navigation li class

Hi student,

li not behaving like an inline element, it's Block element Itself. if a Block element with Float:left always align back to back.

http://www.impressivewebs.com/difference-block-inline-css/

From this Clearly you can understand what exactly a inline and Block element

Upvotes: 1

Related Questions