How come when i float three elements to the right in a div, they drop out?

Question

I'm just trying to float some elements to the right, which are contained within a div. This works fine with the first two elements but when I float the third, they all appear to drop out of the div, with the final element to be float sitting slightly lower than the other two. Below is my code:

    <div class="contain"><div class="info"> 
        <button id="button">?</button>
        <input class="sign_up" type="text" name="postcode"/>
        <p class="sign_up">Post Code:</p>
        </div>
        </div>

With the css:

    <style>
#button  {
    border-radius: 50%;
    border: 1px solid black;
    float: right;
}
.contain    {
    width: 40%;
    border: 1px solid black;
}
p.sign_up   {
    float: right;
}
input.sign_up   {
    float: right;
}

Any explanation on why this happens would be appreciated as I'm new to this as im sure you can tell. Thanks in advance

Answer 1

Let me help you to understand the problem and then solve it.

The width of the "contain" class is set to 40%. If the elements can't 'fit' within this then the elements 'flow' to the next line. This is why you see the elements flow to the next line(See below)

http://jsfiddle.net/t8v5K/

NOTE: I have added:

    background-color:orange;
    height: 200px;

to the "contain" class for better visibility.

To make my point clear, if you were to increase the width of the "contain" class then paragraph tag could fit in the same line. See the below fiddle where the width is set to 400px;

http://jsfiddle.net/C297f/

Now, the next thing is that the paragraph tag is a block-level element. By default, it has its own styling( usually provided by the browsers). You will need to overwrite this in this fashion:

* {
    margin: 0;
}

This would remove the default margins applied to the page by the browsers. You can see its effect here:

http://jsfiddle.net/chCwA/

Alternately, you could apply this margin to the p.sign_up class as well in this manner:

p.sign_up   {
    float: right;
    margin:0;
}

See this: http://jsfiddle.net/8xtGr/

Hope this solves your problem.

Answer 2

You can try use display: inline-block

 <div class="contain">
 <div class="info"> 
     <p class="sign_up">Post Code:</p>
    <input class="sign_up" type="text" name="postcode"/>
     <button id="button">?</button>
 </div>
 </div>

CSS:

    #button  {
    border-radius: 50%;
    border: 1px solid black;
    display: inline-block;
}
.contain    {
    width: 40%;
    border: 1px solid black;
}
p.sign_up   {
    display: inline-block;
}
input.sign_up   {
    display: inline-block;
    width: 20%;
}

JSFIDDLE

OR You should set width for input - input.sign_up

Answer 3

Move your .contain class to the beginning of your CSS. CSS stands for Cascading Style Sheets (emphasis mine). This means that styles are applied in the order you list them. Because it is listed after an element with float applied, it will also float.

Since it's floating, it is removed from the default document flow*. When elements float, their parent containers will collapse if there are no other elements within that parent container.

*Here removed from the default document flow means that, when you float something, it is moved to a specific position. This re-positioning is intentional, yes (that's the point of floating it, after all), but is not the default (or normal) flow.

Answer 4

This is because floats cause their containers to collapse.

You can read about how to fix this on CSS Tricks

Answer 5

This is known as "Div Collapse", it occurs when you float elements inside a div without clearing the floats. You have to clear float at the end of the div, the best way to do so is by a
element

<br class="clear" />

.clear { clear:both; }

And here is a fiddle

And here is a reference on div collapsing.

Answer 6

Just resort the HTML Tags. Hope this is what you want.

I also add a form tag cause its a form :)

Oky so i explain. I use <span> cause <p> tag is a block element so it use the whole width. And span is as width as the text is.

I also add <form> tag cause you have a <input> tag and this need a form tag do define the action like a php script and the method. Method could be post oder get.

Form -> http://www.w3schools.com/tags/tag_form.asp

Span -> http://www.w3schools.com/tags/tag_span.asp

With clear:both; i delete the float:left; so that the follow elements are not affected by floating. You could only clear:left; but i do alway both sides.

Clear -> http://www.w3schools.com/cssref/pr_class_clear.asp

http://jsfiddle.net/3FNKk/

HTML

<div class="contain">
    <div class="info"> 
        <span class="sign_up">Post Code:</span>
        <form action='#' method="post">
        <input class="sign_up" type="text" name="postcode"/>
        <button id="button">?</button>
        </form>
    </div>
</div>

CSS

.contain {
    border: 1px solid black;
}

.sign_up{
    float:left;
}

.info {
    clear:both;
}