Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Image @ bottom left of a 2 column layout

    OK. Probably a bit of a newbie question but I'm stumped...

    Imagine a standard webpage layout with a header and 2 column layout underneath with a column for the menu options on the left and the main content on the right.

    I'm trying to get a 'sponsor' logo to sit under the menu options but the bottom of the column sitting level with the bottom of the content in the main content column. No matter what I try, the logo always ends up tucking itself directly under the menu options.

    Now this site has several pages and the 'content' on each page might be any length so I don't want to fix it solid with hard positioning. Also, the end site will be editable via Contribute so the CSS should be able to deal with any amendments on the mainContent column's content without needing to tweak the css.

    The html I have boils down to this..

    ----

    <div id="container">
    <div id="header">
    /* Header Logo and text */
    </div>
    <div id="sidebar">
    <div id="menulist">
    /* menu list */
    </div>
    <div id="sponsorlogo">
    <img src="sponsorlogo.png" width "150" height "100" />
    </div>
    </div>
    <div id="mainContent">
    /* Main blurb */
    </div>
    </div>

    ----

    The only bits of CSS that I have that deal with layout are...

    .container {
    width: 780px;
    margin: 0 auto;
    }

    .sidebar {
    float: left;
    width: 150px;
    }

    .mainContent {
    margin: 0 0 0 155px;
    }

    .sponsorlogo {
    display:block;
    position:absolute;
    bottom:0px;
    left:0px;
    }


    Any ideas on how make this work?

  • #2
    Regular Coder optimus203's Avatar
    Join Date
    Sep 2008
    Location
    CT
    Posts
    317
    Thanks
    22
    Thanked 16 Times in 15 Posts
    Does something like this work?

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
    #container {
    width: 780px;
    margin: 0 auto;
    }
    
    #sidebar {
    float: left;
    width: 150px;
    }
    
    #content {
    position: relative;
    width: 780px;
    height: auto;
    }
    #mainContent {
    margin: 0 0 0 155px;
    }
    
    #logo {
    position: absolute;
    bottom: 0;
    left: 0;
    } 
    </style>
    </head>
    <body>
    <div id="container">
      <div id="header">
      /* Header Logo and text */
      </div>
      
      <div id="content">
      
      <div id="logo">
        <img src="sponsorlogo.png" width "150" height "100" alt="sponsor logo" />
      </div>
      
      <div id="sidebar">
        <div id="menulist">
        menu list
        </div>
      </div>
      
        
      <div id="mainContent">
        /* Main blurb */<br />
        /* Main blurb */<br />
        /* Main blurb */<br />
        /* Main blurb */<br />
        /* Main blurb */<br />
        /* Main blurb */<br />
        /* Main blurb */<br />
        /* Main blurb */<br />
        /* Main blurb */<br />
        /* Main blurb */<br />
        /* Main blurb */<br />
        /* Main blurb */<br />
        /* Main blurb */<br />
        /* Main blurb */<br />
        /* Main blurb */<br />
        /* Main blurb */<br />
        /* Main blurb */<br />
        /* Main blurb */<br />
      </div>
      </div>
    </div> 
    
    </body>
    </html>
    Always thank those CF Users who help you solve issues...
    Connecticut Web Design

  • The Following 2 Users Say Thank You to optimus203 For This Useful Post:

    dale303 (06-23-2010), effpeetee (06-24-2010)

  • #3
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Great, thanks. Perfect.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •