Div problem need help

**Null** · 12-14-2006, 03:59 PM

Hi,

As an excample I've added a html file with the divs in it so you can all see the code etc.

The problem, I have 3 divs (there are more but it concers these 3) called: leftbar, news and right bar. (see the html attachment). Now the leftbar and news div (middle div) are both properly alligned, but the right bar div has some issues. It's aligned good (right side) but it always stays BELOW the news div. What ever I try, I cant get it up like the left bar.

Also all 3 div should stay in the main div (pink)

Any help would be nice!

Null

**dog** · 12-14-2006, 07:09 PM

Hi Null,

Can you please post your HTML for us to take a look at.

dog

**Null** · 12-14-2006, 07:10 PM

It's in the zip

**dog** · 12-14-2006, 07:15 PM

It's in the zip

I guessed it might be but if you post the HTML in the thread using the html button (one of the tools about the main text area) it would make it easier for everyone to see and discuss.

**Null** · 12-14-2006, 08:12 PM

For the lazy *******s

HTML Code:

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">

#wrapper {
	border: 1px solid #black;
}

#main { 
	background-color: #FF00FF;
	font-size: 1.2em;
	width: 760px;
	margin: 0 auto 25px;
	position: relative;

}
#footer { 
    background: #ccc;
	margin: auto;
	color: #666;
	font-size: 1.0em;
	letter-spacing: 2px;
	text-transform: uppercase;
	padding-top: 10px;
	clear: both; 
	text-align: center;
	width: 760px;
	border: 1px solid #black;
}


#leftbar { 
	float: left;
	width: 150px;
	overflow-x: hidden;
	border: 1px solid #black;
}

#news { 
	float: left;
	margin-left: 20px;
	width: 420px;
	border: 1px solid #black;
}

#rightbar {
	margin-left: 610px;
	width: 150px;
	overflow-x: hidden;
	border: 1px solid #black;
}
</style>

</head>
<body>
<div id="wrapper">

		
		
<div id="main">
		
<div id="leftbar">
leftdiv
</div>

<div id="news">
middlediv
middlediv
middlediv
middlediv
middlediv
middlediv
middlediv
middlediv
middlediv
middlediv
</div>

<div id="rightbar">
rightdiv
</div>

		
	</div>

	<div id="footer">
		
	</div>
</div>
</body>
</html>

**GhettoT** · 12-14-2006, 08:27 PM

I think I see your problem but I guess since I am in the lazy *******s gruop. I shouldn't waste any time posting it...

**dog** · 12-14-2006, 09:21 PM

Hi Null,

Take a look at this code. I think this is acheiving what you were looking for:

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> 

<head> 

<title>Untitled Document</title> 

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 

<style type="text/css"> 
body {
	text-align: center;
	}

#wrapper { 
	border: 1px solid black; 
	text-align: left;
	width: 760px;
	margin: 0 auto;
} 

#main { 
	background-color: #FF00FF; 
	font-size: 1.2em; 
	width: 760px; 
	margin-bottom: 25px; 
	position: relative; 
} 

#footer { 
	background: #ccc; 
	margin: auto; 
	color: #666; 
	font-size: 1.0em; 
	letter-spacing: 2px; 
	text-transform: uppercase; 
	padding-top: 10px; 
	clear: both; 
	text-align: center; 
	width: 760px; 
	border: 1px solid black; 
}

#leftbar { 
	float: left; 
	width: 150px; 
	overflow-x: hidden; 
	border: 1px solid black; 
} 

#news { 
	margin-left: 170px; 
	width: 420px; 
	border: 1px solid black; 
} 

#rightbar { 
	position: absolute;
	top: 0;
	left: 610px;
	width: 150px; 
	overflow-x: hidden; 
	border: 1px solid black; 
} 

</style> 

</head> 

<body> 

<div id="wrapper">  

	<div id="main">  

		<div id="leftbar"> leftdiv </div> 

		<div id="news"> 
		  middlediv middlediv middlediv middlediv middlediv 
		  middlediv middlediv middlediv middlediv middlediv 
		</div> 

		<div id="rightbar"> rightdiv </div>

	</div>  

	<div id="footer">  </div>

</div> 

</body>

</html>

First point the main div shouldn't be using float of any sort because it's needed to define the height of the page.

Try previewing your original code in Firefox to get an idea of what I mean.

The right bar was positioning itself underneath the other divs so I've given it an absolute position to fix it to the top of the containing div (main).

Three more things I noticed. You didn't have any document type defined for your page so I've suggested one.

When defining a 'color' it is not correct to use

Code:

#black

I'm suprised that IE accepts it, other browsers will ignore it. Try:

Code:

 #000

or

Code:

black

instead.

Last point: Your original code used:

Code:

margin: 0 auto 25px;

As far as I know this is incorrect. To use short-hand CSS like this you need to give a value for all of the attributes, margin-top, margin-right, margin-bottom and margin-left. I tend to only define what is necessary so I've used only margin-left and it seems to do the trick.

I hope this helps.

dog

PS

I think I see your problem but I guess since I am in the lazy *******s group. I shouldn't waste any time posting it...

Yeah man, I know what you mean.

Thread: Div problem need help

Thread Tools

Search Thread

Div problem need help

Bookmarks

Bookmarks

Posting Permissions