Looking for some CSS layout help

[DezUk]

http://www.rdoyle.info/new/

Can anyone have a look at this and help me get the layout sorted as there are a couple of problems. First off the Education section seems to be up next to the picture div which is floated right, this only happens in FF but seems ok in IE. The second problem is with the container div, it doesn’t stretch the height of the page yet I have "height: 100%" set in the body and container div.

Appreciate any help


Cheers

 

[fishfishfish]

In Firefox, removing height:100%; from content should make the content fill the container. Not sure whether this will work in IE though, as I'm using Linux. If it messes up in IE, I'd recommend writing a bug fix for IE and putting in a conditional include.

#content {
width: 780px;
margin-top: 12px;
text-align: left;
background-color: #1D1D1D;
border: solid 1px #5E5E5E;
}

 

[fishfishfish]

You need to clear the float to get the education bit to sit back on the right. The easiest way to do this is to put <br clear="all"/> after the picture. But you could also code a simple clearfix <div> to do the same thing, or add a clear statement to the education block.

 

[fishfishfish]

This will fix it in Firefox.

html {
height: 100%;
}

h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12pt;
font-weight: bold;
text-decoration: underline;
color: #FFFFFF;
}

h2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
font-weight: bold;
color: #FFFFFF;
}

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
color: #ffffff;
height: 100%;
margin: 0px;
padding: 0px;
background-image: url(images/background.jpg);
}

a.link {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
color: #FFFFFF;
text-decoration: underline;
}

a.link:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
color: #FFE952;
text-decoration: underline;
}

a.visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
color: #FFFFFF;
text-decoration: underline;
}

#container {
width: 780px;
height: 100%;
margin: 0 auto;
}

#banner {
width: 780px;
height: 86px;
background-image: url(images/banner.jpg);
border: solid 1px #5E5E5E;
margin: 0px auto;
}

#content {
width: 780px;
margin-top: 12px;
text-align: left;
background-color: #1D1D1D;
border: solid 1px #5E5E5E;
}

#about {
width: 281px;
margin: 0 auto;
float: left;
background-color: #1D1D1D;
padding: 30px;
}

#picture {
width: 246px;
margin: 0 auto;
float: right;
background-color: #1D1D1D;
padding: 30px;
text-align: center;
}

.info {
clear:left;
width: 740px;
margin: 0 auto;
background-color: #1D1D1D;
padding: 10px;
}

 

[DezUk]

Thanks for the help, its all working now