Getting into a mess!

[csa]

I've started a new layout but there are slight anomalies in FF. I would appreciate any advice on how to rectify these problems. Thank you.

- bottom footer div moves just under the top header.


- pushing the form down the page.

Code: Select all

/* CSS Document */
body{
background-color: #ffffff;
color:#000000;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
margin-top: 0px;
}
#container{
width: 760px;
border: solid black 0px; 
position: relative;
left: 50%;
margin-left: -380px;
background-image:url(images/backstrip.gif);
background-repeat:repeat-y;
}
#topheader{
width: 760px;
height: 88px;
}
#rightcolumnright{
width: 34px;
height: 480px;
background-color:#FFFFFF;
float:right;
}
#middlecolumn{
width: 252px;
height: 480px;
background-color:#FFFF66;
background-image:url(images/yellowstrip.jpg);
background-repeat:repeat-y;
float:right;
}
#firstcolumn{
width: 467px;
height: 480px;
background-color:#FFFFFF;
float:left;
}
#bottomlinks{
font-size:10px;
width: 760px;
height: 20px;
background-color:#405B76;
color:#FFFFFF;
text-align:center;
}
#imagerowright1{
width: 180px;
height: 200px;
float:right;
background-color:#FFFFFF;
padding-top: 20px;
padding-right:30px;
text-align:center;
}
#imagerowleft1{
width: 200px;
height: 200px;
float:left;
background-color:#FFFFFF;
padding-top: 20px;
padding-left:30px;
text-align:center;
}
#imagerow2right1{
width: 180px;
height: 200px;
float:right;
background-color:#FFFFFF;
padding-top: 30px;
padding-right:30px;
text-align:center;
}
#imagerow2left1{
width: 200px;
height: 200px;
float:left;
background-color:#FFFFFF;
padding-top: 30px;
padding-left:30px;
text-align:center;
}
#striptext{
width: 210px;
font-size:12px;
padding-left: 20px;
text-align:justify;
}
h1{
font-size:12px;
font-weight:bold;
color:#405B76;
}
li{
list-style-type:square;
}
/*form*/
div.row {
  clear: both;
  padding-top: 2px;
  }
div.row span.label {
  float: left;
  width: 150px;
  text-align: left;
  font-family:Arial, Helvetica, sans-serif;
  font-size:12px;
  font-weight: bold;
  color:#000000;
  }
div.row span.formw {
  float: left;
  width: 210px;
  text-align: left;
  margin-left: 15px;
  }
submit{
margin-left: 50px;
}
#form{
width: 400px;
padding-top: 5px;
padding-left: 50px;
}

[Rob]

add 'clear:both;' to bottomlinks css, and float your form left.

Updated CSS:-

Code: Select all

/* CSS Document */
body{
background-color: #ffffff;
color:#000000;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
margin-top: 0px;
}
#container{
width: 760px;
border: solid black 0px; 
position: relative;
left: 50%;
margin-left: -380px;
background-image:url(images/backstrip.gif);
background-repeat:repeat-y;
}
#topheader{
width: 760px;
height: 88px;

}
#rightcolumnright{
width: 34px;
height: 480px;
background-color:#FFFFFF;
float:right;
}
#middlecolumn{
width: 252px;
height: 480px;
background-color:#FFFF66;
background-image:url(images/yellowstrip.jpg);
background-repeat:repeat-y;
float:right;
}
#firstcolumn{
width: 467px;
height: 480px;
background-color:#FFFFFF;
float:left;
}
#bottomlinks{
font-size:10px;
width: 760px;
height: 20px;
background-color:#405B76;
color:#FFFFFF;
text-align:center; clear:both;
}
#imagerowright1{
width: 180px;
height: 200px;
float:right;
background-color:#FFFFFF;
padding-top: 20px;
padding-right:30px;
text-align:center;
}
#imagerowleft1{
width: 200px;
height: 200px;
float:left;
background-color:#FFFFFF;
padding-top: 20px;
padding-left:30px;
text-align:center;
}
#imagerow2right1{
width: 180px;
height: 200px;
float:right;
background-color:#FFFFFF;
padding-top: 30px;
padding-right:30px;
text-align:center;
}
#imagerow2left1{
width: 200px;
height: 200px;
float:left;
background-color:#FFFFFF;
padding-top: 30px;
padding-left:30px;
text-align:center;
}
#striptext{
width: 210px;
font-size:12px;
padding-left: 20px;
text-align:justify;
}
h1{
font-size:12px;
font-weight:bold;
color:#405B76;
}
li{
list-style-type:square;
}
/*form*/
div.row {
  clear: both;
  padding-top: 2px;
  }

div.row span.label {
  float: left;
  width: 150px;
  text-align: left;
  font-family:Arial, Helvetica, sans-serif;
  font-size:12px;
  font-weight: bold;
  color:#000000;
  }

div.row span.formw {
  float: left;
  width: 210px;
  text-align: left;
  margin-left: 15px;

  }
submit{
margin-left: 50px;
}
#form{
width: 400px;
padding-top: 5px;
padding-left: 50px; float:left;
}

[csa]

Thank you. I'm going to go and search google to find out what clear float does and how I can detect when to use it in future.

[herkalees]

You use it anytime you have a element floated and you desire another element to appear below it, instead of next to it.

This is because when you float an element (<div id="sidebar">content</div>), everything that comes below it in the html will appear beside it. Sometimes, this is not what you want. You might prefer all elements below the above div to appear below it.

On the first element to appear below the floated element, you give it a 'clear' property in CSS. Whether it's 'left' 'right' 'both' depends on which way you floated the above element.

This was probably confusing... I tend to ramble.