SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    790
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Div Floats Not Working Well. Is it my math?

    I have a site located here:

    http://thisiswhereiplay.com/blog/

    The two DIVs in question are the #primary and #secondary. In Safari they line up and position themselves side by side. But on the iPhone, the #secondary DIV is spilling over and is positioned underneath the #primary. Is that something someone could help me with? Is it simply my math is off a bit?

    Thanks in advance!
    Todd
    Todd Temple > T2 Design

  2. #2
    SitePoint Zealot
    Join Date
    May 2008
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    Make sure that you have declared position:relative and float:left to both divs, that they do not have widths declared, that the container div is wide enough to hold both divs at the same level and that both of them divs are not clearing anything (clear:none). Also if you have issues getting the container div to span the whole height of the contained floated divs set its overflow to auto. This should fix your problem.

  3. #3
    SitePoint Zealot
    Join Date
    May 2008
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually you can declare widths to the divs but make sure that the sum of both plus margins, paddings and borders is not greater than the container div's width.

    It is very useful to set some universal properties that will help you avoid potential problems with browser specific default stylings.

    I use to do it like so:

    *{
    position:relative;
    margin:0;
    padding:0;
    }

    This will save you a few hours of work per website.


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
  •