Column problem in CSS

David Nixon · Mar 25, 2012

Hi all,

I've created two columns either side of the main column. The left column is fine, but I've added a right column which will be used for advertising etc.. as you often see on other websites, but It's not reaching the top, so when I type in the main column, it pushes the right column down and goes over the top - take a look www.midlandsreptiles.com

Here is the code:

* {font-size:14px;line-height:150%;} /*Allows a standard font size and style throughout*/
html{height:100%;}
body{background:#000;height:100%;color:#FFF;background-image: url(Background-1.jpg);
background-repeat: no-repeat} /* this is the same as {background-color:#000000;} */
p{margin:10px;line-height:150%;font-size:14px;} /* this give any paragraph tags you wrap around your text <p>My line of text</p> a nice 5px space around it and spacing between lines to read easier */
a{text-decoration:none;color:#fff;padding:10px}/* this is a global declaration for <a href="page.html"> of no underlining and a colour grey */
a:hover{color:#666;}
h1{font-size:24px;}
h2{font-size:22px;}
h3{font-size:20px;}
h4{font-size:18px;}
h5{font-size:16px;}
img{border:0px}

/***** Main Container ****/

/*Standard width that Mal reccomends is 960px*/

#mainCotainer{margin:0 auto;width:960px;height:100%;} /* this gives you margin 0px top & bottom and auto give you equal distance from left and right */
#header{float:left;width:100%;} /* header section for logo */
#navigation{float:left;width:100%;border-top:1px solid #333;border-bottom:1px solid #333;padding:0px;} /* main Navigation section */
#mainContent{float:right;width:100%;min-height:70%;padding:0px;} /* main content */

/*Below is where the main structure is designed - the left column that floats at 20% is the advertisment section*/

#leftColumn{float:left;width:20%;border:1px solid #333;padding:5px;height:100%;}
#mainColumn{float:right;width:50%;padding:5px;height:100%;}
#rightColumn{float:right;width:20%;border:1px solid #333;padding:5px;height:100%;}

/*This is the code given by Mal to allow ext wrap*/

.articleImageLeft {
float: left;
margin: 0 5px 0 0;
}
.articleImageRight {
float: right;
margin: 0 0 0 5px;
}

#footer{float:left;width:100%;border-top:1px solid #333;padding:0px} /* footer setion for copyright etc.... */

Please help me before the laptop goes out of the window, and I go bald overnight

I've spend all night playing around with this.

HTML code:

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Midlands Reptiles</title>
<link href="css/layout.css" rel="stylesheet" type="text/css" />

<style type="text/css">

</style></head>

</div><body>


<div id="mainContainer">

<div id="header"> <img src="images/Websitelogo.png" width="318" height="302" alt="Midland Reptiles" /></div>



<div id="navigation">Midlands Reptiles Photo Gallery . Herpetological Field Expeditions . Reptile Husbandry Equipment . Woolfboids Boas & Pythons .<a href="adder diaries.html">Adder Diaries . </a><a href="south-africa.html">South Africa</a></div>




<div id="mainContent">
<div id="leftColumn">
<p><img src="images/Adder Diaries small 7cm wide-5.jpg" width="198" height="153" /></p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>

<div id=”mainColumn”>
ssssssssssssd ddddd

xxxxxxxx xxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxx</div>

<div id="rightColumn">
<p><img src="images/Cape cobra South Africa.jpg" width="189" height="283" align="right" /></p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>



<div id="footer">
<p>&copy 2012 - Midlands Reptiles

</p>
</div>
</body>
</html>

Thanks in advance

Dave Nixon

Phreaddee · Mar 26, 2012

#mainColumn{float:right;width:50%;padding:5px;heig ht:100%;}

Column problem in CSS

David Nixon

New Member

Phreaddee

Super Moderator