Positioning Html Using Css

jsFiddle I am still having difficulty with the positioning HTML elements using CSS. I understand the basics, that elements are displayed primarily as block or inline; however, when

Solution 1:

Quick answer: Like everyone else has mentioned, you need to clear your floats.

.nav { 
clear: both; 
overflow: auto; }

You can see it in action in a fork of your jsfiddle. (P.S. you had a few syntax errors in your HTML that I fixed in the above linked fork. Mostly closing tags missing or missing the /.)

More explanation: You have 2 children inside of DIV.nav, and both of them are floating, but because those elements don't fill the entire space, whatever is below DIV.nav starts creaping up to fill any gaps.

I'd also highly recommend checking out beginner articles on sites like SitePoint or A List Apart. Hope that helps a little.

Solution 2:

You need to clear your float so it does not affect any following divs. Add this to your css file.

.slider{
    clear:both;
}

When you float an elements, left or to the right, it creates empty space which allows other element to take up those space. Clearing the float will prevent these element to take up this empty space.

Or you can fix the affecting element

.nav{
    overflow:hidden;
}

JSFiddle Demo

Solution 3:

Solution 1:

You can simply clear your slider like so:

.slider{
    clear:both;
}

But to answer your question as to why your .slider went between your ul and your h1. Since the width of the two elements you had floated weren't taking up 100% of the width of the parent container, your .slider had enough room to flow between them. That's why adding clear:both to your .slider class was necessary.

jsFiddle

---

Solution 2:

Something to consider. Since you aren't paying by the div, you can use them liberally as containers. Set their width to 100% and add your elements inside. You could easily do something like this to solve your problem.

<divclass="row"><ul><li>Home</li><li>Portfolio</li><li>Skills</li><li>Experience</li><li>Contact</li></ul></div>

Then give .row these styles:

.row {
    display: inline-block; /* or display: block;* display: table; */width:100%;
    clear:both;
}

This will ensure that no other elements enter this space.

Here's a fiddle with this solution:

jsFiddle

---

Addressing concerns in comments:

Please read this article from CSS-Tricks

div {
  display: inline;        /* Default of all elements, unless UA stylesheet overrides */display: inline-block;  /* Characteristics of block, but sits on a line */display: block;         /* UA stylesheet makes things like <div> and <section> block */display: run-in;        /* Not particularly well supported or common */display: none;          /* Hide */
}

There is a whole set of display values the force non-table elements to behave like table-elements, if you need that to happen. -css-tricks

div {
  display: table;
  display: table-cell;
  display: table-column;
  display: table-colgroup;
  display: table-header-group;
  display: table-row-group;
  display: table-footer-group;
  display: table-row;
  display: table-caption;
}

Solution 4:

Add this to your CSS:

.nav{
  overflow: hidden;
}

This will prevent this container (.nav) from collapsing, which is what it does (add a background or border to see it in effect). I reckon that these menu items don't expland in a fly-out, so this overflow: hidden won't obstruct anything.

In case it does have a fly-out, consider adding an extra div below both children (h1, ul). Adding clear: both to that div underneath should have the same effect.

If the container contains nothing but floating elements, collapsing may occur, as in this case.