Member Avatar for max2me99

I can't see why my left and right cols are falling below the main col.

Here's some of the html (using dtd xhtml 1 transitional)

<link rel="stylesheet" href="cg3col.css" type="text/css" />
</head>
<body>
<div id="pagewidth">
	<div id="header"> <a href="index.html"><img src="images/logoTop.jpg" alt="Cape Gazette" name="cgLogo" width="554" height="126" border="0" id="cgLogo" /></a>
	  <div id="navigation"><script type='text/javascript' src="styles/menucg.js"></script></div>
  </div>
  <div id="wrapper" class="clearfix"> 
		<div id="twocols" class="clearfix"> 
			<div id="maincol">
			<h1>NEWS</h1>
			 <table width="160" border="0" align="left" cellspacing="0" class="photoLEFT">
  <tr>
    <td><img src="images/placeholder.jpg" alt="photohere" name="placeholder" width="160" height="120" align="left" /></td>
  </tr>
  <tr>
    <td class="	photoCredit">Photo Credit</td>
  </tr>
</table>
<h2>This page is a work in progress and under construction</h2>
<p>This page is a work in progress and under construction. This page is a work in progress and under construction. <strong>More »</strong></p>
	
<h2>This page is a work in progress and under construction</h2>
<p>This page is a work in progress and under construction.</p>
</div>
	</div>
		<div class="clearfix">
		  	<div id="rightcol">
		   	 	<p>Here's some stuff on the right</p>
	      	</div>
    </div>
		<div class="clearfix">		  </div> 
	  <div id="leftcol">
	    <h1>TOP STORY</h1>
		<h2>Headline</h2>
	    <table width="330px" border="0" align="center" cellspacing="0" class="photoLEFT">
  <tr>
    <td><img src="images/placeholder.jpg" alt="photohere" name="placeholder" width="330" height="200" align="left" /></td>

<p>This page is a work in progress and under construction. This page is a work in progress and under construction. <strong>More »</strong></p>
	  </div>
</div>
	<div id="footer"> Footer 
	</div>
</div>

And here's the css

html, body{ 
 margin:0; 
 padding:0; 
 } 
 
#pagewidth{ 
 max-width:80em;  

 min-width:30em;  
}
 
#header{
	position:relative;
	height:154px;
	background-color:#FFFFFF;
	width:100%;
	background-image: url(images/bgtop.jpg);
	background-repeat: repeat-x;
	background-position: left top;
} 
#navigation {
	width: 100%;
	height: 28px;
	top: 126px;
	position: absolute;
}	
 
#leftcol{
	width:34%;
	float:left;
	position:relative;
	background-color:#f7eedc;
}

#leftcol p {
	font-size: 0.8em;
	text-align: left;
	font-family: Georgia, "Times New Roman", Times, serif;
	padding-right: 3px;
	padding-left: 3px;
}
	
.photoLEFT {
	margin-right: 8px;
}	
.photoRIGHT {
	margin-left: 8px;
}
.photoCredit {
	font-size: .6em;
	font-family: "Trebuchet MS", Arial, Verdana, sans-serif;
	text-align: right;
}	
 
#twocols{
 width:66%; 
 float:right; 
 position:relative; 
}
 
#rightcol{
 width:49%; 
 float:right; 
 position:relative; 
 background-color:#f7eedc;
 }
 
#rightcol p {
	font-size: 0.8em;
	text-align: left;
	font-family: Georgia, "Times New Roman", Times, serif;
	padding-right: 3px;
	padding-left: 3px;
}	
 
#maincol{background-color: #FFFFFF;  
 float: left; 
 display:inline; 
 position: relative; 
 width:50%; 
}
 
}	
 #maincol p {
	font-size: 0.8em;
	text-align: left;
	font-family: Georgia, "Times New Roman", Times, serif;
	padding-right: 3px;
	padding-left: 3px;
}	
 
#footer{
 height:30px; 
  background-color:#A0C903; 
 clear:both;
 } 
 
.blueLayer {
	background-color: #c7dff4;
}	 

.blackLayer {
	background-color: #000000;
	color: #ffffff;
}	

.sandLayer {
	background-color: #f7eedc;
}	

h1 {
	font-size: 1.3em;
	font-family: "Trebuchet MS", Arial, Verdana, sans-serif;
	text-align: center;
	padding: 3px;
	background-image: url(images/hedbg.jpg);
	background-repeat: repeat-x;
	background-position: center top;
}

h2 {
	font-size: .9em;
	font-family: "Trebuchet MS", Arial, Verdana, sans-serif;
	text-align: left;
	margin-bottom: -0.5em;
}
	
 
 /* *** Float containers fix: *** */ 
.clearfix:after {
 content: "."; 
 display: block; 
height: 0; 
 clear: both; 
 visibility: hidden;
 }
 
.clearfix{display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix{height: 1%;}
.clearfix{display: block;}
/* End hide from IE-mac */  
 
 /*printer styles*/ 
 @media print{ 
/*hide the left column when printing*/ 
#leftcol{display:none;} 

/*hide the right column when printing*/ 
#rightcol{display:none;} 
#twocols, #maincol{width:100%; float:none;}
}
strong {
	font-family: "Trebuchet MS", Arial, Verdana, sans-serif;
	font-weight: bold;
}

Sorry to post so much, but wasn't sure what needed to change.

Thanks

  • 3 Contributors
  • 2 Replies
  • 127 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by MidiMagic
Member Avatar for Shanti C

better to put divs inside tables....

Member Avatar for MidiMagic

There are several effects occurring here:

- Pixel positioning and sizing are defined differently for different browsers and screen resolutions.

- IE puts the surrounding styles (margin, border, padding) inside the measured size styles (height, width). Other browsers follow the W3C standard, placing them outside the size styles. This causes problems in fit.

- Any time the components of a page will not fit in the allowed space, the components will rearrange themselves so they have room to render. This is especially true of anything in a div.

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.