3 columns using DIV tags... help!

Hi Experts...

I trying to design a basic layout using CSS.  Of course I could do all this using tables, but I am again attempting doing it the "cleaner" looking way using CSS.  If you view my example layout, http://modunique.com/ee, in both IE and Firefox, you'll see my problems.

In IE and Firefox:
In the boxes on the right, if I have an image, and only a little text, the image will run over the border.  Can I prevent this?  I tried min-height (CSS) to set a minumum height, no luck.

In Firefox:
The background color doesn't seem to be filling in behind the 3 columns I created as it does in IE and the lower border sits right below the blue menu.  The main content is sitting under (z-index-like) the bottom border....

I know these browsers deal with layout differently.  From what I hear, Firefox is correct, and MS kinda does its own thing.  But if you state a strict DOCTYPE, it will force MS to be more correct.  So I put the DOCTYPE, but no luck.  

I tried to find tutorials online for getting these columns correct, but can't seem to find anything that I can incoorporate into what I already have.  

Can someone give me some guidance?
LVL 5
ocgstylesAsked:
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.

martin_p_hCommented:
Try slapping an overflow:auto; on the boxes on the right. It should fill out the box if the images are contained within it. Also, you could put the overflow:auto; in the main box, it might fix the problem (so long as the height isn't specified on the boxes, otherwise it will apply scrollbars).
0
ljo8877Commented:
For the images in the right, there needs to be a clearing element to hold the bottom border down like this

CSS
.clear {
    clear: both;
}

<div class="section">
      <div class="sh">header</div>
                              
      <img src="images/pda.jpg">
      <p>this works in IE, but not firefox...      adf asdf</p>
       <div class="clear"></div>
</div>

The same solution applies to your second issue except I think you can just adjust the footer CSS with a clear

#footer {
      background: url("../images/bkg_bottom.gif") no-repeat;
      width: 900px;
      height: 17px;
      position: relative;
      text-align: center;
      font-family: verdana;
      font-size: 10px;
      color: gray;
       clear: both;
}

This <div class="sh">header</div> would be better represent as <h2 class="sh">header</h2> (or any h1 - h6)

IE incorrectly prevents some elements from moving up under floats as the specification calls for. This worked in your design, but everything that does not have a clear style should move under floats and containers with nothing other than a flow should have no height unless there is a element with style clear to hold the bottom down. This gives you much more flexibility in design.
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
ocgstylesAuthor Commented:
ljo... you made my day!  

i had to adjust the CSS a little more to use the <h#> tags.  The header was dropped down a line, so there was a white bar above the header.  Adding margin 0 fixed that (in both ie and firefox)

h3 {
      background-color: #004990;
      font-family: arial;
      color: white;
      font-size: 12px;
      font-weight: bold;
      margin: 0px;              <-----------  added
      padding: 4px 10px;
      text-align: center;
      position: relative;
      cursor: default;
}

thanks again!
0
ljo8877Commented:
Glad I could help! Thanks for the grade.
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.