Getting some DIVs horizontaly next to eachother?

**J03User** · Jun 20, 2006 00:57

I have decided to go tableless, it was going great until I tried to put some menu items over a banner.

What im trying to do is get "News | Media | Projects | Supporters | Shop" in the bottom left corner of the banner and "Home | Site Map | Contact Us" in the top right corner.

What I am getting instead is the left spacer and left menu only in Firefox and in IE the left menu and spacer, then under them and to the right the right menu and spacer. Ive spent the past 3 hours trying to figure it out and im about ready to stab myself with my desk lamp.

<div class="banner">

<div class="bannerspacerleft"></div>
<div class="bannercontentmenu">News | Media | Projects | Supporters | Shop</div>

<div class="bannersitemenu">Home | Site Map | Contact Us</div>
<div class="bannerspacerright"></div>

</div>

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

div.banner {
width: 799px;
height: 69px;
float:left;
background-image: url(images/banner.gif)
}

div.bannerspacerleft {
width: 50%;
height: 43px;
float:left;
background-color: rgb(0,0,0);
}

div.bannercontentmenu {
width: 50%;
height: 26px;
float:left;
padding-left: 20px;
font: 11pt arial;
}

div.bannersitemenu {
width: 50%;
height: 26px;
float: right;
padding-left: 20px;
font: 11pt arial;
}

div.bannerspacerright {
width: 50%;
height: 43px;
float:right;
background-color: rgb(0,0,0);
}

Any and all help is appreciated.

**Buddy Bradley** · Jun 20, 2006 01:01

Get rid of the spacers, you don't need them - use CSS margins instead.

**all4nerds** · Jun 20, 2006 01:23

Hello

Like Buddy, Spacers ? or do they get an image ?

PS there are other Tag's then Div's ( you don't need all the classes then)

header

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>12345 12345 12345 12345 12345</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<style type="text/css">
	
	head+/**/body .fc:after {
	content:"."; 
	display:block; 
	height:0; 
	clear:both; 
	visibility:hidden;
	}
	/* \*/
	* html .fc{height:1%;}
	*+html .fc{display:inline-block;}
	/*  */
	
	.banner{
	width:799px;
	height:69px;
	margin:0 auto;
	background:#ffccff url(images/banner.gif)
	}

	.l{float:left;width:50%;}
	* html .x{float:left;width:49.9%;}

	.bannerspacerleft,.bannerspacerright{
	height:43px;
	background: rgb(0,0,0);
	}
	.bannerspacerleft,.bannercontentmenu{margin:0 10px 0 0;}
	.bannerspacerright,.bannersitemenu{margin:0 0 0 10px;}
	.bannercontentmenu,.bannersitemenu{padding:3px 5px 3px 5px;}

	.bannercontentmenu,.bannersitemenu {font: 11pt arial,sans-serif;}
	</style>
	<script type="text/javascript">

	</script>
</head>
<body>
<div class="banner fc">

<div class="l">
<h2 class="bannerspacerleft"></h2>
<h3 class="bannercontentmenu">News | Media | Projects | Supporters | Shop</h3>
</div>
<div class="l x">
<h2 class="bannerspacerright"></h2>
<h3 class="bannersitemenu">Home | Site Map | Contact Us</h3>

</div>
</div>

</body>
</html>

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>12345 12345 12345 12345 12345</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<style type="text/css">
	
	head+/**/body .fc:after {
	content:"."; 
	display:block; 
	height:0; 
	clear:both; 
	visibility:hidden;
	}
	/* \*/
	* html .fc{height:1%;}
	*+html .fc{display:inline-block;}
	/*  */
	
	.banner{
	width:799px;
	height:69px;
	margin:0 auto;
	background:#ffccff url(images/banner.gif)
	}

	.l,.r{float:left;width:50%;}
	* html .r{float:left;width:49.9%;}

	.l h2,.r h2{
	height:43px;
	background: rgb(0,0,0);
	}
	
	.l h2,.l h3{margin:0 10px 0 0;}
	.r h2,.r h3{margin:0 0 0 10px;}
	.l h3,.r h3{padding:3px 5px 3px 5px;}

	.l h3,.r h3{font: 11pt arial,sans-serif;}
	</style>
	<script type="text/javascript">

	</script>
</head>
<body>
<div class="banner fc">

<div class="l">
<h2></h2>
<h3>News | Media | Projects | Supporters | Shop</h3>
</div>

<div class="r">
<h2></h2>
<h3>Home | Site Map | Contact Us</h3>

</div>
</div>

</body>
</html>

**J03User** · Jun 20, 2006 10:20

I have no idea what this means:

head+/**/body .fc:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
/* \*/
* html .fc{height:1%;}
*+html .fc{display:inline-block;}
/* */

Dosent work so well in IE but it works in Firefox, maybe I can play around with it to get it to work. Thanks.

**all4nerds** · Jun 20, 2006 10:22

Hello

clear the floats see FAQ CSS

PS both examples work in FF OP IE

**J03User** · Jun 20, 2006 10:47

What version of IE? I'm getting a freekout in IE 6.

-so-

I tried Buddy's idea to use margins and it exploded equaly in IE.

I can take screen caps if it would help.

**all4nerds** · Jun 20, 2006 11:05

Hello

this code works in

IE 6 7 FF 1.07 1.5 Moz 1.7 OP 8 8.5 9 NS 6.2 7.1

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>12345 12345 12345 12345 12345</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<style type="text/css">
	
	head+/**/body .fc:after {
	content:"."; 
	display:block; 
	height:0; 
	clear:both; 
	visibility:hidden;
	}
	/* \*/
	* html .fc{height:1%;}
	*+html .fc{display:inline-block;}
	*+html .r{float:left;width:49.9%;}
	/*  */
	
	.banner{
	width:799px;
	height:69px;
	margin:0 auto;
	background:#ffccff url(images/banner.gif)
	}

	.l,.r{float:left;width:50%;}
	* html .r{float:left;width:49.9%;}
	

	.l h2,.r h2{
	height:43px;
	background: rgb(0,0,0);
	}
	
	.l h2,.l h3{margin:0 10px 0 0;}
	.r h2,.r h3{margin:0 0 0 10px;}
	.l h3,.r h3{padding:3px 5px 3px 5px;}

	.l h3,.r h3{font: 11pt arial,sans-serif;}
	</style>
</head>
<body>
<div class="banner fc">

<div class="l">
<h2></h2>
<h3>News | Media | Projects | Supporters | Shop</h3>
</div>

<div class="r">
<h2></h2>
<h3>Home | Site Map | Contact Us</h3>

</div>
</div>

</body>
</html>

**J03User** · Jun 20, 2006 22:31

Its working great now. Thank You!

User Tag List

Thread: Getting some DIVs horizontaly next to eachother?

Thread Tools

Display

Getting some DIVs horizontaly next to eachother?

Bookmarks

Bookmarks

Posting Permissions