SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot topher's Avatar
    Join Date
    Jun 2004
    Location
    Arizona
    Posts
    115
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Floating divs horizontally

    I have three divs floating left in a container div. When I shrink an IE browser window small enough, the three divs jump to stacked one above the other. Is there something wrong with my CSS? Or, how to prevent this? Thanks for any help!

    Code:

    ## CSS ##
    #searcharea {
    padding-left: 25%;
    }

    #search {
    float: left;
    width: 100px;
    margin-top: 10px;
    }

    #searchform {
    float: left;
    width: 100px;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 10px;
    }

    #hand {
    float: left;
    width: 40px;
    }

    ## html ##
    <div id="searcharea">

    <div id="search">
    <img src="Images/search.gif" alt="Search" width="90" height="21" border="0">
    </div>

    <div id="searchform">
    Search form goes here.
    </div>


    <div id="hand">
    <img src="Images/hand.gif" alt="Hand print" width="40" height="40" border="0">
    </div>


    <div style="clear: both;"></div>

    </div>

  2. #2
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    give container #searcharea{width:260px; a width

    your clear div haze no height, so is not working for FF < 1.5
    <!-- <div style="clear: both;"></div> -->

    use this

    head+body #searcharea:after{
    content: ".";
    display: block;
    height:0;
    clear: both;
    visibility: hidden;
    }

    or

    * html .fcl{clear:both;height:0px;overflow:hidden;margin-top:0px;}
    head+body .fcl{clear:both;height:1px;overflow:hidden;margin-top:-1px;}

    <div class="fcl"></div>

  3. #3
    SitePoint Zealot topher's Avatar
    Join Date
    Jun 2004
    Location
    Arizona
    Posts
    115
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for the assistance!!! You know, it occures to me that perhaps I'm not using the best approach for this.

    Here is an attempt at absolutely positioning the elements in a header. I've colored the border for the divs "headercontainer" and "searcharea" so you can see they've collapsed.

    What I'm after is for the search form and links in the center to not overlap each other when the browser window is made narrow, but to move to the left as one unit until "searcharea" makes contact with the two outside images and they're all lined up without overlapping.

    Example

    Also, why do the divs collapse?
    Last edited by topher; Jan 26, 2006 at 19:53. Reason: Nap


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
  •