469,572 Members | 1,307 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

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

CSS Question: Columns within a centered box

Hello. I'm not a CSS genius, but I'm learning by doing. I am creating a website where all the content is within a 650px box that is centered. Within that box, there are 2 columns. The left column will contain the bulk of the content and the right column will act as a sidebar type of thing. Everything looks perfect in Firefox, but whenever I test the page in IE the right column doesn't appear but everything else looks fine.

Here is the CSS code that I am using:

Expand|Select|Wrap|Line Numbers
  1. .MainBody {
  2.     margin-left: auto;
  3.     margin-right: auto;
  4.     border: 1px solid #000000;
  5.     background-color: #FFFFFF;
  6.     width: 650px;
  7.     overflow: hidden;
  8. }
  9.  
  10. .LeftColumn {
  11.     width: 435px;
  12.     margin-left: 3px;
  13.     margin-top: 2px;
  14.     text-align:justify;
  15.  
  16. }
  17.  
  18. .RightColumn {     
  19.     width: 200px;
  20.     position:absolute;
  21.     border: none;
  22.     border-width: thin;
  23.     margin-left: 448px;
  24. }
  25.  
I had to give the .RightColumn class an absolute position or else the the two columns would not be side-by-side--the left column would appear beneath and to the left of the right column.I realize I could give everything an absolute position, but I would like the .MainBody box to expand to fit the content of the .LeftColumn box. When I give everything an absolute position it doesn't do that.

Thanks!
Jun 22 '07 #1
8 1400
drhowarddrfine
7,435 Expert 4TB
Instead of absolutely positioning the right one, Do float:left on the left column and float:right on the right column.
Jun 22 '07 #2
Instead of absolutely positioning the right one, Do float:left on the left column and float:right on the right column.
That works perfectly for IE! Everything looks exactly how I want it to. Now Firefox is giving me a problem. In Firefox, the right column is above the left column. I would like the left column to move up next to the right column so that the columns are side-by-side. I think the right column is above the left because it comes first in the body of the HTML file.

Do you have any suggestions?
Jun 22 '07 #3
drhowarddrfine
7,435 Expert 4TB
Then you must have something else going on because I don't have that. Post your complete markup.
Jun 22 '07 #4
Here is what's in my header:

Expand|Select|Wrap|Line Numbers
  1. <style type="text/css">
  2. <!--
  3. .MainBody {
  4.     margin-left: auto;
  5.     margin-right: auto;
  6.     border: 1px solid #000000;
  7.     background-color: #FFFFFF;
  8.     width: 650px;
  9.     overflow: hidden;
  10.  
  11. }
  12.  
  13. .header {
  14.             border-bottom-style: dashed;
  15.             border-bottom-width: thin;
  16.             }
  17. .footer {
  18.     font-size: small;
  19.     color: #999999;
  20.     background-color: #334f92;
  21.     clear:both;
  22. }
  23. .left {
  24.     width: 435px;
  25.     margin-left: 3px;
  26.     margin-top: 2px;
  27.     text-align:justify;
  28.     float:left;
  29.     clear:left;
  30.  
  31. }
  32.  
  33. .right { width: 200px;
  34.             border: none;
  35.             border-width: thin;
  36.             margin-left: 448px;
  37.             margin-top: 0px;
  38.             border-left-style: dashed;
  39.             border-left-width: thin;
  40.             border-bottom-style: dashed;
  41.             border-bottom-style: thin;
  42.             float:right;
  43.  
  44. }
  45.  
  46. body {
  47.     background-image:url(images/background.gif);
  48. }
  49. a:link {
  50.     text-decoration: none;
  51. }
  52.  
  53. a:visited {
  54.     text-decoration: none;
  55.     color: #0000FF;
  56. }
  57. a:hover {
  58.     text-decoration: underline;
  59. }
  60. a:active {
  61.     text-decoration: none;}
  62.  
  63. -->
  64. </style>
  65.  
And here is the body:

Expand|Select|Wrap|Line Numbers
  1. <body>
  2. <div class="MainBody">
  3.       <img src="images/banner.gif" alt="" width="650" height="150" class="header"/>
  4.  
  5.       <div class ="right"><img src="images/danny_tara.gif" alt="Danny and Tara" width="200" height="176" />
  6.       <br />
  7.         <p>Tara and Danny</p></div>
  8.  
  9.      <div class="left">
  10.       <p>content here</p>
  11.         </div>
  12.  
  13.  <div align="center" class="footer">&copy; 2007 Danny Yoder | dannyyoder@gmail.com </div>
  14.  
  15. </div>
  16. </body>
  17.  
With the code as is, it works in IE. In Firefox the content in the left column appears beneath and to the left of the content in the right column. I have a sneaking suspicion that the clear:left in the .left class is a problem, but without it the content appears in the footer.

Thanks so much for your help
Jun 22 '07 #5
drhowarddrfine
7,435 Expert 4TB
That could be causing a problem but it's your margin-left that's taking up that space and not letting the left column fill it. IE is doing it wrong, as usual.
Jun 22 '07 #6
That could be causing a problem but it's your margin-left that's taking up that space and not letting the left column fill it. IE is doing it wrong, as usual.
I could switch everything to absolute positions but then I can't have the main content box centered. Do you think a better solution would be to use a table to to create two columns within the centered box?

I would think that others have fun into this problem and that there is a good way to overcome this problem using CSS.

Thanks again.
Jun 22 '07 #7
drhowarddrfine
7,435 Expert 4TB
Tables are never to be used for layout.

Did you remove the left-margin? That IS the solution.
Jun 22 '07 #8
Tables are never to be used for layout.

Did you remove the left-margin? That IS the solution.
I did remove the left-margin and the problem is solved! Thanks so much for you help. In the end the solution was simple, but sometimes a simple solution is the hardest to find. It works in both browsers, although it looks better in Firefox than IE, but that's no suprise. I'll be sure to include a firefox button on the finished site.

Thanks again!
Jun 22 '07 #9

Post your reply

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

Similar topics

3 posts views Thread by Tcs | last post: by
4 posts views Thread by Nad | last post: by
2 posts views Thread by Wayne Wengert | last post: by
reply views Thread by James Puffer | last post: by
14 posts views Thread by varois83 | last post: by
9 posts views Thread by alice | last post: by
reply views Thread by suresh191 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.