SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot
    Join Date
    Jul 2002
    Location
    Vancouver Canada
    Posts
    158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Floating items stacking not lining up!

    As you can see here, The content and skyscraper ad aren't lining up beside the navigation, unless I specify a width for the content. I want to make the design liquid vs fixed width. What am I doing wrong? I am still brand new to CSS.
    Get busy living or get busy dying
    --Stephen King

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,374
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    As you foundfloats need a width so the answer is just let the content be static and give it a margin left to clear the float.

    You also need to address the padding on the ul as it is pushing ie wide.
    Code:
    .navigation
    {
     list-style-type: none;
     list-style-position: inside;
     text-align: right;
     font-size: 12px;
     background-color: #FFC;
     margin:0;
     padding-left: 0px;
     float: left;
     width: 130px;
    }
     .navigation li 
     {
     border-bottom: 1px solid black;
     border-right: 1px solid black;
     padding: 3px;
     margin:0;
     }
    .navigation_header
    {
     text-align: left;
     font-size: 12px;
     font-weight: bold;
     color: #FFF;
     background-color: #009;
    }
    #content
    {
     text-align: left;
     padding-top: 10px;
     margin-left:140px;
    }
    You may wish to read my faq on floats which mentions the 3 pixel jog that affects floats. However it isn't always that noticable unless the layout is tight for space.

    Paul

  3. #3
    SitePoint Zealot
    Join Date
    Jul 2002
    Location
    Vancouver Canada
    Posts
    158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How do I get the ad on the right to float beside the content, without floating the content?
    Get busy living or get busy dying
    --Stephen King

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,374
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Just float the add

    Where do you want the add to be. Just float it righ or left as required. As it is an image it won't need a width and the content will automatically float around the ad.

    Note that floated content must come before the element that wraps around it.

    Is that what you meant

    Paul


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
  •