SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict buddybuddha's Avatar
    Join Date
    Dec 2005
    Posts
    219
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Pushing Out With a Float

    I have a page that I am working on for school:

    http://www.buddybuddha.net/counsel/home.html

    The problem, as you may quickly notice, is the the column on the left is not pushing the content box out like I would like it to. This is obviously because the box is a float. I know that's the way it supposed to look according to the code, but how can I make it so it does push the box out?

  2. #2
    SitePoint Evangelist Ed Seedhouse's Avatar
    Join Date
    Aug 2006
    Location
    Victoria, B.C. Canada
    Posts
    592
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by buddybuddha View Post
    The problem, as you may quickly notice, is the the column on the left is not pushing the content box out like I would like it to. This is obviously because the box is a float. I know that's the way it supposed to look according to the code, but how can I make it so it does push the box out?
    Well you can't, but is that your real problem? Floated elements are removed from the flow, so all external elements, including their wrappers, are supposed to ignore them. That's just the way CSS is specified.

    You could float your content left as well, as long as there is enough space left on the page to contain it on the same level.

    The usual solution is simply to give a margin-left to the right column that is sufficient to clear the floated element. That way the unpositioned right column will expand to fill the remaining width. Of course should your floated element grow wider you'd have to adjust the margin accordingly.

    But a look at your code shows perhaps the worst case of "divitis" and unsemantic code I've seen in awhile. It doesn't need to be anywhere near that complicated. You shouldn't be using a transitional doctype. Your code has many validation errors. CSS is designed to work with valid html and you can't expect anything particular from any given CSS rule unless the code it applies to is valid html or xhtml.

    My advice is to do some research, tear it all down, and start it over the right way. You'll end up saving a lot of time and having a much better page.
    Ed Seedhouse

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2006
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Adding a <div style="clear:both;"></div> at the end of the wrapper solves this particularly problem. But it kind of defeats the whole purpose with css...


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
  •