We have answer of your question!

100% solved queries, no empty question

Question: Why won't the elements stay in the <div>?


0

Have a look at this fiddle Here for the CSS and HTML view.

The code is:

<body>
    <div class="header-bar" id="header-bar">
        <div class="title-bar" id="title-bar">
            <table id="header-table" class="header-table" width="100%">
                <tr>
                    <td>
                        <div class="site-title" id="site-title">Site Title</div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div class="site-tagline" id="site-tagline">Site Tagline</div>
                    </td>
                </tr>
            </table>
        </div>
        <div class="header-login-bar" id="header-login-bar">
            <div class="header-login-form" id="header-login-form">  
              <table>
                    <tr>
                        <th>Name</th>
                        <td><input type="text" name="user-email"/></td>
                    </tr>
                    <tr>
                        <th>Password</th>
                        <td><input type="password" name="user-pass"/></td>
                    </tr>
                </table>
            </div>
            <div class="header-logged-in" id="header-logged-in">
                Welcome {$user}.
                <a href="#">Dashboard</a>
                <a href="#">Logout</a>
            </div>      
        </div>
    </div>
    <div id="content-bar" class="content-bar">
        This is the content part
    </div>
</body>

The div with id header-bar must contain all of the elements drawn in this segment, but I cannot understand why, this segment refuses to behave. I am new to design, using more of graphical tools like Dreamweaver with code and design views to make these things, even there the content gets placed all wrong. And in the browser, the div with id header-bar does not show any text at all. The div with id header-bar reports a height of 0px in Chrome's Inspect Element.

Question author Anshul | Source

Answer


1


Add overflow:auto to your header-bar div. When the child elements of any element are floated, they're removed from the normal flow of the document which is why your header-bar div reports a height of zero. Adding overflow:auto to the parent div (header-bar) restores the expected behavior.

jsFiddle example

Answer author J08691

Tickanswer.com is providing the only single recommended solution of the question Why won't the elements stay in the <div>? under the categories i.e html , . Our team of experts filter the best solution for you.

Related Search Queries:


You may also add your answer

Thanks for contributing an answer to Tick Answer!