473,548 Members | 2,636 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Problem with Columns using HTML and CSS

5 New Member
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_t op">
<li>&nbsp;&nbsp ;<script language=javasc ript>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="sitesearc h" value="xx.co.uk " checked /> Only search xx.co.uk
</div>

</form>

<br />
<br />
<br />

<h3>Welcome</h3>
<p>Welcome.<b r />
Text.<br />
Text<br />
<br />
<br />
For more information <a href="xx.php">C ontact 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"> &copy; xxx. &nbsp;</div>
<div id="copyright"> &nbsp;</div>
</body>[/html]


and the CSS file :

Expand|Select|Wrap|Line Numbers
  1. html, body {
  2.     margin:0;
  3.     padding:0;
  4.     text-align:center;
  5. }
  6.  
  7. body {
  8.     background-color:#EAEAEA;    
  9. }
  10.  
  11. #main_block {
  12.     text-align:left;
  13.     margin:0 auto;
  14.     padding:10px 15px;
  15.     width:706px;
  16.     height:auto;
  17.     background:url("../x2.gif") repeat-y;
  18.     font:12px Verdana,Arial,Helvetica,sans-serif;
  19.     color:#666;
  20. }
  21.  
  22. #banner {
  23.     font:6px Desyrel,BordeauxMedium;
  24.     margin:5px;
  25.     background:url("../x4.jpg") no-repeat;
  26.     width:662px;
  27.     height:105px;
  28.     padding:10px 0 0 10px;
  29. }
  30.  
  31. #content {
  32.     width:676px;
  33. }
  34.  
  35. #main {
  36.     width:465px;
  37.     height:auto;
  38.     float:left;
  39.     padding:10px;
  40. }
  41.  
  42. #main a {
  43.     text-decoration:none;
  44.     font-weight:bold;
  45.     color:#000000;
  46. }
  47.  
  48. #main a:hover {
  49.     background-color:#ADD8E6;
  50.     color:#000000;
  51. }
  52.  
  53.  
  54. #mail_error {
  55.     color:#FF0000;
  56.     text-align:left;
  57. }
  58.  
  59. #main p{
  60.     color:#181818;
  61. }
  62.  
  63.  
  64. #box {
  65.     width:156px;
  66.     height:auto;
  67.     padding:0 10px;
  68.     border:1px dotted #FC6;
  69. }
  70.  
  71. #menu {
  72.     list-style:none;
  73.     margin:4px;
  74.     text-align:center;
  75.     width:670px;
  76.     height:15px;
  77.     background-color:#ADD8E6;
  78.     font:11px Verdana,Arial,Helvetica,sans-serif;
  79.     text-decoration:none;
  80. }
  81.  
  82. #menu a {
  83.     font-weight:bold;
  84.     text-decoration:none;
  85.     color:#666;
  86. }
  87.  
  88. #menu a:hover {
  89.     font-weight:bold;
  90.     background-color:#99CCFF;
  91.     color:#000000;
  92. }
  93.  
  94.  
  95. #menu_top {
  96.     margin:5px;
  97.     width:662px;
  98.     background-color:#ADD8E6;
  99.     padding:0 0 0 5px;
  100. }
  101.  
  102. #menu_list_top {
  103.     font-weight:bold;
  104.     list-style:none;
  105.     margin:5px 0;
  106.     padding:0 0 2px 0;
  107. }
  108.  
  109.  
  110.  
  111. #column {
  112. float:none;
  113.     list-style:none;
  114.     margin:5px 0;
  115.     padding:0;
  116.     width:170px;
  117.     text-align:center;
  118.  
  119. }
  120.  
  121. #column a {
  122.     text-decoration:none;
  123.     padding:5px;
  124.     width:170px;
  125.     display:block;
  126.     color:#666;
  127. }
  128.  
  129. #column a:hover {
  130.     color:#666;
  131.  
  132. }
  133.  
  134. #noLine a {
  135.     border-bottom:0;
  136. }
  137.  
  138. h1 {
  139.     font-size:28px;
  140.     margin:0;
  141.     color:#000000;
  142. }
  143.  
  144. h2 {
  145.     font-size:12px;
  146.     margin:0 0 0 5px;
  147.     color:#FFF;
  148. }
  149.  
  150. h3 {
  151.     font-size:28px;
  152.     margin:0;
  153. }
  154.  
  155. #clear {
  156.     clear:both;
  157. }
  158.  
  159.  
  160. p {
  161.     line-height:1.5em;
  162.     color:#585858;
  163. }
  164.  
  165. #copyright, #copyright a {
  166.     padding-top:5px;
  167.     text-decoration:none;
  168.     text-align:center;
  169.     font:10px Verdana,Arial,Helvetica,sans-serif;
  170.     color:#666;
  171. }
  172.  
  173. #copyright a:hover {
  174.     color:#369;
  175. }
  176.  
  177. #footer {
  178.     margin:0 auto;
  179.     height:10px;
  180.     width:736px;
  181.     background:url("../xc.gif") no-repeat;
  182. }
  183.  
  184. #search {
  185.     font:9px Verdana,Arial,Helvetica,sans-serif;
  186. }

Many thanks.
Feb 4 '08 #1
7 1418
Death Slaught
1,137 Top Contributor
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
  1.  display:inline;
This will move your copyright but that's easy to move back.

^_^ Hope it helps, Thanks, Death
Feb 4 '08 #2
fatgoth
5 New Member
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
  1.  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
Feb 4 '08 #3
Death Slaught
1,137 Top Contributor
Strange it worked fine for me. Try removing the 'float:none'.

Expand|Select|Wrap|Line Numbers
  1.  
  2. #column {
  3. display:inline;
  4. list-style:none;
  5. margin:5px 0;
  6. padding:0;
  7. width:170px;
  8. text-align:center;
  9. }
  10.  
^_^ Hope it helps, Thanks, Death
Feb 4 '08 #4
fatgoth
5 New Member
Strange it worked fine for me. Try removing the 'float:none'.

Expand|Select|Wrap|Line Numbers
  1.  
  2. #column {
  3. display:inline;
  4. list-style:none;
  5. margin:5px 0;
  6. padding:0;
  7. width:170px;
  8. text-align:center;
  9. }
  10.  
^_^ 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
Feb 4 '08 #5
drhowarddrfine
7,435 Recognized Expert Expert
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;
Feb 4 '08 #6
fatgoth
5 New Member
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
Feb 4 '08 #7
fatgoth
5 New Member
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
  1. #column {
  2. list-style:none;
  3. margin:5px 0 0 485px;
  4. padding:0;
  5. width:170px;
  6. text-align:center;
  7. }
Many thanks to both of you for all your help.

Fatgoth
Feb 4 '08 #8

Sign in to post your reply or Sign up for a free account.

Similar topics

1
2512
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. Amazingly I have managed to display the table - no problem, I can select rows - no problem, BUT I can't work out how to display more than one of the...
3
1113
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 property contains an elements list and the type of these elements is Column. On a WebForm (in design mode), i insert my MyControl webcontrol . Je...
0
1100
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 columns programmatically (templatecolumns). This part works fine. Next, I am adding ImageButtons to the headers of the columns, which I am attaching...
7
3332
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, theres a requirement to show a drop down menu list (this is a control I downloaded online) in one of the columns. For the purposes of this question,...
2
1278
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 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
0
7512
marktang
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, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main...
0
7438
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language...
0
7707
Oralloy
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, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. ...
0
7951
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that...
1
7466
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 Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For...
0
7803
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the...
0
6036
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then...
0
3495
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in...
0
3475
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.