Question

I have the following:

                <div class="outer" style="margin-bottom: 10px">
                   <div class="dialog-float">
                      <select name="AccountID" id="AccountID">
                     ...    
                      </select>
                   </div>
                   <div class="dialog-float">
                      <a href="xx"  role="button">Create</a>
                   </div>
                   <div class="dialog-float">
                      <label for="htmlEdit">Html Editor</label>
                   </div>
                </div>

What I would like to do is:

a) Have a 10px margin below the class “outer”. Right now it seems like that DIV does not have any height and the margin doesn’t appear properly.
b) Have all the “dialog-float” classes line up vertically.

Can someone give me some suggestions on what I am doing wrong.

Answer 1

add the following to your css file

.clear_cont, .cc {
    min-height: 1px;
}

.clear_cont:after, .cc:after {
    clear: both !important;
    content: ".";
    display: block;
    font-size: 0;
    height: 0;
    visibility: hidden;
}

//ok now IE6 doen't have min-height property here is a hack
* html .clear_cont, * html .cc{
    height: 1px;
}

Whenever you need to fix this kind of problems add “cc” or “clear_cont” class to the container DIV

<div class="outer cc" style="margin-bottom: 10px">