Question

I have the following html code when I have the attribute float right then the height of the parent div becomes smaller than the child’s div

 <div id="notificationBar"> 
    <div style="float:right;">
        {% if user.is_authenticated %}
            Hello {{ user }}
            <a href ="/accounts/logout/" style="margin-left:10px;"> Logout </a>
        {% else %}
            Hello Guest
            <a href ="/accounts/login/" style="margin-left:10px;"> Login </a>
        {% endif %}
    </div>
</div>

However when I remove th float right attribute as given below then the parent div accommodates the child div as it should normally behave.

<div id="notificationBar">  
    <div>
        {% if user.is_authenticated %}
            Hello {{ user }}
            <a href ="/accounts/logout/" style="margin-left:10px;"> Logout </a>
        {% else %}
            Hello Guest
            <a href ="/accounts/login/" style="margin-left:10px;"> Login </a>
        {% endif %}
    </div>
</div>

Can anybody explain why is this happening. One solution is to set a height of the parent div, but then that is not a flexible solution. I want the height of the parent div to be changed according to the height of the child div.

Answer 1

How about clear the floating as follows

<div id="notificationBar">
    <div style="float:right;">
        {% if user.is_authenticated %}
            Hello {{ user }}
            <a href ="/accounts/logout/" style="margin-left:10px;"> Logout </a>
        {% else %}
            Hello Guest
            <a href ="/accounts/login/" style="margin-left:10px;"> Login </a>
        {% endif %}
    </div>
    <div style="clear: both; height: 0;"></div>
</div>`