I am rather new to CSS and have created a CSS two column layout that works fine in IE but Firefox very kindly places the 'column' div right below the first 'main' div instead of beside each other.
Here is the code of the html page:
[html]<body>
<div id="main_block">
<div id="banner"></div>
<div id="menu_top">
<ul id="menu_list_top">
<li> <script language=javascript>dispDate(0)</script>
</li>
</ul>
</div>
<div id="main">
<form method="get" action="http://www.google.com/search">
<div id="search">
<input tpe="text" name="q" size="25" maxlength="255" value="" /><input type="submit" value="Search" /><br />
<input type="checkbox" name="sitesearch" value="xx.co.uk" checked /> Only search xx.co.uk
</div>
</form>
<br />
<br />
<br />
<h3>Welcome</h3>
<p>Welcome.<br />
Text.<br />
Text<br />
<br />
<br />
For more information <a href="xx.php">Contact Us</a> here.
</p>
</div>
<div id="column">
<br />
<p><a href="#"><img src="x.gif" alt="x" border="0" /><br />
Text.</a></p>
<p><a href="x.com" target="_blank"><img src="x1.jpg" alt="x" border="0" /><br />
Text.</a></p>
<p><a href="#"><img src="x3.jpg" alt="x" border="0" /><br />
Text.</a></p>
<p><a href="x.com" target="_blank"><img src="x3.jpg" alt="x" border="0" /><br />
text.</a></p>
<br />
</div>
</div>
<div id="clear"></div>
</div>
<div id="footer">
</div>
<div id="copyright">© xxx. </div>
<div id="copyright"> </div>
</body>[/html]
and the CSS file :
- html, body {
-
margin:0;
-
padding:0;
-
text-align:center;
-
}
-
-
body {
-
background-color:#EAEAEA;
-
}
-
-
#main_block {
-
text-align:left;
-
margin:0 auto;
-
padding:10px 15px;
-
width:706px;
-
height:auto;
-
background:url("../x2.gif") repeat-y;
-
font:12px Verdana,Arial,Helvetica,sans-serif;
-
color:#666;
-
}
-
-
#banner {
-
font:6px Desyrel,BordeauxMedium;
-
margin:5px;
-
background:url("../x4.jpg") no-repeat;
-
width:662px;
-
height:105px;
-
padding:10px 0 0 10px;
-
}
-
-
#content {
-
width:676px;
-
}
-
-
#main {
-
width:465px;
-
height:auto;
-
float:left;
-
padding:10px;
-
}
-
-
#main a {
-
text-decoration:none;
-
font-weight:bold;
-
color:#000000;
-
}
-
-
#main a:hover {
-
background-color:#ADD8E6;
-
color:#000000;
-
}
-
-
-
#mail_error {
-
color:#FF0000;
-
text-align:left;
-
}
-
-
#main p{
-
color:#181818;
-
}
-
-
-
#box {
-
width:156px;
-
height:auto;
-
padding:0 10px;
-
border:1px dotted #FC6;
-
}
-
-
#menu {
-
list-style:none;
-
margin:4px;
-
text-align:center;
-
width:670px;
-
height:15px;
-
background-color:#ADD8E6;
-
font:11px Verdana,Arial,Helvetica,sans-serif;
-
text-decoration:none;
-
}
-
-
#menu a {
-
font-weight:bold;
-
text-decoration:none;
-
color:#666;
-
}
-
-
#menu a:hover {
-
font-weight:bold;
-
background-color:#99CCFF;
-
color:#000000;
-
}
-
-
-
#menu_top {
-
margin:5px;
-
width:662px;
-
background-color:#ADD8E6;
-
padding:0 0 0 5px;
-
}
-
-
#menu_list_top {
-
font-weight:bold;
-
list-style:none;
-
margin:5px 0;
-
padding:0 0 2px 0;
-
}
-
-
-
-
#column {
-
float:none;
-
list-style:none;
-
margin:5px 0;
-
padding:0;
-
width:170px;
-
text-align:center;
-
-
}
-
-
#column a {
-
text-decoration:none;
-
padding:5px;
-
width:170px;
-
display:block;
-
color:#666;
-
}
-
-
#column a:hover {
-
color:#666;
-
-
}
-
-
#noLine a {
-
border-bottom:0;
-
}
-
-
h1 {
-
font-size:28px;
-
margin:0;
-
color:#000000;
-
}
-
-
h2 {
-
font-size:12px;
-
margin:0 0 0 5px;
-
color:#FFF;
-
}
-
-
h3 {
-
font-size:28px;
-
margin:0;
-
}
-
-
#clear {
-
clear:both;
-
}
-
-
-
p {
-
line-height:1.5em;
-
color:#585858;
-
}
-
-
#copyright, #copyright a {
-
padding-top:5px;
-
text-decoration:none;
-
text-align:center;
-
font:10px Verdana,Arial,Helvetica,sans-serif;
-
color:#666;
-
}
-
-
#copyright a:hover {
-
color:#369;
-
}
-
-
#footer {
-
margin:0 auto;
-
height:10px;
-
width:736px;
-
background:url("../xc.gif") no-repeat;
-
}
-
-
#search {
-
font:9px Verdana,Arial,Helvetica,sans-serif;
-
}
Many thanks.