Need help with CSS

[bishop]

I've moved this tread from business & legal issues.

I'm pretty new the whole css thing and have ran into a few problems on a site I'm designing for a client.

The site is munstermushrooms.ie
The css is munstermushrooms.ie/style/style.css

On the site I have two main tables, the one headed with "quick links" and the one headed with "welcome to munster mushrooms ltd".


What I'm trying to do is to keep the 2 divs the exact same length, but can never do this at the bottom of the page.

I have read tons of articles on css and still can't get my head around this one.

I'm sure some of you here are pretty good with css and I would appreciate any advice.

Thank you all in advance.

 

[Jory]

You could make them both have a fixed height, or put them in a container div and make their height 100%.

 

[rockhoptec]

The easiest way is to add a wrapper around your columns here is a great article that explains the wrapper/container issue.

http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

Hopefully this helps, any questions let me know.

 

[bishop]

Thanks people. But I can't seem to get my head around this one. Here is the css code below, so if anyone can see what I'm doing wrong. I'm very new to css so be gentle:

BODY{margin:0px auto;font-size:13px;font-family:arial;color:#444444; background-color:#668B9E;}
.outer{width:942px;text-align:left; margin:0px auto;}
#headimage
{width:345px; height:180px; background-image:url(../images/flowers.jpg); background-repeat:no-repeat; float:left;; margin-bottom:2px;}
#rc1
{background-image:url(../images/rc1.jpg); background-repeat:no-repeat; width:16px; height:180px; float:left; }
#headerbg
{background-image:url(../images/bg.jpg); background-repeat:repeat-x; width:570px; height:180px; float:left; padding-left:11px;}
.name
{text-transform:uppercase; color:#fff; font-family:"century Gothic"; font-size:36px; padding-top:60px; letter-spacing:2px;}
.name2
{color:#0079B5;}
.tag
{font-weight:bold; color:#555555; font-size:12px; padding-left:10px; letter-spacing:2px;}
#left-nav
{width:250px; float:left; background-image:url(../images/left.jpg); background-repeat:no-repeat; background-color:#FFFFFF;}
#right-nav
{width:689px; float:left; background-image:url(../images/right.jpg); background-repeat:no-repeat; margin-left:2px;background-color:#FFFFFF;}
#gap2
{width:10px; height:100px; float:left; font-size:1px;}
#news-bg
{width:200px; height:158px; padding-top:10px; text-align:left; border-bottom:1px dashed #D2D2D2; margin:0 auto 5px auto;}
.gap
{height:0px; font-size:1px; clear:left;}
.date
{width:66px; height:18px; background-color:#5C9910; color:#ffffff; font-family:tahoma; font-size:11px; font-weight:bold; line-height:18px; padding-left:6px;}
.news-txt
{text-align:justify; color:#3B3B3B; font-family:tahoma; font-size:11px; padding-top:6px;}
a{color:#177ABD; text-decoration:underline;}
a:hover{color:#177ABD; text-decoration:none;}
.read-more
{font-size:11px; height:20px; line-height:20px; text-transform:uppercase; font-weight:bold; font-family:tahoma;}
.read-more a
{color:#1170B0; text-decoration:underline;}
.read-more a:hover
{color:#1170B0; text-decoration:none;}
#main
{text-align:justify; padding:20px;}
#main img { float:left;width:180px; margin:10px; border:2px solid #999999;}
.heading
{height:45px; line-height:45px; padding-left:25px; text-transform:uppercase; font-weight:bold; color:#ffffff; font-family:"trebuchet MS"; font-size:15px; text-align:left;}
.leftcolumn{
width:200px;
padding-top:5px;
padding-left:20px;
float:left;
}
.leftcolumn ul
{
list-style-type: none;
padding-left:0;
margin:0;
text-align: left;
width:100%;
padding-top:2px;
}
.leftcolumn ul li{
padding-top:6px;
padding-bottom:6px;
border-bottom:1px solid #E8D9BD;
margin:0;
}
.leftcolumn ul li a
{
text-align: left;
padding-left: 20px;
font-size:12px; letter-spacing:1px;
text-decoration: none;
color: #4E4739;
}
.leftcolumn ul li a:hover
{
color: #4E4739;
padding-left: 20px;
text-decoration:underline;
}
#rc4{background-image:url(../images/rc4.gif); background-repeat:no-repeat; width:9px; height:59px; float:left;font-size:1px;margin-top:10px;}
#rc5{background-image:url(../images/rc5.gif); background-repeat:no-repeat; width:9px; height:59px; font-size:1px;margin-top:10px; float:left;}
#bottom-bg{width:924px; background-color:#ffffff; height:59px; float:left; margin-top:10px;}
.clear{clear:both;}

/* Bottom*/
#bottom{width:680px; padding-top:10px; margin:0 auto;}
.sap3
{width:1px;float:left;height:32px;line-height:32px;color:#000000;}
.bottomlink
{width:132px;text-align:center;height:32px;line-height:32px;font-weight:bold;text-transform:uppercase;float:left; font-family:"trebuchet MS"; font-size:12px;}
.bottomlink a
{color:#177ABB;text-decoration:none;}
.bottomlink a:hover
{text-decoration:none;color:#000000;}