0

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
27
Views
7 Months
Discussion Span
Last Post by Dani
2

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-->
0

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

Untitled.png

0

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>
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.