Why is this layout so squirrely?

Head out to http://brucegust.com/portfolio/calendar/body.php

Now take a look at this screenshot:

screenshot
This should be cake and ice cream. I've got the equivalent to this:

<div style="width:100%;">
<div style="width:25%; float:left;"></div>
<div style="width:75%;"></div>
</div>

The result should be a two column layout with 25% of the page being my left column and the other 75% being the body of the page.

No matter what I've attempted to do, I've got a portion of my "main body" finding its way beneath the left column (the months). They should be at the top and to the right of my left column - just like you see with the screenshot.

What am I doing wrong?

Thanks!
brucegustPHP DeveloperAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

brucegustPHP DeveloperAuthor Commented:
BTW: It's aligned alright in Firefox, but not in IE. I'm overlooking something, but I don't know what.
0
F IgorDeveloperCommented:
Check if anything in your content (left side) can be broken (some html tag without closing, some internal  DIV with "float" or "z-index" CSS property,

Remove some of  (suspicious) content to check if it works as you want.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Jessica WhitleySoftware DeveloperCommented:
Did you by chance put the  divs in a row?
Div="row"
 You could do div width or do columns after you put them in a row. The row should help align them.
0
brucegustPHP DeveloperAuthor Commented:
I got it figured out. I never ceased to be amazed at the fact that there's usually more than one way to do something. What finally worked was this:

<div style="width:100%;">
      <div style="width:550px; height:auto; float:left;">
      <?php include("left_column.php"); ?>
      </div>
      <div style="width:800px; height:auto; float:left;">
      <?php include("calendar_body.php"); ?>
      </div>
</div>

Got rid of the min-widths and assigned both my divs to a "float:left."

Thanks for looking at it!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.