CODEWITHSUNDEEP
csscss-float
Jeremy H
Jeremy H

Reputation: 1794

Nested floating divs cause outer div to not grow

If anyone can suggest a better place than stackoverflow for css questions please let me know.

I have an outer div with background and border and then I need to have two columns within the colored box. Some reason when I place the floating divs inside the outer div, the outer div does not grow.

Here is my HTML:

<div class="tip_box">
    <h3>Send</h3>
    <hr />
    <form id="email_form">

        <div class="three-columns">
            <div class="contact_form_input">
                <h6>Your Name</h6>
                <input type="text" name="name_text_box" class="form_input" id="name_text_box" />
            </div>
            <div class="contact_form_input">
              <h6>Your Email</h6>
              <input type="text" name="email_text_box" class="form_input" id="email_text_box" />
            </div>
        </div>
        <div class="three-columns">
            <div class="contact_form_input">
                <h6>Recipient Name</h6>
                <input type="text" name="name_text_box" class="form_input" id="Text1" />
            </div>
            <div class="contact_form_input">
              <h6>Recipient Email</h6>
              <input type="text" name="email_text_box" class="form_input" id="Text2" />
            </div>
        </div>

    </form>
</div>

<p>This is where your message will go. Anything you want, as long as you want. Make it personal; make the recipient know you care.</p>

Here is my CSS:

.three-columns {
    width: 290px;
    float: left;
    margin-right: 45px;
}
.tip_box {
    padding: 20px;
    margin: 20px 0px;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    -khtml-border-radius: 10px;
    border-radius: 7px;
    padding-left: 55px;
    background: #eee;
    font-style:italic;
    background: #eff7d9 url(../images/icons/tip.png) no-repeat scroll 10px 15px;
    border: 1px solid #b7db58;
    color: #5d791b;
}

Screenshot:

http://dl.dropbox.com/u/2127038/cssissue.png

Upvotes: 12

Views: 8005

Answers (5)

Hem
Hem

Reputation: 31

Add following HTML after <div class="tip_box"></div>:

<div class="clear"></div>

Here is the CSS:

.clear{
clear:both;
}

It will surely work.

Upvotes: 3

Yi Jiang
Yi Jiang

Reputation: 50115

You're going to need what is commonly known as a clearfix. In this case a overflow: hidden on the containing element will do - see: http://www.jsfiddle.net/yijiang/zuNwH/2

.tip_box {
    overflow: hidden;
}

As an aside, you might also want to use label elements instead of h6 to markup labels for your form elements, and use a list instead of individual divs for containing each label - input pair, and reduce the amount of class attribute you use by relying on more complex selectors for your CSS file. 

<li>
    <label for="recipient_email">Recipient Email</label>
    <input type="text" name="email_text_box" id="recipient_email" />
</li>

Upvotes: 1

meder omuraliev
meder omuraliev

Reputation: 186602

.tip_box { overflow:hidden; zoom:1; }

this establishes new block formatting context in ie7+ and other browsers, triggers haslayout in ie6 to contain floats

Upvotes: 2

theazureshadow
theazureshadow

Reputation: 10059

Non-float blocks containing float blocks will not automatically expand, since float blocks are taken outside the normal flow (or at least specially outside the flow). One way to correct that is to specify the overflow property to hidden or auto.

.tip-box { overflow: auto; }

See quirksmode for more.

Upvotes: 19

tster
tster

Reputation: 18237

In this case I wouldn't float the divs left, I would make them display: inline or inline-block.

Your 3 columns will turn into 2 columns, then 1 column if the browser window shrinks.

Upvotes: 0

Related Questions