Right column extending problem in CSS

Question

bjdmb 0 Newbie Poster

15 Years Ago

I have a site that is two column developed in CSS. Whenever the right column gets too long it appears that the right column starts to go under the right column and then the text and images start stacking on top of each other. The background also disappears. This happens when I add a third prodcontainer and then the fourth goes off the background and over to the right further.Any help would be much appreciated.

CSS Code:

body{
margin:0;
padding:0;
}

b{font-size: 110%;}
em{color: red;}

#maincontainer{
width: 1000px;
margin: 0 auto;
 /*Center container on page*/
background-image:url(../slices/bg-image.jpg);
background-repeat:repeat-y;
background-position:center;
}

#topsection{
padding-left:25px;
padding-top:0px;
margin:0;
height: 112px; /*Height of top section*/
}

#topsection h1{
margin: 0;
padding-top: 15px;
}

#contentwrapper{
float: left;
width: 100%;
background-image:url(../slices/bg-image.jpg);
background-repeat:repeat-y;
background-position:center;
}

#contentcolumn{
margin: 0 259px 0 235px; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/
}

#contentcolumnpage{
margin: 0 20px 0 235px; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/
}

#leftcolumn{
float: left;
width: 213px; /*Width of left column in pixel*/
margin-left: -975px; /*Set margin to that of -(MainContainerWidth)*/

}
.leftnav{
	background-image: url(../slices/bkg-nav-sides.png);
	background-repeat:repeat-y;
	width:213px;
	padding-top:0px;
	margin:0;
	
}
.leftnav ul li{
	list-style-type:none;
}
.leftnav ul li a{
	text-decoration:none;
	width:213px;
}

#rightcolumn{
float: left;
width: 259px; /*Width of right column*/
margin-left: -280px; /*Set left margin to -(RightColumnWidth)*/
}

#footer{
clear: left;
width: 100%;
background-image:url(../slices/footer-image.jpg);
background-repeat:repeat-y;
background-position:center;
color: #FFF;
text-align: center;
padding: 4px 0;
}

#footer a{
color: #FFFF80;
}


.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}
/* define type styles */

h1 {
	font:Arial, Helvetica, sans-serif;
	font-size:24px;
	color:#0e3263;
	margin-top:3px;
	}
h2  {
	font:Arial, Helvetica, sans-serif;
	font-size:18px;
	color:#0e3263;
	margin-top:3px;
	}	
.bluetitle {
	font:Arial, Helvetica, sans-serif;
	font-size:14px;
	color:#0e3263;
	font-weight:bold;
	}	
.text {
	font:Arial, Helvetica, sans-serif;
	font-size:12px;
	}	

/*define navigation elements */
.top{
	background:url(../slices/header.png) top no-repeat;
	height:112px;
}
.navlinks{
	background-image:url(../slices/navbutton.png);
	background-repeat:no-repeat;
	height:32px;
	margin-left:-15px;
	}
.navlinks a {	
	font-family:Arial, Helvetica, sans-serif;
	color:#00275c;
	font-size:14px;
	font-weight:bold;
	padding-left:38px;
	}
.logos {
	margin-left:25px;
	}

.navtop{
	background-image:url(../slices/bkg-nav-top.png);
	background-repeat:no-repeat;
	width:213px;
	height:19px;
	padding:0;
	margin:0;
	}
.navbottom{
	background-image:url(../slices/bkg-nav-bottom.png);
	background-repeat:no-repeat;
	width:213px;
	}
.contactus {
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	font-style:italic;
	color:#01204b;
	}	
.phone {
	font:Arial, Helvetica, sans-serif;
	font-size:24px;
	color:#0e3263;
	}	
.graybar {
	background-image:url(../slices/grayline.jpg);
	background-repeat:no-repeat;
	margin-left:18px;
	}		
/* Right side home page */

.adhometop{
	background-image:url(../slices/ad-home-top.png);
	width:259px;
	height:168px;
	background-repeat:no-repeat;
	}
.adhomemiddle{
	background-image:url(../slices/ad-home-middle.png);
	width:259px;
	height:174px;
	background-repeat:no-repeat;
	}
.adhomebottom{
	background-image:url(../slices/ad-home-bottom.png);
	width:263px;
	height:228px;
	background-repeat:no-repeat;
	}
.orangetitle{
	font-family:Arial, Helvetica, sans-serif;
	font-size:18px;
	font-weight:bold;
	color:#dc6a04;
	padding-left:15px;
	}			
.adtext{
	font:Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:bold;
	color:#0e3263;
	padding-left:15px;
	line-height:13px;
	}	
.adtext ul li {
	list-style-position: -5px;
	}
.homecontent{
	font:Arial, Helvetica, sans-serif;
	font-size:12px;
	padding:10px;
	}

/* product page*/

#prodcontainer{
	width:666px;
	margin:0 auto;
	padding: 10px;
	background-image:url(../slices/item-bkg.png);
	background-repeat:no-repeat;
	height:173px;
}

#prodmain{
	width:auto;
	display:block;
	padding:10px;
	}
	
#productimage
{
	width:100px;
	margin-right:25px;
	float:left;
}

#producttext
{
	width:350px;
	margin-right:25px;
	float:left;
}

#productprice
{
	width:100px;
	float:left;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#01204b;
	padding-left:5px;
}

.productnumber {
	font-family:Arial, Helvetica, sans-serif;
	font-size:48px;
	color:#01204b;
	}
.productnumbersmall{
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#01204b;		
	}
	
.orangetitlelg {
	font-family:Arial, Helvetica, sans-serif;
	font-size:24px;
	font-weight:bold;
	color:#dc6a04;
	}			
	#
.clear

{clear:both;}

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled</title>
</head>
<link rel="stylesheet" href="styles/main.css" type="text/css">
<body>
<div id="maincontainer">

  <div id="topsection"><img src="slices/header.png"></div>

   <div id="contentwrapper">
		<div id="contentcolumnpage">
			<div class="innertube">
				<div class="homecontent"><h1>Imagine a Hotspot the Size of a City&trade;</h1>
				  <p>With CLEAR&trade; you get internet over areas much, much larger than Wi-Fi. <br>
				    We&rsquo;re talking miles, not feet. So, forget about finding a hotspot&hellip; connect <br>
				    anywhere CLEAR has coverage.* Now you&rsquo;re truly mobile!</p>
				  <h2>CLEAR is Next Generation Mobile Broadband</h2>
				  <p>Powered by WiMAX, a Fourth Generation (4G) wireless technology, the 
				    CLEAR network combines the mobility you love about your cell phone with 
			      the speed you want from broadband.</p>
				  <p>That means you get the same full internet experience you get at home while on the go. So go ahead and watch videos, download music or send email&hellip; with CLEAR you can do what you want, where you want.</p>
				  <h2>CLEAR Gives You Choices</h2>
				  <p>Getting online should be easy. That&rsquo;s why CLEAR gives you choices:</p>
				  <p> * Service for home, around town or both<br>
					  * Flexible plans by the day or by the month<br>
					  * Devices for mobile or at home use</p>
				  <p>Plus, there&rsquo;s no drilling, digging or waiting for installation. CLEAR gives you internet the way you want it. Now that&rsquo;s the way a broadband service should be!</p>
			  </div>
				
		<div id="prodcontainer">
		<div id="prodmain">
			<div id="productbox">
				<div id="productimage"><img src="images/product-home-internet.png"></div>
				<div id="producttext"><span class="orangetitlelg">Fast Home Internet</span><br><br>
				<span class="text">Fast Home Internet gives you more speed. This plan is ideal for online shopping, sending photos or even downloading 
				music. You'll connect at download speeds of 3Mbps and upload speeds of 500Kbps**. Usage is unlimited.<br><br>
				$35 activation fee  (waived with 2 year sign up).</span>
				</div>
				<div id="productprice"><span class="productnumber">$30</span>/month<br><br>
				  <a href="contactus.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image6','','slices/learnmore-on.png',1)"><img src="slices/learnmore-off.png" name="Image6" width="121" height="50" border="0"></a></div>
				</div> 
		  	</div>
		 </div>
		 </div>
	<div id="prodcontainer">
		<div id="prodmain">
			<div id="productbox">
				<div id="productimage"><img src="images/product-home-internet.png"></div>
				<div id="producttext"><span class="orangetitlelg">Faster Home Internet</span><br><br>
				<span class="text">Faster Home Internet lets you do more online in less time. This plan is ideal for playing games, banking, shopping, uploading, downloading videos and more! 
				You'll connect at download speeds of 6Mbps and upload speeds of 500Kbps**. Usage is unlimited.</span>
				</div>
				<div id="productprice"><span class="productnumber">$40</span>/month<br><br>
				  <a href="contactus.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image6','','slices/learnmore-on.png',1)"><img src="slices/learnmore-off.png" name="Image6" width="121" height="50" border="0"></a></div>
				</div> 
		  	</div>
		 </div>
		 </div>
		<div class="clear">&nbsp;</div> 
		 
		 
		</div>
	</div>

	<div id="leftcolumn">
	 <?php include('includes/navigation.php'); ?>
		
	</div>



	

<div id="footer"></div>
</div>
</body>
</html>

html-css web-design

3 Contributors
3 Replies
138 Views
13 Hours Discussion Span
Latest Post 15 Years Ago Latest Post by dipak_passion

dipak_passion 0 Light Poster

15 Years Ago

Hi!

Try with following stylesheet :

body{
margin:0;
padding:0;
}

b{font-size: 110%;}
em{color: red;}

#maincontainer{
width: 1000px;
margin: 0 auto;
 /*Center container on page*/
background-image:url(../slices/bg-image.jpg);
background-repeat:repeat-y;
background-position:center;
}

#topsection{
padding-left:25px;
padding-top:0px;
margin:0;
height: 112px; /*Height of top section*/
}

#topsection h1{
margin: 0;
padding-top: 15px;
}

#contentwrapper{
float: left;
width: 100%;
background-image:url(../slices/bg-image.jpg);
background-repeat:repeat-y;
background-position:center;
}

#contentcolumn{
margin: 0 259px 0 235px; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/
}

#contentcolumnpage{
margin: 0 20px 0 235px; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/
}

#leftcolumn{
float: left;
width: 213px; /*Width of left column in pixel*/
 /*Set margin to that of -(MainContainerWidth)*/

}
.leftnav{
	background-image: url(../slices/bkg-nav-sides.png);
	background-repeat:repeat-y;
	width:213px;
	padding-top:0px;
	margin:0;
	
}
.leftnav ul li{
	list-style-type:none;
}
.leftnav ul li a{
	text-decoration:none;
	width:213px;
}

#rightcolumn{
float: left;
width: 259px; /*Width of right column*/
margin-left: -280px; /*Set left margin to -(RightColumnWidth)*/
}

#footer{
clear: left;
width: 100%;
background-image:url(../slices/footer-image.jpg);
background-repeat:repeat-y;
background-position:center;
color: #FFF;
text-align: center;
padding: 4px 0;
}

#footer a{
color: #FFFF80;
}


.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}
/* define type styles */

h1 {
	font:Arial, Helvetica, sans-serif;
	font-size:24px;
	color:#0e3263;
	margin-top:3px;
	}
h2  {
	font:Arial, Helvetica, sans-serif;
	font-size:18px;
	color:#0e3263;
	margin-top:3px;
	}	
.bluetitle {
	font:Arial, Helvetica, sans-serif;
	font-size:14px;
	color:#0e3263;
	font-weight:bold;
	}	
.text {
	font:Arial, Helvetica, sans-serif;
	font-size:12px;
	}	

/*define navigation elements */
.top{
	background:url(../slices/header.png) top no-repeat;
	height:112px;
}
.navlinks{
	background-image:url(../slices/navbutton.png);
	background-repeat:no-repeat;
	height:32px;
	margin-left:-15px;
	}
.navlinks a {	
	font-family:Arial, Helvetica, sans-serif;
	color:#00275c;
	font-size:14px;
	font-weight:bold;
	padding-left:38px;
	}
.logos {
	margin-left:25px;
	}

.navtop{
	background-image:url(../slices/bkg-nav-top.png);
	background-repeat:no-repeat;
	width:213px;
	height:19px;
	padding:0;
	margin:0;
	}
.navbottom{
	background-image:url(../slices/bkg-nav-bottom.png);
	background-repeat:no-repeat;
	width:213px;
	}
.contactus {
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	font-style:italic;
	color:#01204b;
	}	
.phone {
	font:Arial, Helvetica, sans-serif;
	font-size:24px;
	color:#0e3263;
	}	
.graybar {
	background-image:url(../slices/grayline.jpg);
	background-repeat:no-repeat;
	margin-left:18px;
	}		
/* Right side home page */

.adhometop{
	background-image:url(../slices/ad-home-top.png);
	width:259px;
	height:168px;
	background-repeat:no-repeat;
	}
.adhomemiddle{
	background-image:url(../slices/ad-home-middle.png);
	width:259px;
	height:174px;
	background-repeat:no-repeat;
	}
.adhomebottom{
	background-image:url(../slices/ad-home-bottom.png);
	width:263px;
	height:228px;
	background-repeat:no-repeat;
	}
.orangetitle{
	font-family:Arial, Helvetica, sans-serif;
	font-size:18px;
	font-weight:bold;
	color:#dc6a04;
	padding-left:15px;
	}			
.adtext{
	font:Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:bold;
	color:#0e3263;
	padding-left:15px;
	line-height:13px;
	}	
.adtext ul li {
	list-style-position: -5px;
	}
.homecontent{
	font:Arial, Helvetica, sans-serif;
	font-size:12px;
	padding:10px;
	}

/* product page*/

#prodcontainer{
	width:666px;
	margin:0 auto;
	padding: 10px;
	background-image:url(../slices/item-bkg.png);
	background-repeat:no-repeat;
	height:173px;
}

#prodmain{
	width:auto;
	display:block;
	padding:10px;
	}
	
#productimage
{
	width:100px;
	margin-right:25px;
	float:left;
}

#producttext
{
	width:350px;
	margin-right:25px;
	float:left;
}

#productprice
{
	width:100px;
	float:left;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#01204b;
	padding-left:5px;
}

.productnumber {
	font-family:Arial, Helvetica, sans-serif;
	font-size:48px;
	color:#01204b;
	}
.productnumbersmall{
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#01204b;		
	}
	
.orangetitlelg {
	font-family:Arial, Helvetica, sans-serif;
	font-size:24px;
	font-weight:bold;
	color:#dc6a04;
	}			
	#
.clear

{clear:both;}

And place the leftcolumn before contentcolumnpage

Thanks.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

bjdmb 0 Newbie Poster · Answer 1 · 2009-10-21T11:57:53+00:00

Quick correction....the right column appears to go under the left column.

seanooi 0 Newbie Poster · Answer 2 · 2009-10-21T13:55:38+00:00

I'm sorry but your code looks really messy, so I wrote a simple template that should work for what you're asking for.
Left column stays left, right column stays right regardless of the content you put in.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>

<div id="wrapper">
<div id="header">
Header here
</div><!-- header -->


<div id="left-column">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in tellus pellentesque turpis placerat pellentesque adipiscing quis nulla. Ut felis risus, commodo eu suscipit in, dictum in arcu. Donec at arcu at est iaculis pellentesque. Morbi dictum congue leo, at congue turpis convallis faucibus. Vestibulum augue nulla, accumsan eget sodales quis, consectetur sed arcu. Curabitur non dolor vel massa dapibus elementum. Curabitur porttitor tellus erat. Nam sit amet tellus sed est commodo tempus quis non tellus. Morbi nec quam vel dolor tincidunt sollicitudin. Quisque rutrum, dui id feugiat vulputate, tellus justo porta nibh, ut feugiat est nibh quis dui. Morbi consectetur mi sed risus elementum condimentum. Donec vulputate euismod risus, id varius magna lacinia in. Sed sed turpis vitae purus posuere mollis. Etiam faucibus commodo lacus, ac dapibus dolor tempor et. Quisque sagittis tellus lobortis magna egestas gravida. Cras quis orci a erat sagittis aliquam. Praesent placerat pretium eros, convallis suscipit nunc tempor eget. Etiam accumsan lacinia enim, id egestas orci mattis et.
</p>
</div><!-- left-column -->

<div id="right-column">
<p>Morbi eget leo vitae nulla tempus adipiscing. Mauris egestas vehicula pretium. Sed aliquam, neque ac sagittis placerat, elit felis rutrum nunc, ac faucibus neque erat id nisl. Nullam lobortis, sapien nec dapibus mattis, sem felis lacinia urna, a mollis neque turpis non felis. Fusce ut arcu nisl. Suspendisse potenti. Vestibulum laoreet eros vel felis tincidunt mattis. In hac habitasse platea dictumst. Integer non justo eu augue dapibus vulputate non sit amet metus. Morbi urna mi, eleifend non pharetra ut, tincidunt sed massa. Sed tincidunt urna eget est imperdiet aliquet. Proin at diam ante. Integer laoreet risus in velit accumsan molestie.

Sed ut turpis egestas lectus dictum pharetra vitae non urna. Nullam vulputate tortor ut orci porta convallis. Donec eget velit orci. Etiam vel vulputate libero. Ut lectus sapien, commodo ac laoreet vitae, porttitor a nibh. Aenean blandit velit quis dolor accumsan luctus. Mauris interdum ligula id mi mollis tincidunt. Nunc quis risus et sem porta tincidunt. Aliquam lacinia, lectus at dictum scelerisque, nunc lorem mollis ipsum, vel rutrum mi elit quis sem. Suspendisse posuere interdum neque eu malesuada. Duis egestas metus eget ligula ullamcorper sed posuere nibh vestibulum. Curabitur sit amet rhoncus ipsum. Nulla auctor tellus vitae ante rhoncus eu pharetra nisl interdum. Suspendisse a velit eu libero pulvinar elementum. Donec at lacus volutpat sem tincidunt suscipit. Fusce eu commodo nulla. Vivamus interdum turpis sed est sagittis pretium quis consectetur purus. Proin tristique feugiat dolor, ac tincidunt orci sagittis at.

Integer pretium pulvinar euismod. Quisque porta neque sed augue pharetra ut lacinia nisl varius. Sed eget pulvinar odio. Donec eu quam ipsum. Ut cursus volutpat arcu eget pulvinar. Proin interdum orci ut ante faucibus ultricies. Maecenas accumsan faucibus nisi, consequat faucibus turpis fringilla tincidunt. Nullam eu mauris velit, non porttitor mauris. Quisque egestas dui suscipit justo congue in varius neque dignissim. Proin malesuada velit congue tellus accumsan aliquet. Phasellus in sem sapien. Pellentesque dolor erat, dapibus at venenatis vel, dapibus et orci. Integer in convallis justo. Suspendisse tristique massa et ipsum placerat a suscipit massa rhoncus. Duis bibendum egestas mi, in sodales eros rutrum id. Cras sed turpis ipsum.</p>
</div><!-- right-column -->

<div class="clear"></div>

<div id="footer">
Footer here
</div><!-- footer -->
</div><!-- wrapper -->

</body>
</html>

body
{
	width: 100%
}

#wrapper
{
	width: 1024px;
	margin: 0 auto;
	border: 1px solid #000;
}

#header
{
	text-align: center;
	background: yellow;
	height: 5em;
}

#left-column
{
	float: left;
	width: 200px;
	border: 1px solid #000;
}

#right-column
{
	float: right;
	width: 800px;
	border: 1px solid #000;
}

#footer
{
	text-align: center;
	background: aqua;
	border: 1px solid #000;
	height: 5em;
}

.clear
{
	clear: both;
}

The border selectors are just guidelines.