Floating elements

HTML & CSS
1

Its been awhile since I’ve designed a web page - but I am trying to get back into it. I’m designing a personal website right now to show some of my work.

I’ve floated some divs left named “project” within headings - for example Web design, graphic design, and other projects. Right now I have the “Web Design” section how I want it. I’m trying to get “Graphic Design” heading to go BELOW the web design category. How do I do that?

http://www.uvm.edu/~sfaville/stefanfaville_new/projects.html

Sorry if this isn’t clear, i’m not the best at explaining.

2

One way to do it is add this to your style sheet:


h2 {clear: both;}

That stops it jumping up into the space beside the floated elements. :slight_smile:

3

For starters it doesn’t look like you structured your HTML correctly.

Each “column” should be wrapped in its own DIV which should have a corresponding explicit with, you can then float the DIVs side by side (not the h2s)
not only will that get you to what you want , but it will make for more semantically correct HTML. Speaking of which, dont skip headings( since your column heading is h2, then each sample heading should be h3 and not h4. :slight_smile:

(edit: I may have misunderstood what you intended to do… if you wanted your web projects to line up horizontally and then your web heading to fall bellow … ralphs suggestion would suffice) :slight_smile: