...

View Full Version : Help me get this column background to work



celticsaddict
02-27-2008, 09:54 AM
Hi,
This is the tiny url: http://tinyurl.com/3xfgg9

I'm having a lot of trouble with the grey column on the right-hand side. I want it to meet up with the content block (the one with the black borders).

What am I doing wrong?


Here's the CSS:

/* CSS Document */

* {
background-color : #ffffff;
margin : 0;
padding : 0;
font-family:Arial, Helvetica, sans-serif;
}
.headline {
font-size : 18px;
font-weight : bold;
margin-left : 20px;
}
#div-img {
background : url(truck-img.gif) no-repeat top right;
display : block;
height : 111px;
z-index : 3;
position : relative;
}
#header-logo {
background : url(header-bgv3.gif);
height : 116px;
position : relative;
overflow : hidden;
top : -17px;
z-index : 2;
margin-bottom: -18px;
}
#header-logo .h1title {
position : absolute;
margin-left : 140px;
font-size : 32px;
left : 132px;
top : 36px;
color : #fff;
background : transparent;
}
#wrapper {
height: auto;
width: 850px;
position:relative;
margin: 0 auto;
background-image:url(bg-r.gif);
background-repeat: repeat-y;
background-position: top right;
min-height:100%;
voice-family: "\"}\"";
voice-family: inherit;
height: auto;
}
#wrap{padding-bottom: 80px;
}
.boxes {
background-color: #E31936;
float: left;
height: 30px;
width: 23%;
line-height: 30px;
text-align: center;
margin-left: 2%;
color: #FFFFFF;
}
.boxesL {
background-color: #E31936;
float: left;
height: 30px;
width: 23%;
line-height: 30px;
text-align: center;
color: #FFFFFF;
margin-right: 1%;
}
.boxesR {background-color: #E31936;
float: right;
height: 30px;
width: 23%;
line-height: 30px;
text-align: center;
margin-left:3%;
color: #FFFFFF;
}
.boxesbelow {
float: left;
width: 23%;
line-height: 12px;
text-align: left;
margin-left: 2%;
font-size:12px;
}
.boxesbelowR {
float: right;
width: 23%;
line-height: 12px;
text-align: left;
font-size:12px;
display: inline;
}
.boxesbelowL {
float: left;
width: 23%;
line-height: 12px;
text-align: left;
margin-right: 1%;
font-size:12px;
}
#main-menu {
float : left;
width : 170px;
line-height : 3;
}
#main-menu a {
text-decoration : none;
color: #CC0033;
font-weight:bold;
}
#inner-wrap {width:680px;
background-image:url(bg-r.gif);
background-repeat: repeat-y;
background-position: top right;
height:auto;
float:left;
}
#content-wrap {
float : left;
position:relative;
background-image: url(bottom-right-corner.gif);
background-repeat:no-repeat;
background-position:bottom right;
width: 660px;
}
#content-left {
width : 519px;
float : left;
border-left-width : 1px;
border-left-style : solid;
border-left-color : #000000;
border-bottom-width : 1px;
border-bottom-style : solid;
border-bottom-color : #000000;
/*margin-bottom : 10px;
position : relative;
top : -18px;*/
z-index : 1;
}
#greyfill {
position: absolute;
top: 149px;
right:0px;
display:block;
width:159px;
background-color:#CCCCCC;
height: 45px;
}

#content-right {
width : 160px;
float:left;
background-color:#CCCCCC;
}
#content-right p {
font-family : Arial, Helvetica, sans-serif;
font-size : 12px;
line-height : 22px;
margin-top : 10px;
margin-right : 15px;
margin-bottom : 15px;
margin-left : 15px;
background : #ccc;
}
#content-left p {
font-family : Arial, Helvetica, sans-serif;
font-size : 14px;
line-height : 22px;
margin-top : 10px;
margin-right : 25px;
margin-bottom : 10px;
margin-left : 20px;

}
#footer{
clear:both;
background: #fff;
display:block;
line-height:30px;
text-align:center;
font-size:14px;
z-index:99;
height: 50px;
}
p.box{
margin: 0;
font-size:24px;
}
#content-leftM {

width : 519px;
float : left;
/*margin-bottom : 10px;
position : relative;
top : -18px;*/
z-index : 1;
}


Here's the HTML:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Lily Transportation Company - Dedicated Logistics Systems</title>
<link href="main.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="wrapper">
<div id="div-img"></div>
<div id="header-logo"><h1 class="h1title">Lily Dedicated Logistics Systems </h1></div>



<div id="main-menu"><!-- #BeginLibraryItem "/Library/main-menu.lbi" --><p><a href="template.html">Home</a></p>
<p>What is DLS?</p>
<p><a href="business-model.html">Business Model</a></p>
<p><a href="anticipated-benefits.htm">Anticipated Benefits</a></p>
<p><a href="case-studies.htm">Clients</a></p>
<p>History</p>
<p>Leasing Partners</p>
<p><a href="community.html">Community</a></p>
<p>Contact </p>
<!-- #EndLibraryItem --><p><a href="main.htm"></a></p>
<p>&nbsp;</p>
</div><div id="inner-wrap">
<div id="content-left">
<h2 class="headline">SINCE 1958</h2>
<p>With more than forty years experience operating dedicated contract
carriage systems throughout the United States, Lily has continually developed
and refined operating systems and processes that insure high
level performance. Lily is structured around well-defined operating
practices and ingrained with a commitment to documentation and decision
processes based on confirmed data points.</p>
<p>Each Lily Dedicated Logistics System is structured to be self-sustaining
with a commitment to continuous improvement. While the concept of
clustered operations providing common support might seem appealing
on paper, in practice it is a process of prioritizing customers against one
other. For this reason each Lily operation has an established network of
resources to respond to the natural variations in demand due to seasonality,
customer order patterns and required personnel absences. We
have found that in most operations the optimal labor model is a combination
of full time and part time drivers. This model provides flexibility
to better match distribution cost with distribution requirements. In addition,
the ability for local management to utilize regular part time drivers
to meet vacation and holiday absences insures continuous
performance at a high level.</p>
<p>Dedicated Logistics has been widely accepted in the transportation industry.
However, the number of providers who are willing to dynamically
mold their services to your requirements and evolve with you over
the years are few. We encourage you to look closely at the business
model that Lily has developed and the high level of service your customers
will receive.</p>
</div>
<div id="content-right">
<p>2007 Top 25
Dedicated Contract
Carrier</p>
<p>2007 Top 100 Motor Carrier</p>
<p>Transportation Partner</p>
</div>
<div id="greyfill"></div>
</div>
</div><!--Closing Wrapper-->
<!--//<div id="footer">&copy; 2008 Lily Transportation Corporation. All Rights Reserved.</div>-->
</body>
</html>

rangana
02-27-2008, 11:05 AM
Adding height:100&#37; in the content-right div should keep you going, but since you haven't enclose content-right div and content-left div in one div(parent).
Having specific height on content-right div will fix this issue.

Change your #content-right div to:


#content-right {
width : 160px;
float:right;
background-color:#CCCCCC;
height:610px;
}


See if it helps :D

abduraooft
02-27-2008, 11:16 AM
Have a look at http://www.alistapart.com/articles/fauxcolumns/



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum