3 columns using DIV tags... help!

Posted on 2006-04-24
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,, 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
    LVL 1

    Expert Comment

    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

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

    Author Comment

    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

    Glad I could help! Thanks for the grade.

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Training Course: Adobe Dreamweaver CC 2015

    Adobe Dreamweaver Creative Cloud is used by web designers and front-end developers and allows you to visualize your site in real-time as you code. This course covers exam objectives for the Adobe Certified Associate (ACA) certification.

    Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
    Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
    In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
    In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

    737 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

    Need Help in Real-Time?

    Connect with top rated Experts

    18 Experts available now in Live!

    Get 1:1 Help Now