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 Coder
    Join Date
    Nov 2007
    Location
    Pacific Northwest
    Posts
    26
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Help me get this column background to work

    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?

    Code:
    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:

    Code:
    <!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>
    Who ranks as the highest? One who does not harm anything. One who never retaliates. One who is always at peace regardless of the other person's disposition. - Buddha

  • #2
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    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:
    Code:
    #content-right {
    	width : 160px;
    	float:right;
    	background-color:#CCCCCC;
    	height:610px;
    }
    See if it helps

  • #3
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,849
    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)


  •  

    Posting Permissions

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