SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Zealot
    Join Date
    Jan 2004
    Location
    Iowa City, IA
    Posts
    121
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Is a float the way to go here?

    Hi,

    I have a form located at the botom of the right hand navigation column. I have it as "position: absolute" right now. The problem is, if I change resolutions, it moves out of position.

    I tried making the form a "float: left" and used a clear property, but I don't really quite understand this concept yet and it doesn't seem to be working for me.

    If you click on the link, it will show you the form using the "absolute" positioning.

    Any thoughts on the best way to handle this? I'm trying to get away from the absolute positioning, but can't seem to get the float way to work for me.

    http://www.sitesbysarah.com/bailey/main.htm

    here is my css code:

    /* CSS Document */

    * { padding: 0; margin: 0; }

    body {
    margin: 0;
    padding 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    background: #006699;
    }


    #wrapper {
    margin-right: auto;
    margin-left: auto;
    padding: 0;
    width: 922px;
    }


    #header {
    width: 900px;
    float: left;
    background-image: url(images/banner_900px.jpg);
    background-repeat: no-repeat;
    background-position: top center;
    height: 190px;
    padding: 10px 0px 0px 0px;
    margin: 10px 0px 0px 0px;
    border-bottom: 35px solid #006699;
    }

    #corner_logo {
    position: absolute;
    top: 11px;
    left: 675px;

    }


    h1 {
    font-size: 1em;
    color: #006699;
    font-weight: bold;
    padding: 0 0 0 19px;
    margin-bottom: 15px;
    }


    a:link {
    color: #006699;
    text-decoration: underline;
    }

    a:visited{color: #006699;
    text-decoration: underline;
    }
    a:hover{color: #fff;
    text-decoration: none;}

    p {
    color: #006699;
    padding: 0 20px;
    }




    #leftcolumn {
    border-top: 1px solid #fff;
    border-right:1px solid #fff;
    border-left: 1px solid #fff;
    border-bottom:1px solid #fff;
    background-image:url(images/navigation_bkgd_tile.gif);
    background-repeat: repeat-y;
    background-color: #6ba7eb;
    margin: 0px 1px 5px 0px;
    padding: 10px;
    width: 195px;
    height: 950px;
    float: left;
    }

    #leftnav {
    text-decoration: none;
    }


    #leftcolumnnav ul , #leftnav ul li{margin:0;}
    #leftcolumnnav ul li a {display:block;padding:5px 18px;}



    #leftnav ul {
    list-style: none;
    margin-bottom: 10px;
    }

    #leftnav li {
    margin-bottom: 10px;
    border-bottom: 1px solid #fff;
    padding: 5px;

    }

    #leftnav li a:link {
    display: block;
    background-color: #6ba7eb;
    color: #fff;
    text-decoration: none;
    }

    #leftnav a:visited{
    color: #fff;
    text-decoration: none;
    }



    #leftnav li a:hover {
    background-color: #D4E4FA;
    color: #006699;
    font-weight: bold;

    }


    .leftsubtitle {

    background: #015A9E;
    padding: 5px 5px;
    margin-bottom: 5px;
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    }

    .topleftsubtitle {

    background: #015A9E;
    padding: 5px 5px;
    margin-bottom: 5px;
    color: #fff;
    font-weight: bold;
    border-top: 1px solid #fff;
    text-decoration: none;
    }




    #content {
    float: left;
    border: 2px solid #fff;
    background-image:url(images/content_bkgd_tile_gif.gif);
    background-repeat: repeat;
    background-color: #D4E4FA;
    height: 948px;
    margin: 0px 1px 5px 0px;
    padding: 10px;
    width: 435px;
    display: inline;

    }


    #rightcolumn {
    border-top: 1px solid #fff;
    border-right:1px solid #fff;
    border-left: 1px solid #fff;
    border-bottom:1px solid #fff;
    background-image:url(images/navigation_bkgd_tile.gif);
    background-repeat: repeat-y;
    background-color: #6ba7eb;
    margin: 0px 0px 5px 0px;
    padding: 10px;
    width: 195px;
    float: left;
    height: 950px;
    }

    #rightcolumnnav {
    background-color: #6ba7eb;
    }


    #rightcolumnnav ul , #rightcolumnnav ul li{margin:0;}
    #rightcolumnnav ul li a {display:block;padding:5px 8px;}

    #rightcolumnnav {

    padding: 0px;
    margin: 0px;
    width: 100%;
    }



    #rightcolumnnav ul {
    list-style: none;
    margin: 0px;
    padding: 0;

    }

    #rightcolumnnav li {
    margin-bottom:0px;
    border-bottom: 1px solid #fff;
    }

    #rightcolumnnav li a:link {
    display: block;
    padding-left 5px;
    background-color: #6ba7eb;
    color: #fff;
    text-decoration: none;
    }

    #rightcolumnnav a:visited{
    color: #fff;
    text-decoration: none;
    }



    #rightcolumnnav li a:hover {
    background-color: #D4E4FA;
    color: #006699;
    }

    .rightcolumnnav_static_items {
    background-color: #D4E4FA;
    color: #006699;
    padding: 5px 12px;
    }



    .toprightcolumnsubtitle
    {
    background: #015A9E;
    padding: 5px 5px;
    margin-bottom: 5px;
    color: #fff;
    font-weight: bold;
    border-top: 1px solid #fff;
    }


    .rightcolumnsubtitle
    {
    background: #015A9E;
    padding: 10px 10px;
    margin-bottom: 5px;
    color: #fff;
    font-weight: bold;
    }




    #form {
    position: absolute;
    top: 940px;
    left: 735px;
    color: #fff;
    font-weight: bold;

    }


    #disclaimer {
    font-size: .8em;
    text-align: center;
    font-style: italic;
    line-height: 1.2;
    margin-top: 50px;
    }

    #ad {
    font-size: .9em;
    width: 280px;
    padding: 5px;
    border-top: 1px dotted white;
    border-bottom: 1px dotted white;
    font-size: .9em;

    }

    #address {
    position: absolute;
    top: 213px;
    left: 100px;
    width: 800px;
    color: #fff;
    font-size: .9em;
    font-weight: 700;
    text-align: center;
    }

    #address a:link {
    color: #fff;
    text-decoration: none;
    }

    #address a:visited{color: #fff;
    text-decoration: none;
    }

    #address a:hover{
    color: #D4E4FA;
    text-decoration: underline;}





    /*Navigation on download page */

    #downloadnav {
    width: 300px;
    font-family: Arial, Helvetica, sans-serif;
    background-color: #D4E4FA;
    text-align: center;
    padding: 20px 0 0 70px;
    }

    #downloadnav ul {
    list-style: none;
    margin: 9px;


    }

    #downloadnav li {
    margin: 0;
    padding: 5px;
    border-bottom: 1px solid #fff;


    }

    #downloadnav li a {
    display: block;
    padding-left: 10px;
    background-color: #6699FF;
    color: #fff;
    text-decoration: none;
    }

    #downloadnav li a:hover {
    background-color: #D4E4FA;
    color: #006699;
    font-weight: bold;
    }


    #footer {
    width: 900px;
    clear: both;
    color: #fff;
    background: #006699;
    margin: 0px 0px 10px 0px;
    padding: 10px;
    }


    Thanks,
    Sarahb

  2. #2
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's because body is the containing block. Give #wrapper position:relative to make it be the containing block instead.

    Why are you using absolute positioning anyway?

    P.S. It would be helpful if you put your code between [code][/code] tags in the future.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  3. #3
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Kravvitz hit the nail right on the head before I could. Using position: relative on the #wrapper would be the easy way to do it, but as he said, the easy way is not always the best way.

  4. #4
    SitePoint Zealot
    Join Date
    Jan 2004
    Location
    Iowa City, IA
    Posts
    121
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I wondered how people put their code in that way. Thanks for the heads up. I will use the [code] symbals from now on.

    I'll try the relative positioning and see what happens.

    Thanks,
    Sarah

  5. #5
    SitePoint Zealot
    Join Date
    Jan 2004
    Location
    Iowa City, IA
    Posts
    121
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    http://www.sitesbysarah.com/bailey/main.htm

    Ok, I changed the wrapper to "position: relative" and removed the absolute positioning from the "form div". Now the whole right column jumps down to the bottom of the page.

    I tried adding the float property to the "form" div but that didn't seem to change anything.

    What am I doing wrong?

    Thanks,
    sarah

    Code:
    /* CSS Document */
    
    * { padding: 0; margin: 0; }
    
    body {
    margin: 0;
    padding 0;
     font-family: Arial, Helvetica, sans-serif;
     font-size: 13px;
     background: #006699;
    }
    
    
    
    #wrapper { 
    position: relative;
     margin-right: auto;
    margin-left: auto;
    padding: 0;
     width: 922px;
    }
    
    
    #header {
     width: 900px;
     float: left;
     background-image: url(images/NEW_HEADER_NEW_TEXT.jpg);
    background-repeat: no-repeat;
    background-position: top center;
    height: 190px;
    padding: 10px 0px 0px 0px;
    margin: 10px 0px 0px 0px;
    border-bottom: 35px solid #006699;
    }
    
    #corner_logo {
    position: absolute;
    top: 11px;
    left: 670px;
    
    }
    
    
    h1 {
    font-size: 1em;
    color: #006699;
    font-weight: bold;
    padding: 0 0 0 19px;
    margin-bottom: 15px;
    }
    
    
    a:link {
    color: #006699;
    text-decoration: underline;
    }
    
    a:visited{color: #006699;
    text-decoration: underline;
    }
    a:hover{color: #fff;
    text-decoration: none;}
    
    p {
    color: #006699;
    padding: 0 20px;
    }
    
    
    
    
    #leftcolumn { 
    border-top: 1px solid #fff;
    border-right:1px solid #fff;
    border-left: 1px solid #fff;
    border-bottom:1px solid #fff;
    background-image:url(images/navigation_bkgd_tile.gif);
    background-repeat: repeat-y;
    background-color: #6ba7eb;
     margin: 0px 1px 5px 0px;
     padding: 10px;
     width: 195px;
     height: 950px;
     float: left;
    } 
     
     #leftnav {
    text-decoration: none;
    }
    
    
    #leftcolumnnav ul , #leftnav ul li{margin:0;}
    #leftcolumnnav ul li a {display:block;padding:5px 18px;}
    
    
    
    #leftnav ul {
    list-style: none;
    margin-bottom: 10px;
    }
    
    #leftnav li {
    margin-bottom: 10px;
    border-bottom: 1px solid #fff;
    padding: 5px;
    
    }
    
    #leftnav li a:link {
    display: block;
    background-color: #6ba7eb;
    color: #fff;
    text-decoration: none;
    }
    
    #leftnav a:visited{
    color: #fff;
    text-decoration: none;
    }
    
    
    
    #leftnav li a:hover {
    background-color: #D4E4FA;
    color: #006699;
    font-weight: bold;
    
    }
    
    
    .leftsubtitle {
    
    background:  #015A9E;
    padding: 5px 5px;
    margin-bottom: 5px;
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    }
    
    .topleftsubtitle {
    
    background:  #015A9E;
    padding: 5px 5px;
    margin-bottom: 5px;
    color: #fff;
    font-weight: bold;
    border-top: 1px solid #fff;
    text-decoration: none;
    }
    
    
     
    
    #content { 
     float: left;
     border: 2px solid #fff;
     background-image:url(images/content_bkgd_tile_gif.gif);
    background-repeat: repeat;
     background-color: #D4E4FA;
    height: 948px; 
     margin: 0px 1px 5px 0px;
     padding: 10px;
     width: 435px;
     display: inline;
     
    }
    
    
    #rightcolumn { 
     border-top: 1px solid #fff;
    border-right:1px solid #fff;
    border-left: 1px solid #fff;
    border-bottom:1px solid #fff;
      background-image:url(images/navigation_bkgd_tile.gif);
    background-repeat: repeat-y;
    background-color: #6ba7eb;
     margin: 0px 0px 5px 0px;
     padding: 10px;
     width: 195px;
     float: left;
     height: 950px;
     }
    
    #rightcolumnnav {
    background-color: #6ba7eb;
       }
    
    
    #rightcolumnnav ul , #rightcolumnnav ul li{margin:0;}
    #rightcolumnnav ul li a {display:block;padding:5px 8px;}
    
    #rightcolumnnav {
    
    padding: 0px;
    margin: 0px;
    width: 100%;
    }
    
    
    
    #rightcolumnnav ul {
    list-style: none;
    margin: 0px;
    padding: 0;
    
    }
    
    #rightcolumnnav li {
    margin-bottom:0px;
    border-bottom: 1px solid #fff;
    }
    
    #rightcolumnnav li a:link {
    display: block;
    padding-left 5px;
    background-color: #6ba7eb;
    color: #fff;
    text-decoration: none;
    }
    
    #rightcolumnnav a:visited{
    color: #fff;
    text-decoration: none;
    }
    
    
    
    #rightcolumnnav li a:hover {
    background-color: #D4E4FA;
    color: #006699;
    }
    
    .rightcolumnnav_static_items {
    background-color: #D4E4FA;
    color: #006699;
    padding: 5px 12px;
    }
    
    
    
    .toprightcolumnsubtitle
    {
    background:  #015A9E;
    padding: 5px 5px;
    margin-bottom: 5px;
    color: #fff;
    font-weight: bold;
    border-top: 1px solid #fff;
    }
    
    
    .rightcolumnsubtitle
    {
    background:  #015A9E;
    padding: 10px 10px;
    margin-bottom: 5px;
    color: #fff;
    font-weight: bold;
    }
    
    
    
    #form {
    float: left;
    color: #fff;
    font-weight: bold;
    }
    
    
    #disclaimer {
    font-size: .8em;
    text-align: center;
    font-style: italic;
    line-height: 1.2;
    margin-top: 50px;
    }
    
    #ad {
    font-size: .9em;
    width: 280px;
    padding: 5px;
    border-top: 1px dotted white;
    border-bottom: 1px dotted white;
    font-size: .9em;
    
    }
    
    #address {
    position: absolute;
    top: 213px;
    left: 100px;
    width: 800px;
    color: #fff;
    font-size: .9em;
    font-weight: 700;
    text-align: center;
    }
    
    #address a:link {
    color: #fff;
    text-decoration: none;
    }
    
    #address a:visited{color: #fff;
    text-decoration: none;
    }
    
    #address a:hover{
    color: #D4E4FA;
    text-decoration: underline;}
    
    
    
    
    
    /*Navigation on download page */
     
     #downloadnav {
     width: 300px;
    font-family: Arial, Helvetica, sans-serif;
    background-color:  #D4E4FA;
    text-align: center;
    padding: 20px 0 0 70px;
    }
    
    #downloadnav ul {
    list-style: none;
    margin: 9px;
    
    
    }
    
    #downloadnav li {
    margin: 0;
    padding: 5px;
    border-bottom: 1px solid #fff;
    
    
    }
    
    #downloadnav li a {
    display: block;
    padding-left: 10px;
    background-color: #6699FF;
    color: #fff;
    text-decoration: none;
    }
    
    #downloadnav li a:hover {
    background-color: #D4E4FA;
    color: #006699;
    font-weight: bold;
    }
    
    
    #footer { 
     width: 900px;
     clear: both;
     color: #fff;
      background: #006699;
     margin: 0px 0px 10px 0px;
     padding: 10px;
    }

  6. #6
    SitePoint Enthusiast
    Join Date
    May 2006
    Location
    London
    Posts
    63
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Sarah,

    is this still causing you problems?

    I ask because when I look at it in IE6.0 at the office the right hand column is pushed to the bottom of the page underneath the rest of your content, however when I look at it in Firefox 2.0, apart from the slight misalignment of the 'Please visit us...' image/box in your header the rest of the page aligns correctly?

    I just wondered wether your browser was throwing you a red herring?

    Tim.

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

    If you are trying to place something at the bottom of a column then I have a demo here that explains the concept in detail and may be useful.

    http://www.pmob.co.uk/temp/text-at-bottom3.htm

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    The column has dropped in IE because you have made the table 364pxx wide yet the column it sits in is only about 200px wide.

    Code:
            <div id="form">
                <form name='bailey' action='thisscript.php' method='POST'>
                    <table width="364" border="0" cellspacing="0" cellpadding="0">
                        <tr>
                            <td width="364">Name:</td>
    Make sure the width actually fits in your column or IE will stretch the column to accommodate it thus resulting in the column being too big to fit at the side and therefore drops down underneath.

  9. #9
    SitePoint Zealot
    Join Date
    Jan 2004
    Location
    Iowa City, IA
    Posts
    121
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    Your right, in IE it is messed up, but in Firefox the basic page looks fine. The problem is that my friend who I'm doing the site for uses IE so I need to figure out what is messing up the page in IE. Ugh...

    I will check out the link you provided Paul. Maybe that will help me.

    Sarah

  10. #10
    SitePoint Zealot
    Join Date
    Jan 2004
    Location
    Iowa City, IA
    Posts
    121
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul,

    Thanks for catching that. I thought it must be a width issue, but instead of looking in my html, I've been scouring my css trying to find the villan. I forgot that I had put that in a table and a size was embedded in that. I'll try changing the size there and see what happens.

    thanks,
    sarah

  11. #11
    SitePoint Zealot
    Join Date
    Jan 2004
    Location
    Iowa City, IA
    Posts
    121
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you all for your help. I changed the table size and it corrected the problem.

    Sarah


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
  •