Problem with Columns using HTML and CSS

fatgoth

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 :

Expand|Select|Wrap|Line Numbers

 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.

Death Slaught

Please use proper code tags when posting code, refer to the box on the right when posting, and/or read the Posting Guidelines (there's a link in my signature).

Just incase you didn't know IE is the one displaying the browser incorrectly (you need to add a doctype to keep IE out of quirks mode).

In your column rule you can add this:

Expand|Select|Wrap|Line Numbers

display:inline;

This will move your copyright but that's easy to move back.

^_^ Hope it helps, Thanks, Death

fatgoth

Please use proper code tags when posting code, refer to the box on the right when posting, and/or read the Posting Guidelines (there's a link in my signature).

Just incase you didn't know IE is the one displaying the browser incorrectly (you need to add a doctype to keep IE out of quirks mode).

In your column rule you can add this:

Expand|Select|Wrap|Line Numbers

display:inline;

This will move your copyright but that's easy to move back.

^_^ Hope it helps, Thanks, Death

Many thanks for your help. I will read the instructions next time.

I added the line into my column code in the CSS but it made no difference at all.

Do you have any other ideas?

Many thanks, Fatgoth

Death Slaught

Strange it worked fine for me. Try removing the 'float:none'.

Expand|Select|Wrap|Line Numbers

  
#column {

display:inline;

list-style:none;

margin:5px 0;

padding:0;

width:170px;

text-align:center;

}

^_^ Hope it helps, Thanks, Death

fatgoth

Strange it worked fine for me. Try removing the 'float:none'.

Expand|Select|Wrap|Line Numbers

#column {

display:inline;

list-style:none;

margin:5px 0;

padding:0;

width:170px;

text-align:center;

}

^_^ Hope it helps, Thanks, Death

Thanks again, but still no luck. Removed the float line, no luck. Deleted all column section and readded yours, but still the same.

Thanks, Fatgoth

drhowarddrfine

As always, the problem is IE. It is mishandling floats. Never use IE as a reference for how things should work. It is 10 years behind web standards and wrong.

Instead of float:none; (which is the default) make it float:left;

fatgoth

As always, the problem is IE. It is mishandling floats. Never use IE as a reference for how things should work. It is 10 years behind web standards and wrong.

Instead of float:none; (which is the default) make it float:left;

Ok, that has sort of worked.

The column is now on the right hand side. The page itself has a central pane which uses images top, bottom, left and right. Into this pane is added the 'main' and 'column' columns. With the answer you have given above it looks like main and column overlap the edges and the images on the left and right have disappeared and the white backgound to the centre pane has been replaced with grey, which was the page background.

Thanks

Fatgoth

fatgoth

Ok, that has sort of worked.

The column is now on the right hand side. The page itself has a central pane which uses images top, bottom, left and right. Into this pane is added the 'main' and 'column' columns. With the answer you have given above it looks like main and column overlap the edges and the images on the left and right have disappeared and the white backgound to the centre pane has been replaced with grey, which was the page background.

Thanks

Fatgoth

Ok guys i think i have fixed it. I have added the following:

Expand|Select|Wrap|Line Numbers

 #column {

list-style:none;

margin:5px 0 0 485px;

padding:0;

width:170px;

text-align:center;

}

Many thanks to both of you for all your help.

Fatgoth

Problem with Columns using HTML and CSS

Post your reply

Similar topics