SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2011
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Floating elements

    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/stefanf.../projects.html

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

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    One way to do it is add this to your style sheet:

    Code:
    h2 {clear: both;}
    That stops it jumping up into the space beside the floated elements.

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,801
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    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.

    (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)


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •