0

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
3
Views
9 Years
Discussion Span
Last Post by MidiMagic
0

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.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.