9 replies [Last post]
popa2k
Offline
newbie
UK
Last seen: 13 years 27 weeks ago
UK
Joined: 2007-11-02
Posts: 6
Points: 0

Hello,

I'm having a time trying to fix my columns in place in firefox and IE. If i fix one the other breaks. I did try using an inline:block fix, but that didn't do anything. Being a bit of a css newb doesn't help.

I have three columns through the center of my index page see (www.dominictook.com/New/index.html). But the third column keeps falling off and going underneath the other two.
I have a clearing div at the end of the columns, so in theory it should be ok. I have put my code below, i'm just wondering what the fix is for both web browsers and what i can do to fix the columns in place.

Thanks in advance,

#container {
margin: 0px auto 0px auto;
width: 902px;
background-color:f3e3ce;
}
^^Holding all my divs

/*My three main floating column divs*/

#news {
float: left;
width: 285px;
height: 750px;
background-image: url(images/gradientBlock.gif);
background-repeat:repeat-x;
background-position:top left;

background-color: transparent;
padding-left: 15px;
padding-right: 15px;
padding-top: 5px;

/*For content to expand with a scrollbar*/
overflow: auto;
border-right: 1px solid gray;
display:inline-block;
}

#welcome {
float: left;
width: 265px;
height: 750px;
background-image: url(images/gradientBlock.gif);
background-repeat:repeat-x;
background-position:top left;
background-color:f3e3ce;
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
display:inline-block;
overflow:auto;
margin-right:auto;
}

#books {
float: right;
width: 289px;
height: 750px;
background-image: url(images/gradientBlock.gif);
background-repeat:repeat-x;
background-position:top left;
background-color:f3e3ce;
padding-left: 10px;
padding-right: 10px;
padding-top: 5px;
margin-right: 0px;
border-left: 1px solid gray;
display:inline-block;
}

The HTML: (I've omitted content, so its easier to see, this is how the columns are setup, inside the "contentContainer" div.
















I did try using auto and switching floats around, e.g. float left, left, float left right, float right right.

I'm also having another problem. In IE if i use

align-text: left;
align-text: justify;

It ignores both and centers the text, which is really odd. In Firefox its ok. IE is also ignoring align-text: center; and i can't understand why.

Styles are:

.mainHeader{
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: 600;
font-style: normal;
color:#000000;

text-align:center;
}

.mainbody{
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: 400;
font-style: normal;
color:#000000;

text-align:left;
text-align:justify;
}

Thanks for the help,

PoPa

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 3 years 43 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

doctype?

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

popa2k
Offline
newbie
UK
Last seen: 13 years 27 weeks ago
UK
Joined: 2007-11-02
Posts: 6
Points: 0

Sorry, here is the top of

Sorry, here is the top of the file.

Dominic Took - News and Buying Information

I'm not sure if thats the best doctype to use though, apologies if its crap. When i last coded Doctypes weren't as important as they are today.

Thanks,

PoPa

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 3 years 43 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

please reread the doctype

please reread the doctype link, and then re-read it until you get the correct doctype.

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

popa2k
Offline
newbie
UK
Last seen: 13 years 27 weeks ago
UK
Joined: 2007-11-02
Posts: 6
Points: 0

Hi, That seemed to work,

Hi,

That seemed to work, new errors but not as broken as it was before. Dreamweavers reading it properly too.

All new to me, thanks for the help!

popa2k
Offline
newbie
UK
Last seen: 13 years 27 weeks ago
UK
Joined: 2007-11-02
Posts: 6
Points: 0

background color not showing

I have fixed it now. But i have a new error. The background colour in the container div, isn't showing anymore and i've fiddled with it but i can't seem to get it to work. I've reposted relevant info below:

Dominic Took - News and Buying Information

And the CSS updated:

#container { margin: 0px auto 0px auto; width: 902px; background-color:f3e3ce; }

#contentContainer {
background-color:f3e3ce;
}

#news {
float: left;
width: 265px;
height: 630px;
background-image: url(images/gradientBlock.gif);
background-repeat:repeat-x;
background-position:top left;
background-color:f3e3ce;
padding-left: 15px;
padding-right: 15px;
padding-top: 5px;

/*For content to expand with a scrollbar*/
overflow: auto;
border-right: 1px solid gray;
}

#welcome {
float: left;
width: 335px;
height: 630px;
background-image: url(images/gradientBlock.gif);
background-repeat:repeat-x;
background-position:top left;
background-color:f3e3ce;
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;

border-right: 1px solid gray;
overflow: auto;
}

#books {
float: right;
width: 240px;
height: 630px;
background-image: url(images/gradientBlock.gif);
background-repeat:repeat-x;
background-position:top left;
background-color:f3e3ce;
padding-left: 10px;
padding-right: 10px;
padding-top: 5px;

}

#pageContent {
background-color:f3e3ce;
}

#clearPrevious {
clear: both;
margin: 0;
padding: 0;
background-color:f3e3ce;

}

Every div has the background color in and its still not working. Any help is much appreciated.

Thanks again,

PoPa

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 10 weeks 1 day ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

I'm guessing it shows in IE,

I'm guessing it shows in IE, but not Firefox. You haven't contained your float elements. To #container, add {overflow: hidden;}

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

popa2k
Offline
newbie
UK
Last seen: 13 years 27 weeks ago
UK
Joined: 2007-11-02
Posts: 6
Points: 0

Broken in IE and FF

I've added in the overflow, but it won't show in IE or Firefox. Thats my problem, it still appears as white and the footer doesn't show any colour either. Although it should, which is strange in itself.

What do you mean by not containing them? They are inside the container div, but do you mean something else?

See www.dominictook.com/New/index.html

Cheers,

PoPa

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 10 weeks 1 day ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

I didn't find the

I didn't find the background-color property in the source.

This works:

#container {
  margin: 0px auto;
  width: 902px;
  background-color: #f3e3ce;
}

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

popa2k
Offline
newbie
UK
Last seen: 13 years 27 weeks ago
UK
Joined: 2007-11-02
Posts: 6
Points: 0

Thats really strange, i

Thats really strange, i could swear i just put that in.

Thanks Gary, that works fine now!

Thanks all,

PoPa