Major css div help needed!

**dragonfly_7456** · Jan 25, 2003 13:36

I need some help with my divs. I need a better way to code this div:

http://www.neowizard.dynu.com/xhtml.php

So that i could:

1. have the menu links aligned right, while the displayed time aligned left, and without an extra br being added.

2. Make both divs (the white and the blue) align porportionally as the window is resized.

3. If you resize the window until the scrollers appear you will notice that the top div becomes larger than the bottom div

4. If you resize the window until the links don't fint on the window, then they will automatically drop to the next line (in IE).

5. Load this page in Netscape and see what you get when you resize

, hehehee, I'm not even talking about the versions lower than 7.0

Could anyone please help? I'm on the verge of returning to tables. All this positioning is messing me up and confusing me! At least a fix to ONE of those would be great. And hopefully, someone can point out a better way to code my divs (my mistakes)

**dragonfly_7456** · Jan 25, 2003 13:54

Ok, I fixed number 2 and 3!

**isotope235** · Jan 25, 2003 16:00

First an admission of guilt: I've only tested this in IE5.5 NN 6.2.1 & Opera 6. I'm wondering how newer browsers will behave.

Here's how I'd do it (I left out the <a> styles to simplify things):

Code:

<html>
<head>
<title>Untitled</title>
<style>

body
	{
	background-color : #fc0;
	margin-bottom : 0;
	margin-left : 10px;
	margin-right : 10px;
	margin-top : 10px;
	}
#headerBottom
	{
	background : #9cf;
	border-bottom : 2px solid #000;
	border-left : 2px solid #000;
	border-right : 2px solid #000;
	font-size : 11px;
	height : 15px;
	padding-bottom : 0;
	padding-left : 7px;
	padding-right : 7px;
	padding-top : 0;
	}
#headerTop
	{
	background-color : #fff;
	border : 2px solid #000;
	height : 60px;
	}
#logoLeft
	{
	border : 0;
	display : block;
	float : left;
	}
#logoRight
	{
	border : 0;
	display : block;
	float:right;
	}
.floatLeft
	{
	float : left;
	}
.floatRight
	{
	float : right;
	}

</style>

</head>

<body>

<div id="headerTop">
	<a href="http://www.neowizard.dynu.com/index.php"><img  id="logoLeft" src="logo.gif" alt="The Neo Wizard Magazine" name="logoLeft" /></a>
	<a href="http://www.neowizard.dynu.com/login/"><img  id="logoRight" src="login.gif" alt="" name="logoRight" /></a>
</div>
<div id="headerBottom">
	<div class="floatLeft">Neopian Time: 9:41 PM</div>
	<div class="floatRight">
	 : <a class=top href="http://www.neowizard.dynu.com/articles/">Articles</a>
	 : <a class=top href="http://www.neowizard.dynu.com/contests/">Contests</a>
	 : <a class=top href="http://www.neowizard.dynu.com/guides/">Guides</a>
	 : <a class=top href="http://www.neowizard.dynu.com/archives/">Past Issues</a>
	 : <a class=top href="http://www.neowizard.dynu.com/reviews/">Reviews</a>
	 : <a class=top href="http://www.neowizard.dynu.com/stories/">Stories</a>
	 : <a class=top href="http://www.neowizard.dynu.com/tutorials/">Tutorials</a>
	 :
	</div> 
</div>

</body>
</html>

Its not pixel perfect cross-browser, but close.

It'll blow up big time at lower resolutions but looks OK down to 640,480. Another option might be using absolute positioning instead of floats, but I suspect getting it right cross-browser would be tough.

HTH

User Tag List

Thread: Major css div help needed!

Thread Tools

Display

Major css div help needed!

Bookmarks

Bookmarks

Posting Permissions