image and text float

[harrymossman]

Just started trying to understand css. I need to create a typical letterhead top. I.e., image in the top left corner of the page, organization name and address in the top center.

The following works well at 800 X 600 but I would like for the text position to be relative so that it looks good at any resolution.

<DIV ALIGN=&quot;left&quot;>
<IMG SRC=&quot;../../images/logo.gif&quot; WIDTH=&quot;91&quot; HEIGHT=&quot;89&quot;>
</DIV>
<div style=&quot;width: 400px; margin-left: 165px&quot;> 
<h1 CLASS=&quot;center&quot;>organization</H1>
<h2 CLASS=&quot;center&quot;>division</H2>
<P CLASS=&quot;center&quot;>office <br>
street address<br> 
city, state 12345</P>
</DIV>

Harry

 

[philote]

I'll show you one way to do it, and I'll separate out the css from the html:
HTML:

<div id=&quot;header&quot;>
 <img src=&quot;image.jpg&quot;/>
 <h1>organization</h1>
 <h2>division</h2>
 <p>office<br>
 street address<br>
 city, state 12345</p>
</div>

CSS:

#header{
 width: 100%;
 text-align: center;
 /*add background color here if you want as well*/
}
#header img{
 position: absolute;
 top: 0px;
 left: 0px;
 width: 91px;
 height: 89px;
}

This will put the image at the top left of the page and the text in the center of the page. If you'll have more than one image in the header, you'll want to give them id's instead of doing '#header img' like I did.

Kevin
A+, Network+, MCP

 

[harrymossman]

Thanks, Kevin! It works perfectly.