Question

I’ve got a dialog box that isn’t displaying correctly, but I can’t figure out why. The dialog is made up of a few divs.

The dialog is made up of a parent div that contains three sub divs for the title, body and footer. Each of the sub divs is further divided into 3 sub sub divs for left, center and right. What I can’t figure out is why my left footer sub sub div appears to the right of the right side body sub sub div.

I’ve simplified the html below so the structure is clear.

<div class="dialog">
  <div class="titlebar">
    <div class="titlebarleft">
    </div>
    <div class="titlebarcenter">
    </div>
    <div class="titlebarright">
    </div>
  </div>
  <div class="con">
    <div class="conleft">
    </div>
    <div class="concenter">
    </div>
    <div class="conright">
    </div>
  </div>
  <div class="footer">
    <div class="footerleft">
    </div>
    <div class="footercenter">
    </div>
    <div class="footerright">
    </div>
  </div>
</div>

Most of the CSS is the same with each of the 3 main sections (titlebar, body, footer)

Title:

.titlebar {
    height: 38px;
    width: 100%;
}

Content:

.con {
    background: url("../images/dialog/vertical.png") repeat-y scroll 0 0 #FFFFFF;
    font-family: Tahoma,"Lucida Grande",Verdana,Arial,Helvetica,sans-serif;
    font-size: 11px;
    width: 100%;
}

Footer:

.footer {
    font-family: Tahoma,"Lucida Grande",Verdana,Arial,Helvetica,sans-serif;
    font-size: 11px;
    height: 37px;
    width: 100%;
}

Here’s the left footer CSS:

.footerleft {
    background: url("../images/dialog/static.png") no-repeat scroll 0 -83px transparent;
    float: left;
    height: 100%;
    width: 9px;
}

Here’s a picture of the problem: http://s9.postimage.org/ebj6w7ynj/Dialog_Corner.jpg

Answer 1

all div elements is display:inline . so if you write a div after a div element , the width of parent element will break div to new line (just if two div width was more than parent width).
now you can set clear:both (floats) to .footer class to break line before this element .

.footer {
    font-family: Tahoma,"Lucida Grande",Verdana,Arial,Helvetica,sans-serif;
    font-size: 11px;
    height: 37px;
    width: 100%;
    clear:both;
}

but i am not sure that works in all browsers .