Hi All
I am new to CSS and am trying to style a page with 3 columns. The left column will always have an image, the middle content will have the main content and the right column will have extra info and links etc.
My problem is that in ie it all aligns up correctly, but when i preview in ff the middle content drops down to under the left column. I havent positioned the middle content absolutely because i have a footer that at the moment expands down the page as the content expands. If i absolutely position the middle content the footer no longer looks right.
I hope this makes sense and that someone is able to help! The code is below:
CSS CODE:
body{
width: 100%;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #2a558e;
font-size: 0.7em;
line-height: 1.3em;
text-align:left;
}
html, body {
margin: 0;
padding: 0;
}
div {
border: none;
}
/* LAYOUT DIVS */
#header {
margin-left: 0px;
background-image:url(../images/top_bar_mini.jpg);
background-repeat:no-repeat;
height: 200px;
}
#leftcol {
float: left;
width: 150px;
margin-left: 2px;
margin-top: 0px;
margin-right: 3px;
padding: 10px;
}
#rightcol {
position: absolute;
margin-left: 560px;
top: 215px;
width: 180px;
padding-left: 20px;
padding-right: 10px;
padding-top: 10px;
border-left:1px dotted #51aac2;
}
#leftcol p, #leftcol li, #rightcol p {
font-size: 100%;
}
#content {
padding: 10px;
width: 390px;
}
#footer {
clear: both;
width: 760px;
margin: 10px;
text-align: center;
font-family: Verdana;
font-size: 80%;
padding: 3px;
border-top: 1px solid #51aac2;
color: #000;
}
#breadcrumb1{
position:absolute; top: 181px; left: 0px;
z-index:-1;
text-align:left;
width:760px;
background-color: #ffde00;
font-size: 90%;
padding: 5px;
}
.breadcrumb1{
color: #000000;
}
HTML CODE:


Lorem ipsum qui ad oblique antiopam sapientem, ne qui amet sonet pertinax, ex duo option pericula. Doming mollis cu vix, te has ubique prompta nominavi. Ius id viderer virtute abhorreant, ne corpora contentiones sed. Sea atomorum sadipscing ne, an cum zzril elaboraret.

Lorem ipsum qui ad oblique antiopam sapientem, ne qui amet sonet pertinax, ex duo option pericula. Doming mollis cu vix, te has ubique prompta nominavi. Ius id viderer virtute abhorreant, ne corpora contentiones sed. Sea atomorum sadipscing ne, an cum zzril elaboraret.
Lorem ipsum qui ad oblique antiopam sapientem, ne qui amet sonet pertinax, ex duo option pericula. Doming mollis cu vix, te has ubique prompta nominavi. Ius id viderer virtute abhorreant, ne corpora contentiones sed. Sea atomorum sadipscing ne, an cum zzril elaboraret.
Lorem ipsum qui ad oblique antiopam sapientem, ne qui amet sonet pertinax, ex duo option pericula. Doming mollis cu vix, te has ubique prompta nominavi. Ius id viderer virtute abhorreant, ne corpora contentiones sed. Sea atomorum sadipscing ne, an cum zzril elaboraret.

Lorem ipsum qui ad oblique antiopam sapientem, ne qui amet sonet pertinax, ex duo option pericula. Doming mollis cu vix, te has ubique prompta nominavi. Ius id viderer virtute abhorreant, ne corpora contentiones sed. Sea atomorum sadipscing ne, an cum zzril elaboraret. Ex delicata moderatius pro. His quot voluptua antiopam an, et nec mazim graeco, abhorreant efficiendi quaerendum qui an.
Could you edit your post to
Could you edit your post to show all the HTML please? Right from the doctype
Hi Thanks for your reply
Hi
Thanks for your reply but i have actually managed to sort it!
Regards
Excellent! Mind if I ask how?
Excellent! Mind if I ask how?