469,964 Members | 1,754 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

home > topics > html / css > questions > problem with columns using html and css

Post your question to a community of 469,964 developers. It's quick & easy.

Problem with Columns using HTML and CSS

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>&nbsp;&nbsp;<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">&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 1225
Death Slaught
1,137 1GB
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
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 1GB
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
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 Expert 4TB
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
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
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

Post your reply

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

Similar topics
DataGrid Problem
1 post views Thread by Joe Bloggs | last post: by
[Need Expert] Big design time problem
3 posts views Thread by Loïc | last post: by
datagrid from scratch/events problem
reply views Thread by Chris | last post: by
Custom build DataGridColumn event problem
7 posts views Thread by Girish | last post: by
gridview problem
2 posts views Thread by yogarajan | last post: by
Reading Pseudocode
1 post views Thread by rainxy | last post: by
BYTES.COM © 2022
About Us
Advertise
Terms Of Use
Privacy Policy
Manage Cookies
Contact Us
Sitemap

Follow us! Get the Latest Bytes Updates
By using this site, you agree to our Privacy Policy and Terms of Use.