CODEWITHSUNDEEP
htmlcss
Will Yuen
Will Yuen

Reputation: 33

Inconsistent layout with different length in <H1>

I am building my website and come across this tricky issue:

With the same external css, pages display differently (such as the about page and experience page).

I've examined the difference between the two and tried several simple workarounds, none has worked. By noticing that the pagebody div is aligning with the page title, I have extended the page title to "Past Experience" (example).

Can any of you help me to figure out the real problem? Is there an issue with the stylesheet?

Thanks in advance!

Upvotes: 3

Views: 70

Answers (3)

Moin Zaman
Moin Zaman

Reputation: 25445

Just add this to your CSS:

#headline { overflow:hidden; }

Your problem here is that your floated nav and logo are not cleared / contained, so that the elements after the float can continue on the next line and return the normal document flow.

Also when you use floats, its better to have a width set on the floated elements. Width can be in any unit, px, em or %

You could also do this as an alternative:

#pagebody { clear:both; }

which is code to clear left and right floats and return #pagebody to normal document flow under #headline

Upvotes: 0

phunder
phunder

Reputation: 1713

Your problem can be fixed by adding the following:

#pagebody{clear: left;}

Upvotes: 4

NullPoiиteя
NullPoiиteя

Reputation: 57322

just add in css 

#headline {
    float: left;
    width:100%;

}

result

enter image description here

Upvotes: 0

Related Questions