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 12 of 12
  1. #1
    New Coder
    Join Date
    May 2008
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Bottom of column

    Hi. I'm trying to sort out a layout problem - using css (I know I can do it with tables, but I want css!!!).

    Basically, I have a page with 2 columns under a header and with a footer at the bottom. The 2nd column can vary in length/depth a fair bit and I want to place a small bit of text with pictures and links at the bottom of the left column (above the footer section and in-line with the bottom of the right column).

    I've tried and researched loads - but found nothing.

    Please help!

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New Coder
    Join Date
    May 2008
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I've looked at all the samples - but none do what I want!

  • #4
    Regular Coder
    Join Date
    Apr 2008
    Location
    Manila, Philippines
    Posts
    263
    Thanks
    3
    Thanked 12 Times in 12 Posts
    like this?? hey this is my first page that i have made so please don't laugh at it..

    i think you were looking for a layout like this..

    www.jhayfops.ueuo.com/un2.html

  • #5
    New Coder
    Join Date
    May 2008
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Nope - still not what I want!!!

    Page looks pretty good to me tho!!

  • #6
    New Coder
    Join Date
    May 2008
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts
    What I want is this:

    On the '2 columns - content first' sample at http://bonrouge.com/2c-hf-content1st.php I want to be able to put a bit of text and a couple of small links/images at the bottom of the purple left hand 'column' (just above the footer - in line with the bottom of the last box and the last 3 lines of text)

  • #7
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Oh.. that's pretty simple in the above layout, if we effectively use absolute positions. Say
    Code:
    div#myspecial{
    position:absolute;
    left:0;
    bottom:80px;
    /*width:200px;
    height:  if required*/
    }
    Code:
    <div id="content">
     <div id="myspecial">
                 <!-- All the required stuffs here-->
    
     </div>
    <!-- all the rest of codes below -->
    PS: It assumes #content has position:relative; and #footer has height:80px;
    Last edited by abduraooft; 05-16-2008 at 04:58 PM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #8
    New Coder
    Join Date
    May 2008
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I know I'm stupid!!

    The page is as follows;

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <meta name="robots" content="index, follow" />
    <link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
    </head>
    <body>
    <div id="content">
    <div id="header">
    <h1>This is a heading</h1>
    <br />
    <h2>Bit more text</h2>
    </div>
    <div id="navigation">
    <ul>
    <li><a href="index.php" title ="home">Home Page</a></li>
    <li><a href="news.php" title ="Meeting the Needs of Small Businesses">Services Included</a></li>
    <li><a href="features.php" title ="Options">Optional Extras</a></li>
    <li><a href="extras.php" title ="State of the art facilities in historic surroundings">Conference Facilities</a></li>
    <li><a href="available.php" title ="Find out which offices are currently available">Floor plan</a></li>
    <li><a href="locate.php" title ="See where we are located">How To Find Us</a></li>
    </ul>
    </div>
    <div class="right">
    <strong>Meeting The Needs Of Small Businesses</strong><br />
    Setting up an office is both affordable, quick and simple whatever the needs of your business. We offer an attractive workplace environment tailored to your needs, enabling you to maximise your productivity and control your monthly outgoings. We provide a range of services including:
    <ul style="padding-left: 2em; text-indent: 0em;">
    <li>Text</li>
    <li>Text</li>
    <li>Text Text TextTextText TextText TextTextText Text Text TextTextText TextText TextTextText Text Text TextTextText TextText TextTextText Text Text TextTextText TextText TextTextText Text TextTextText TextText TextTextText Text Text TextTextText TextText TextTextText Text Text TextTextText TextText TextTextText Text Text TextTextText TextText TextTextTex</li>
    <li>Text</li>
    <li>Text</li>
    <li>Text</li>
    <li>Text</li>
    <li>Text</li>
    <li>Text</li>
    <li>Text Text TextTextText TextText TextTextText Text Text TextTextText TextText TextTextText Text Text TextTextText TextText TextTextText Text Text TextTextText TextText TextTextText Text TextTextText TextText TextTextText Text Text TextTextText TextText TextTextText Text Text TextTextText TextText TextTextText Text Text TextTextText TextText TextTextText Text TextTextText TextText TextTextText Text Text TextTextText TextText TextTextText Text Text TextTextText TextText TextTextText Text Text TextTextText TextText TextTextTextText</li>
    <li>Text</li>
    <li>Text</li>
    <li>Text Text TextTextText TextText TextTextText Text Text TextTextText TextText TextTextText Text Text TextTextText TextText TextTextText Text Text TextTextText TextText TextTextText Text TextTextText TextText TextTextText Text Text TextTextText TextText TextTextText Text Text TextTextText TextText TextTextText Text Text TextTextText TextText TextTextTex</li>
    <li>Text</li>
    <li>Text</li>
    </ul>
    </div>
    <div class="left">
    <ul>
    <li><a title ="Marse">Home Page</a></li>
    <li><a title ="Meeting the Needs of Small Businesses">Serviced Offices</a></li>
    <li><a title ="Options">Additional Costs</a></li>
    <li><a title ="State of the art facilities in historic surroundings">Conference &amp; Meeting Rooms</a></li>
    <li><a title ="Find out which offices are currently available">Available Offices</a></li>
    <li><a title ="See where we are located">Location</a></li>
    <li><a title="Secure user login" rel="external" >Login</a></li>
    </ul>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    </div>
    <div style="clear: both;"> </div>
    <div id="footer">
    Business Centre<br />
    Phone us on 01235 123456,</div>
    </div>
    </body>
    </html>



    And the external css is;

    * {
    padding: 0;
    margin: 0;
    }

    body {
    margin:0;
    padding: 0;
    background: #111;
    color: #444;
    font: 12px Arial, Verdana, Tahoma, sans-serif;
    line-height: 20px;
    }

    img {border: none;}
    a{ color: #173D7F; text-decoration: none; }
    a:hover { color: #000; }

    #content {
    width: 760px;
    margin: 20px auto;
    padding: 10px;
    background: #fff;
    }

    #header {
    background: #000 url(images/header.gif) no-repeat;
    height: 90px;
    }
    #header h1 {
    font-size: 22px;
    letter-spacing: -1px;
    padding: 15px 0 0 10px;
    color: #fff;
    }
    #header h1 a {
    color: #fff;
    text-decoration: none;
    }
    #header h1 a:hover {
    color: #ccc;
    }
    #header h2 {
    font-size: 14px;
    color: #ccc;
    padding: 0 0 0 10px;
    }

    #navigation {
    background: #111 url(images/menu.gif) repeat-x;
    height: 30px;
    line-height: 30px;
    margin: 10px auto;
    }
    #navigation li {
    float:left;
    list-style-type:none;
    border-right:1px solid #444;
    }
    #navigation li a {
    font-size: 10px;
    display:block;
    padding:0 10px;
    text-decoration:none;
    color: #fff;
    letter-spacing:1px;
    }
    #navigation li a:hover {
    background: #333 url(images/menuover.gif) repeat-x;
    color:#fff;
    text-decoration:none;
    }
    .left {
    float: left;
    width: 220px;
    padding: 10px;
    line-height: 14px;
    }
    .left h2 {
    margin-top: 10px;
    font: bold 12px Verdana, 'Trebuchet MS', Sans-serif;
    padding: 5px 0 5px 5px;
    border-bottom: 1px dotted #999;
    }
    .left ul {
    color: #999;
    text-align: left;
    margin: 3px 0 8px 0;
    padding-left: 20px;
    text-decoration: none;
    list-style-type:square;
    }
    .left ul li {
    padding: 2px 0 2px 0px;
    margin: 0 2px;
    }
    .left ul a {
    font-weight: 600;
    color: #173D7F;
    }
    .left ul a:hover { color : #333; }

    .right {
    float: right;
    width: 470px;
    padding: 10px;
    margin-right: 20px;
    }
    .right h2 {
    padding: 2px 0 5px 0px;
    font: bold 14px Verdana, 'Trebuchet MS', Sans-serif;
    color: #444;
    border-bottom: 1px dotted #999;
    margin-bottom: 5px;
    margin-top: 10px;
    }

    #footer {
    background: #222;
    color: #eee;
    margin-top:20px;
    line-height: 20px;
    text-align: center;
    }
    #footer a { color: #aaa; text-decoration: none; }
    #footer a:hover { color: #777; }




    Can you help - or I'll **** it up!

  • #9
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    I put it here.
    I have put borders on the left and right divs.

    http://exitfegs.co.uk/16c.html

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #10
    New Coder
    Join Date
    May 2008
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That looks almost right!!!

    The only thing is that the bottoms don't line up - I'm using FireFox, is that the reason?

  • #11
    New Coder
    Join Date
    May 2008
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Just had a better look - I can see a couple of 'problems';
    Firstly, as previously mentioned, I want the bottoms to line up.
    Secondly, this one might be minor, on the left column, I want text at the top and different text at the bottom.

  • #12
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    http://exitfegs.co.uk/16c.html

    This is done using Javascript to equalise the two columns to the height of the greater.

    <!-- CSS Equal Columns Height script (v1.01) - By ddadmin -->

    There are others ways. If you look at the Sources program in my signature, right hand column last section (Faux Columns) . There are other options you may care to check.

    I have made the left and right divs as #divs not classes. Divs are for one offs and classes for things that need to be used more than once. You can vary the text using a class. Thus <p class ="text1">
    The css like
    .text1{your choice here, font-family:serif;}

    You could of course have two divs, one above the other on the left side.
    Frank
    Last edited by effpeetee; 05-17-2008 at 11:53 AM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.


  •  

    Posting Permissions

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