Hi all
New to this site/Forum(looks like a pro bunch of fellas here) and very new to web design so go easy on my noobish troubles ๐ฎ
I have started a site (just layout at this stage) and i am having trouble with that layout. the site is [url]www.credenhill.demon.co.uk
I would like the 3rd column on the far right to sit to the far right and level with the central content section this is indeed the case if you look in FireFox, Opera, Safari, Netscape but not Internet Explorer (this is typical from what i have read so far about IE ๐ก ).
I would like to know if any of you fellas could point me to a by the book solution and not a hack please? ?
I think what i am after is 3 columns therefore 3 devs all separate as the other browsers illustrate (the code still might be wrong offcourse but it looks perfect as far as the layouit goes)
Below is my CSS for [url]www.credenhill.demon.co.uk
[code=html]body {
margin: 0;
padding: 0;
background: #000000 url(images/img1.gif) repeat-x;
font: normal small “Trebuchet MS”, Arial, Helvetica, sans-serif;
color: #2FCC61;
}
h1, h2, h3, h4, h5, h6 {
color: #ffffff;
}
a {
color: #00FF51;
}
a:hover {
text-decoration: none;
color: #FFFFFF;
}
/*Header */
#header {
width: 750px;
height: 200px;
margin: 0 auto;
background: url(images/img2.jpg) no-repeat center bottom;
}
/* Logo */
#logo {
float: left;
}
#logo * {
margin: 0;
padding: 0;
color: #FFFFFF;
}
#logo h1 {
padding: 90px 0 0 0;
letter-spacing: -3px;
font-size: 3.5em;
}
#logo h2 {
letter-spacing: 1px;
font-size: 1em;
}
/* Menu */
#menu {
float: right;
}
#menu ul {
margin: 0;
padding: 163px 0 0 0;
list-style: none;
}
#menu li {
display: inline;
}
#menu a {
display: block;
float: left;
margin-right: 2px;
padding: 10px 20px;
text-decoration: none;
font-size: 1em;
font-weight: bold;
color: #FFFFFF;
}
#menu .active a {
background: transparent;
}
#menu a:hover {
background: #000000;
}
/* Column One */
#colOne {
float: Left;
width: 150px;
margin: auto;
}
#colOne ul {
margin: 0;
padding: 10px 0 0 0;
list-style: none;
}
#colOne li {
margin-bottom: 20px;
}
#colOne li li {
margin-bottom: auto;
}
#colOne li ul {
padding-left: 20px;
list-style: square inside;
}
#colOne h2 {
padding-Top: 20px;
padding-bottom: 5px;
padding-left: 20px;
font-size: 1.25em;
color: #FFFFFF;
border-bottom: 1px solid #2C2C2C;
}
/* Content */
#content {
width: 625px;
margin: 0 0 0 180px;
padding: 20px 0 0 0px;
}
/* Column Two */
#colTwo {
float: left;
}
#colTwo h2 {
margin-top: 0;
font-size: 2.5em;
}
#colTwo p{
line-height: 140%;
}
#google {
float: right;
width: 120px;
}
/* Footer */
#footer {
clear: both;
width: 750px;
height: 60px;
margin: 0 auto;
padding: 20px 0;
}
#footer p {
margin: 0;
padding: 0;
text-align: center;
font-size: smaller;
}
#footer a {
font-size: 1.25em;
}