Problem with my header (help!)

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

~john - 28 Aug 2006 17:57 GMT

I'm trying to get my header to have 2 images, one for the top left and
one for the top right. Here's a link to my page...

http://levelwave.com/dev/div/index.html

[Left Logo] and [Right Logo] will eventually be images but what I'm
wanting is for the [Left Logo] to be aligned left and [Right Logo] to
be aligned right. As of now they're both squished to the left and I'm
not sure how to change my CSS to do this.

Here's my CSS for my header div

div#header{height:80px;line-height:80px;margin:0;}

The entire code page is below... any ideas?

thanks,

~john

-------------------------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Layout 24</title>
<meta http-equiv="content-type" content="text/html;
charset=iso-8859-1">
<meta name="generator" content="HAPedit 3.1">
<style type="text/css">
html,body{margin:0;padding:0}
body{font: 76% arial,sans-serif}
p{margin:0 10px 10px}
a{display:block;color: #981793;padding:10px}
div#header{height:80px;line-height:80px;margin:0;
padding-left:10px;background: #EEE;color: #79B30B}
div#content p{line-height:1.4}
div#navigation{background:#B9CAFF}
div#extra{background:#FF8539}
div#footer{background: #333;color: #FFF}
div#footer p{margin:0;padding:5px 10px}

div#wrapper{float:right;width:100%;margin-left:-200px}
div#content{margin-left:200px}
div#navigation{float:left;width:200px}
div#extra{float:left;clear:left;width:200px}
div#footer{clear:both;width:100%}
</style>
</head>
<body>

    <div id="header">[Left Logo] - [Right Logo]</div>

    <div id="wrapper">
        <div id="content">
        </div>
    </div>

    <div id="navigation">
    </div>

    <div id="extra">
    <p><strong>3) More stuff here.</strong> very text make long column
make filler fill make column column silly filler text silly column fill
silly fill column text filler make text silly filler make filler very
silly make text very very text make long filler very make column make
silly column fill silly column long make silly filler column filler
silly long long column fill silly column very </p>
    </div>

    <div id="footer"><p>Here it goes the footer</p></div>

</body>
</html>

Reply to this Message

Beauregard T. Shagnasty - 28 Aug 2006 18:39 GMT

> I'm trying to get my header to have 2 images, one for the top left and
> one for the top right. Here's a link to my page...
[quoted text clipped - 5 lines]
> be aligned right. As of now they're both squished to the left and I'm
> not sure how to change my CSS to do this.

http://k75s.home.att.net/banner.html

Signature

-bts
-Motorcycles defy gravity; cars just suck.

Reply to this Message

sajid@fendoo.com - 29 Aug 2006 15:14 GMT

Replace this line:

<div id="header">[Left Logo] - [Right Logo]</div>

With:

<div id="header"><img src="right logo url" style="float: right;"><img
src="left logo url"></div>

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / August 2006

Problem with my header (help!)