Member Avatar for phphp

Sir I have following codes for Bootstrap header

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>Bootstrap Page Header</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="-1" />
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>

    <style type="text/css">
        html {
            overflow: auto;
            margin: 0;
            height: 100%;
            min-height: 100%;
        }
        body {
            font-family: Georgia, "Times New Roman", Times, serif;
            margin: 0;
            height: 90%;
            padding-bottom: 60px;
            position: relative;
        }

        .userbox {
            float: right;
            width: 300px;
            height: auto;
            padding: 7px;
            overflow: hidden;
            margin-right: 2px;
            margin-top: 0;
            text-align: center;
            color: #666;
            font-size: 16px;
            font-weight: bold;
            line-height: 20px;
            border: 0px solid red;
        }
        .userpic {
            float: right;
            width: 80px;
            padding-top: 2px;
            overflow: hidden;
            margin-right: 1px;
            margin-top: -1px;
            text-align: left;
            color: #666;
            font-size: 16px;
            font-weight: bold;
            line-height: 10px;
            border: 0px solid red;
        }
    </style>
</head>
<body>

 <!--   <div id="header"> -->
<div class="page-header" style="background-color:#A0C9E0;">
        This is header

        <div class="userpic">
            <img src="photo96.png" height="55" width="55" />
        </div>

        <div class="userbox">
            <B>Welcome User</B>
            <br />Last Login:
        </div>

    </div>
    <!--Header closed-->
</body>
</html>

But the height is not auto,
Contents are outside the div.

How to make this header to contain all element in its height?

Capture.PNG

Please help

  • 2 Contributors
  • 3 Replies
  • 181 Views
  • 6 Hours Discussion Span
  • Latest Post Latest Post by Dani

Recommended Answers

All 3 Replies

Member Avatar for Dani

If you're using bootstrap, you should be able to just add the clearfix class to the page-header, as so:

<div class="page-header clearfix" style="background-color:#A0C9E0;">

If you're not using bootstrap, or as an alternative, you will want to manually add the clearfix right before closing the header, as so:

 <!--   <div id="header"> -->
<div class="page-header" style="background-color:#A0C9E0;">
        This is header
        <div class="userpic">
            <img src="photo96.png" height="55" width="55" />
        </div>
        <div class="userbox">
            <B>Welcome User</B>
            <br />Last Login:
        </div>
        <div style="clear:right"></div>
    </div>
    <!--Header closed-->
Member Avatar for phphp

Yes thank, now how to remove top margin of dives .userbox .userpic shown in iamge

Untitled.png

Member Avatar for Dani

Try moving the words "This is header" to below both of the divs, as so:

<div class="page-header" style="background-color:#A0C9E0;">
    <div class="userpic">
        <img src="photo96.png" height="55" width="55" />
    </div>
    <div class="userbox">
        <B>Welcome User</B>
        <br />Last Login:
    </div>
    This is header
</div>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.