By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,724 Members | 1,655 Online
Bytes IT Community

Home Questions Articles Browse Topics Latest Top Members FAQ

home > topics > html / css > questions > problem with columns using html and css
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,724 IT Pros & Developers. It's quick & easy.

Problem with Columns using HTML and CSS

P: 5
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
Share this Question
Share on Google+
7 Replies
Death Slaught
100+
P: 1,137
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
P: 5
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
100+
P: 1,137
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
P: 5
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
Expert 5K+
P: 7,435
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
P: 5
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
P: 5
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.

Question stats

  • viewed: 1116
  • replies: 7
  • date asked: Feb 4 '08
BYTES.COM © 2019 About Bytes | Advertise on Bytes | Privacy Policy | Manage Cookies
Sitemap | HTML / CSS Answers Sitemap | HTML / CSS Insights Sitemap

Follow us to get the Latest Bytes Updates