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.
7  1409 
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:
This will move your copyright but that's easy to move back.
^_^ Hope it helps, Thanks, Death
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:
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
Strange it worked fine for me. Try removing the 'float:none'. -
-
#column {
-
display:inline;
-
list-style:none;
-
margin:5px 0;
-
padding:0;
-
width:170px;
-
text-align:center;
-
}
-
^_^ Hope it helps, Thanks, Death
Strange it worked fine for me. Try removing the 'float:none'.
-
-
#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
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;
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
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: - #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
Sign in to post your reply or Sign up for a free account.
Similar topics
by: Joe Bloggs |
last post by:
I am trying display the contents of a table in a web page, select
certain rows from that table and then display the fields that I have
selected (now table columns) as text in a Label object....
|
by: Loïc |
last post by:
Hello,
I have created a simple webcontrol named MyControl tahat contains one single
property. The property name is Columns , his type is ColumnCollection (
inherits from CollectionBase). this...
|
by: Chris |
last post by:
Ok, I think this is an easy one - I've just been staring at it too long.
I'm creating a datagrid in asp.net/c# from scratch, i.e. nothing at all in
the aspx page. I'm also creating all the...
|
by: Girish |
last post by:
OK.. phew. Playing with data grids for the past few days has been fun and a
huge learning experience..
My problem. I have a requirement to display a gird with a gird. Within the
embedded grid,...
|
by: yogarajan |
last post by:
hello friend
i need urgent help
this is my aspx page
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Reguserdetailstest.aspx.cs" Inherits="Reguserdetailstest" %>
<!DOCTYPE html...
|
by: taylorcarr |
last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
|
by: ryjfgjl |
last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
|
by: ryjfgjl |
last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
|
by: BarryA |
last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
|
by: nemocccc |
last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
|
by: Sonnysonu |
last post by:
This is the data of csv file
1 2 3
1 2 3
1 2 3
1 2 3
2 3
2 3
3
the lengths should be different i have to store the data by column-wise with in the specific length.
suppose the i have to...
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
|
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers,...
|
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
| |
