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!

Register Log in
  • Congratulations SkipVought on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Help with positioning...

Status
Not open for further replies.
emissions

emissions

Technical User
Mar 17, 2002
68
0
0
GB
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;
}
 
Sort by date Sort by votes
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 ??
 
Upvote 0 Downvote
I'm testing/designing on Firefox and Explorer...

My DOCTYPE is "-//W3C//DTD HTML 4.01 Transitional//EN" "
and here's a sample of the code;

<!-- 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>
 
Upvote 0 Downvote
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
[/tt]
 
Upvote 0 Downvote
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.
 
Upvote 0 Downvote
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
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
331
spamjim
spamjim
CoolBreeze007
  • Locked
  • Question
Unable to make HTML element adjust with the resizing of the browser
Replies
0
Views
42
CoolBreeze007
CoolBreeze007
LyndonOHRC
  • Locked
  • Question
Need advice with printing on check stock
Replies
5
Views
69
LyndonOHRC
LyndonOHRC
lupidol
  • Locked
  • Question
Positioning elements, how do I do it ?! 2
Replies
2
Views
52
vacunita
vacunita
caykamanj1966
  • Locked
  • Question
Sorting a grid list using iframe associated with Google Drive
Replies
0
Views
60
caykamanj1966
caykamanj1966

Part and Inventory Search

Sponsor

Back
Top