By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
444,077 Members | 2,121 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 444,077 IT Pros & Developers. It's quick & easy.

Problem with my header (help!)

P: n/a
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.</strongvery 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>

Aug 28 '06 #1
Share this Question
Share on Google+
2 Replies


P: n/a
~john wrote:
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.
http://k75s.home.att.net/banner.html

--
-bts
-Motorcycles defy gravity; cars just suck.
Aug 28 '06 #2

P: n/a
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>

Aug 29 '06 #3

This discussion thread is closed

Replies have been disabled for this discussion.