SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2006
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Div won't float when width of element is set to 100%

    On this page:
    http://www.floodgaterecords.com/new/

    I am trying to make the bar that is currently appearing at the bottom (nav bar) to show up along the top just to the right of the left sidebar. I am using float:left and float:right, but because I have set the width for the nav bar at 100%, it won't appear next to the sidebar.

    My question: is there a way to make the navbar appear for the remaining width of the screen (using float or however else possible)?

    Alternatively, I could set the navbar as the background image, but when I do, the sidebar doesn't show the full height of the screen when I set its height to 100%.

    Any thoughts?

    Thanks.

  2. #2
    SitePoint Guru redhillccwebmas's Avatar
    Join Date
    Jun 2005
    Posts
    989
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    By setting the width to of the bar to 100%, it means it will be 100% the width of the parent element, which, in this case contains the left hand column too.



    Hope this helps

    James

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,789
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    You could just wrap that navcontainer (and the rest of the right column) in a div that has a margin-left of 216px to clear the left float.


    Alternatively you can use a more advanced negative margin technique to avoid the 3px jog and do something like this.

    Code:
    #main{
    float:right;
    width:100%;
    margin-left:-216px;
    }
    .inner{margin-left:216px;}
    
    #nav-container {
    height:58px;
    background:url('http://www.floodgaterecords.com/new/g/n_bg.png') repeat-x;
    }
    #nav {
    color:#fff;
    height:58px;
    float:left;
    }
    Code:
            </form>
            <p> <a href=contact.php>Contact Info</a> </p>
        </div>
        <div id="main">
            <div class="inner">
                <div id="nav-container">
                    <div id="nav"> hello </div>
                </div>
            </div>
        </div>
    </div>
    </body>
    </html>

    You should avoid any long fixed width elements in that fluid right column or the float will drop when the page can't be squeezed anymore. Try to create fluid elements that can wrap otherwise it will drop the content too soon (in IE).

  4. #4
    SitePoint Enthusiast
    Join Date
    Feb 2006
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cool, this works. BUT, since the main/inner DIVs are covering the left column, the Contact Info link is unclickable. I tried z-index:1 on the left column and even z-index:-1 on the main/inner DIVs but nothing is working.

    Updated link: http://www.floodgaterecords.com/index.php

  5. #5
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You need position: relative or absolute (relative in your case) on the element for z-index to work.


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
  •