Home/ Questions/Q 7492441
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-29T16:26:25+00:00

The width of the image (logo) appears to be 100% as it is pushing

  • 0

The width of the image (logo) appears to be 100% as it is pushing the divs underneath (header_box) down. All other browsers the header_boxes appear to the right of the logo, but Internet Explorer (of course) is doing something different.

html

<body>
    <div id="header">
        <img id="logo" src="images/logo.png" alt="Logo" />
        <div class="header_box">
            <img id="profile" src="images/questionmark.png" alt="Profile Image" />
            <span id="profile_name">Sample</span><br />
            <ul id="profile_settings">
                <li>Profile</li>
                <li>Settings</li>
            </ul>
        </div>
        <div class="header_box">
            <img id="notifications" src="images/notifications.png" alt="Notifications" />
        </div>
        <div class="clear"></div>
    </div>

CSS

#header {
background:#3A3A3A;
color:white;
border-bottom:5px #771439 solid;
-moz-box-shadow: 0 1px 5px 3px #888;
-webkit-box-shadow: 0 1px 5px 3px#888;
box-shadow: 0 1px 5px 3px #888;
}

#logo {
height:82px;
display:inline;
}

.header_box {
display:inline-block;
float:right;
background:#262626;
padding:5px;
margin:16px 15px 12px 0;
border-radius: 5px; 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px; 
border: 1px #474747 solid;
text-align:left;
font-size:11px;
min-height:40px;
}

Let me know if you need any more info. I’m not really sure how to describe this issue.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This is a common issue in older versions of IE. You should be able to encase everything in a div with a height on it and include float:left in your logo css. Here is a jsfiddle to try it out.

    HTML

    <div style="height"82px;">
    <img id="logo" src="images/logo.png" alt="Logo" />
    <div class="header_box">
        <img id="profile" src="images/questionmark.png" alt="Profile Image" />
        <span id="profile_name">Sample</span><br />
        <ul id="profile_settings">
            <li>Profile</li>
            <li>Settings</li>
        </ul>
    </div>
    <div class="header_box">
        <img id="notifications" src="images/notifications.png" alt="Notifications" />
    </div>
</div>

    CSS

    #logo {
float:left;
height:82px;
display:inline;
}
    • 0