Home/ Questions/Q 8398453
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T21:03:31+00:00

I have a page with a container div 900px wide, margin is auto. I

  • 0

I have a page with a container div 900px wide, margin is auto. I have a header tag within this 150px high.

I want the header to consist of ann image on the left, some text and then another image on the right (opposite the imagine on the left). When I put two img tags in the header div, the second image is on lower than the first. I’ve tried amending to an inline display without any luck.

Any ideas?

CSS

html, body {
    background-color: #ccd6cc;
    margin: 0px;
    padding: 0px;   
}

body {
    font-family: Arial, Helvetica, Verdana, Sans-serif;
    font-size: 12px;
    color: #666666; 
}


.hidden {
    display: none;
}


#page-container {  
    width: 900px;
    margin: auto;
    background-color: white;
}



#header {
    height: 150px;
    background-color: yellow;
}


#content {
    line-height: 18px; 
}

img#mcclogo {   
    display:inline;
    float:left;
    margin:0;
    padding:0;
}

img#bactulogo {
    display:inline;
    float:right;
    margin:0;
    padding:0;
}

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<script type="text/javascript" src="curvy.corners.trunk.js"></script>
<head>
    <title>Intranet Layout</title>
    <link rel="stylesheet" type="text/css" href="test_layout.css" media="screen" />
</head>
<body>

<div id="page-container">
    <div id="header">
    <img id="mcclogo" src="../images/logo.gif" alt="xx" width="244" height="48" />  
    <img id="bactulogo" src="../images/bactu3.gif" alt="xx" width="260" height="124" /> 
    </div>  



    <div id="content">
    Content 
    </div>
</div>
</body>
</HTML>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Assuming html is correct, http://jsfiddle.net/sbAvB/

    css should be something like this then:

    #main{
    width:900px;
    margin: auto; }

#header{
    height:150px;
    width:100%
}

#picL
{
    float:left;
}

#text{
    position:absolute;
    left:50%;
    right:50%;
    width:70%;
}

#picR
{
    float:right;
    margin-right:0px;   }​

    Likely the issue is a lack of a position/margin variables set in the css properties. To align multiple objects in a line, one way to do this is.

    • 0