Fri, 2007-11-02 15:16
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
Fri, 2007-11-02 15:28
#1
Fri, 2007-11-02 15:37
#2
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
Fri, 2007-11-02 16:20
#3
please reread the doctype
please reread the doctype link, and then re-read it until you get the correct doctype.
Fri, 2007-11-02 16:36
#4
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!
Fri, 2007-11-02 17:41
#5
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
Fri, 2007-11-02 19:28
#6
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
Fri, 2007-11-02 19:49
#7
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
Fri, 2007-11-02 22:01
#8
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
Fri, 2007-11-02 22:09
#9
Thats really strange, i
Thats really strange, i could swear i just put that in.
Thanks Gary, that works fine now!
Thanks all,
PoPa