473,320 Members | 1,953 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

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 1633
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

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

Similar topics

3
by: Tcs | last post by:
My backend is DB2 on our AS/400. While I do HAVE DB2 PE for my PC, I haven't loaded it yet. I'm still using MS Access. And no, I don't believe this is an Access question. (But who knows? I...
6
by: Chuck | last post by:
I have a report with three columns, accross then down, and two groups. Currently the group headers are only one column wide and appear in the left hand column. How can I make the group header be...
4
by: Nad | last post by:
Hello, Within a panel, I have two data lists beside one another and I want to add a small button centered between these datalists. However, the button moves to the bottom between the datalists...
2
by: Wayne Wengert | last post by:
I have an aspx page built in VWD 2005 in which I use <center></center> to center the various components. One of the components is a radiobutton list. I do want that list to be centered on the page...
0
by: James Puffer | last post by:
I am printing report with 4 columns (text and pictures) but can't figure out how to get a header printed on the first page that is centered on the page not the first column.
5
by: Stan R. | last post by:
Greetings. I have a couple of questions concerning CSS layouts, as apposed to the old <tablemethod for creating layouts . Even after spending the last few days searching all over Google Groups, I...
14
by: varois83 | last post by:
Hi The code I am pasting below is just practice so the colors are goofy, it's to help me see what is where. The text isn't styled either at this time. I am working on a fixed 2...
9
by: alice | last post by:
I've been slowly learning CSS, but wanting to jump ahead and get a page to have 4 columns of text that are centered on the page, no matter how big the monitor/browser/window, I'd like each one to...
2
by: robtyketto | last post by:
Greetings, Within my jsp I have HTML code (see below) which accepts input, one of these fields sequence unlike the others is an Integer. <FORM ACTION="wk465682AddFAQ.jsp" METHOD="POST"> Id:...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

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.