Help with positioning...

emissions · Mar 7, 2006

Anyone,

Been at this for a few days, and seem to be beating my head agianst the wall...

#content {
width: 760px;
height: auto;
background: #ffffff url(../images/content.png) no-repeat top;
margin: 0;
padding: 0;
}

#sidecolumn {
background : url(../images/side_column.png) no-repeat;
float : left;
padding : 0;
width : 140px;
margin-left: 10px;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 10px;
}

#pagecontent {
width: 400px;
background : url(../images/banner001.png) no-repeat;
background-color: #FFFFFF;
height: auto;
margin-left: 160px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 10px;
padding-top: 140px;
padding-bottom : 10px;
padding-left : 0px;
padding-right : 0px;
}

#relatedbar {
background : url(../images/relate_column.png) no-repeat;
float: right;
padding: 0px;
width: 160px;
margin-left: 0px;
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
position: relative;
}

emissions · Mar 7, 2006

pressed the wrong button... as you can see I have a container, and within that 3 columns, the left is fine and in the right position, the right and center just over lap... can anyone help ??

BillyRayPreachersSon · Mar 7, 2006

And your problem is?

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

BillyRayPreachersSon · Mar 7, 2006

pressed the wrong button...

You can safely ignore my last post, then ;-)

Dan

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

BillyRayPreachersSon · Mar 7, 2006

What is your DOCTYPE? What element types are you using with those IDs? Can you give a better idea of the HTML involved? What browser(s) is it breaking in?

Dan

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

emissions · Mar 7, 2006

I'm testing/designing on Firefox and Explorer...

My DOCTYPE is "-//W3C//DTD HTML 4.01 Transitional//EN" "

http://www.w3.org/TR/html4/loose.dtd"

and here's a sample of the code;



<div id="content">

<div id="sidecolumn">
<div id="sidecontain">
<p>This is a little tidbit for sidebar content.
This whole column could be used for whatever
kind of purpose: news, pics, etc.</p>

<p>Aenean eros arcu, condimentum nec, dapibus ut,
tincidunt sit amet, urna. Quisque viverra,
eros sed imperdiet iaculis, est risus facilisis
quam, id malesuada arcu nulla luctus urna.
Nullam et est.</p>
</div>
</div>


<div id="pagecontent">

</div>

<div id="relatedbar">

<div id="relatedcontain">
<p>This is a little tidbit for sidebar content.
This whole column could be used for whatever
kind of purpose: news, pics, etc.</p>

<p>Aenean eros arcu, condimentum nec, dapibus ut,
incidunt sit amet, urna. Quisque viverra,
eros sed imperdiet iaculis, est risus facilisis
quam, id malesuada arcu nulla luctus urna.
Nullam et est.</p>
</div>

</div>
</div>

BillyRayPreachersSon · Mar 7, 2006

Well - I don't see the problem. Neither the centre column nor the right column overlap anything (even each other) in a test harness I put together based on what you've given us. Try this - does it overlap for you?

Maybe you didn't mean "overlap". If not, could you better describe your problem?

Incidentally, I've added some background colours as we don't have access to the images you're using.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
	<meta http-equiv="content-language" content="en">
	<title>Test</title>

	<style type="text/css">
		#content {
			width: 760px;
			height: auto;
			background: #ffffff url(../images/content.png) no-repeat top;
background-color: gold;
			margin: 0;
			padding: 0;
		}

		#sidecolumn {
			background : url(../images/side_column.png) no-repeat;
background-color: red;
			float : left;
			padding : 0;
			width : 140px;
			margin-left: 10px;
			margin-top: 10px;
			margin-right: 0px;
			margin-bottom: 10px;
		}

		#pagecontent {
			width: 400px;
			background : url(../images/banner001.png) no-repeat;
			background-color: #FFFFFF;
background-color: green;
			height: auto;
			margin-left: 160px;
			margin-top: 0px;
			margin-right: 0px;
			margin-bottom: 10px;
			padding-top: 140px;
			padding-bottom : 10px;
			padding-left : 0px;
			padding-right : 0px;
		}

		#relatedbar {
			background : url(../images/relate_column.png) no-repeat;
background-color: blue;
			float: right;
			padding: 0px;
			width: 160px;
			margin-left: 0px;
			margin-top: 10px;
			margin-right: 10px;
			margin-bottom: 10px;
			position: relative;
		}
	</style>
</head>

<body>
	<!-- content section -->
	<div id="content">

        <div id="sidecolumn">
			<div id="sidecontain">
				<p>This is a little tidbit for sidebar content. This whole column could be used for whatever kind of purpose: news, pics, etc.</p>
				<p>Aenean eros arcu, condimentum nec, dapibus ut, tincidunt sit amet, urna. Quisque viverra, eros sed imperdiet iaculis, est risus facilisis quam, id malesuada arcu nulla luctus urna. Nullam et est.</p>
			</div>
		</div>

		<!--- Main Page Content --->
		<div id="pagecontent">
        </div>

		<div id="relatedbar">
			<div id="relatedcontain">
				<p>This is a little tidbit for sidebar content. This whole column could be used for whatever kind of purpose: news, pics, etc.</p>
				<p>Aenean eros arcu, condimentum nec, dapibus ut, incidunt sit amet, urna. Quisque viverra, eros sed imperdiet iaculis, est risus facilisis quam, id malesuada arcu nulla luctus urna. Nullam et est.</p>
			</div>
		</div>
	</div>
</body>
</html>

Hope this helps,
Dan

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

BillyRayPreachersSon · Mar 7, 2006

I should have mentioned - I don't see overlap in either Firefox 1.5.0.1/Win or IE 6/Win, although the layout does differ between them.

Dan

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

emissions · Mar 7, 2006

okay maybe not an overlap, but the right column sits at the bottom of the center section...

this is standard in both ie and ff...

I've just cut and pasted the code from Dan and the same thing happens...

cheers for the assistance so, far..l.

BillyRayPreachersSon · Mar 7, 2006

OK - to fix the right-column bein lower problem, just move the "relatedbar" div to above the "pagecontent" div in source order.

Dan

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

ChrisHunt · Mar 7, 2006

Just looking at the code, it seems to me that the right column will appear below, and offset to the right of, the main content - when the latter isn't an empty <div>. This may be what the OP meant by "overlapping". The problem is that the middle column isn't floated, so the third column will only start after the end of the main content.

Try giving all three columns [tt]float: left[/tt].

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Help with positioning...

emissions

Technical User

emissions

Technical User

BillyRayPreachersSon

Programmer

BillyRayPreachersSon

Programmer

BillyRayPreachersSon

Programmer

emissions

Technical User

BillyRayPreachersSon

Programmer

BillyRayPreachersSon

Programmer

emissions

Technical User

BillyRayPreachersSon

Programmer

ChrisHunt

Programmer

Similar threads

Part and Inventory Search

Sponsor