SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Jul 2006
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    need help with floated column

    i swear i'm pulling my hair out over this one! the right column is floated and is posing 2 problems when it's longer than the main section:

    - it would sometimes collapse to the height of the main section depending on where the mouse pointer is (ie. when it's over the thumbnail images)

    - it doesn't seem to be extending the container height that it's in since the background stops at the height of the main section.

    here's the page...http://test.esf.org.hk/esf_english/g...006_spring.htm

    and here's the css...would really really appreciate any help on this. i seriously have a love/hate relationship with css. it's great until i come across these snags and end up spending hours getting nowhere fast!

    body {
    font-family: verdana;
    color: black;
    font-size: 11px;
    background-color: white;
    }

    #container {
    width: 749px;
    height: 100%;
    margin: 0;
    padding: 0;
    }

    #mainsection {
    margin: 0;
    background-image: url("../images/bluebg.jpg");
    background-repeat: repeat-y;
    }

    #relatedlinks { /* right column */
    float: right;
    margin: 0;
    padding: 25px 10px 10px 10px;
    width: 194px;
    line-height: 16px;
    }

    .content {
    margin-right: 214px;
    padding: 20px 15px 15px 15px;
    border-right: solid gray 1px;
    line-height: 16px;
    }

    #footer {
    width: 734px;
    padding: 10px 0 0 15px;
    margin: 0;
    font-size: 10px;
    color: gray;
    border-top: 1px solid gray;
    line-height: 16px;
    }

    #headerlogo {
    float: left;
    height: 60px;
    width: 350px;
    margin: 0;
    background-image: url("../images/top-left_corner.jpg");
    background-repeat: no-repeat;
    background-color: #1C0069;
    }

    #headerlogo img {
    padding-top: 15px;
    padding-left: 20px;
    }

    * html #headerlogo {
    margin-right: -3px;
    }

    #header {
    background-color: #1C0069;
    border-bottom: white solid 1px;
    margin-left: 350px;
    height: 60px;
    padding: 0;
    background-image: url("../images/bottom-right_corner.jpg");
    background-repeat: no-repeat;
    background-position: bottom right;
    }

    * html #header {
    margin-left: 347px;
    }

    #header p {
    text-align: right;
    color: white;
    padding: 38px 20px 0 0;
    font-size: 10px;
    }

    #header a, #header a:hover {
    color: white;
    background-color: transparent;
    }

    div.float
    {
    float: left;
    border-right: 1px solid white;
    margin: 0;
    padding: 0;
    }

    * html div.float {
    border-bottom: 2px solid white;
    }

    div.noborder {
    border-right: 0;
    }

    div.silverline
    {
    border-bottom: gray solid 1px;
    }

    #navmenu { /* menu div */
    margin: 0;
    padding: 0;
    }

    #nav, #nav ul { /* all lists */
    padding: 0;
    margin: 0;
    list-style: none;
    }

    #nav a {
    display: block;
    width: 106px;
    text-align: center;
    font-weight: bold;
    text-decoration: none;
    color: black;
    font-size: 11px;
    padding: 5px 0 5px 0;
    }

    #nav li { /* all list items */
    float: left;
    width: 106px; /* width needed or else Opera goes nuts */
    text-align: left;
    border-right: 1px solid gray;
    border-bottom: 1px solid gray;
    background-color: silver;
    }

    li#last /* faqs tab on menu*/
    {
    width: 107px;
    border-right: none;
    }

    #nav a:hover {
    color: white;
    }

    #nav li li {
    border-bottom: 0;
    }

    #nav li li a {
    font-weight: normal;
    width: 86px;
    padding: 10px;
    }

    #nav li ul { /* second-level lists */
    position: absolute;
    border-left: 1px solid gray;
    border-bottom: 1px solid gray;
    border-right: 1px solid gray;
    margin-left: -1px;
    width: 106px;
    left: -3000px; /* using left instead of display to hide menus because display: none isn't read by screen readers */
    }

    * html #nav li ul {
    border-right: 0;
    }

    #nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */
    left: auto;
    }

    .content p {
    padding-bottom: 10px;
    margin: 0;
    }

    .content h2 {
    padding-bottom: 3px;
    margin: 0;
    font-size: 11px;
    font-weight: bold;
    }

    a {
    color: blue;
    text-decoration: none;
    }

    a:hover {
    color: black;
    background-color: silver;
    }

    a img {
    border: 0;
    }

    #headerlogo a:hover {
    background-color: transparent;
    }

    .clearfloat {
    clear: both;
    margin: 0;
    padding: 0;
    }

    #footer p {
    margin: 0;
    padding: 0;
    }

  2. #2
    SitePoint Member
    Join Date
    Jul 2006
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for the post but i'm not sure if i'm doing something wrong but your suggestion didn't seem to work. i inserted the additional styles but there doesn't seem to be any change to the two problems i listed. anyone other suggestions??


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
  •