3 replies [Last post]
chrise007
Offline
newbie
Last seen: 13 years 20 weeks ago
Joined: 2007-07-16
Posts: 2
Points: 0

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.

 
 

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 37 weeks 1 day ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Could you edit your post to

Could you edit your post to show all the HTML please? Right from the doctype Wink

Verschwindende wrote:
  • CSS doesn't make pies

chrise007
Offline
newbie
Last seen: 13 years 20 weeks ago
Joined: 2007-07-16
Posts: 2
Points: 0

Hi Thanks for your reply

Hi

Thanks for your reply but i have actually managed to sort it!

Regards

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 37 weeks 1 day ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Excellent! Mind if I ask how?

Excellent! Mind if I ask how?

Verschwindende wrote:
  • CSS doesn't make pies