...

View Full Version : Bottom of column



theMaster
05-16-2008, 01:59 PM
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!

abduraooft
05-16-2008, 02:18 PM
http://bonrouge.com/2c-hf-fluid.php Or
http://bonrouge.com/2c-hf-fixed.php ?

theMaster
05-16-2008, 04:25 PM
I've looked at all the samples - but none do what I want!

jhaycutexp
05-16-2008, 04:31 PM
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

theMaster
05-16-2008, 04:37 PM
Nope - still not what I want!!!

Page looks pretty good to me tho!!

theMaster
05-16-2008, 05:17 PM
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)

abduraooft
05-16-2008, 05:53 PM
Oh.. that's pretty simple in the above layout, if we effectively use absolute positions. Say

div#myspecial{
position:absolute;
left:0;
bottom:80px;
/*width:200px;
height: if required*/
}


<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;

theMaster
05-16-2008, 06:07 PM
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!

effpeetee
05-16-2008, 08:29 PM
I put it here.
I have put borders on the left and right divs.

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

Frank

theMaster
05-16-2008, 09:35 PM
That looks almost right!!!

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

theMaster
05-16-2008, 09:44 PM
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.

effpeetee
05-16-2008, 10:37 PM
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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum