3 columns using DIV tags... help!

Posted on 2006-04-24
Medium Priority
Last Modified: 2008-01-09
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?
Question by:ocgstyles
  • 2

Expert Comment

ID: 16533911
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).
LVL 10

Accepted Solution

ljo8877 earned 1200 total points
ID: 16538357
For the images in the right, there needs to be a clearing element to hold the bottom border down like this

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

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.

Author Comment

ID: 16540176
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!
LVL 10

Expert Comment

ID: 16540272
Glad I could help! Thanks for the grade.

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
Suggested Courses
Course of the Month17 days, 9 hours left to enroll

829 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question