Absolute positioning? How to stop overlap?

mhulse · December 15, 2004, 2:17am

Hi all,

My CSS problem:

The text links in my right colum (“#iiicolright” - in a 3 col layout) is overlapping the content that appears below in on page…

Here is my CSS for the 3 col layout:


#iiicolleft {
	position: absolute;
	left: 0;
	width: 120px;
	margin: 0;
	padding: 0 0px 0 10px;
	text-align: right;
}
#iiicolcontent {
	margin: 0 200px 0 120px;
	padding: 0;
}
#iiicolright {
	position: absolute;
	right: 0;
	width: 200px;
	margin: 0;
	padding: 0 10px 0 0;
}

Here is the HTML:


<body>

<div id="top_container">
	<ul id="top_menu">
	...
	...
	<!-- MAIN NAV MENU GOES HERE -->
	...
	...
	</ul>
</div>

<h1>&nbsp;</h1>

<div id="iiicolleft">
	<h5>[home]</h5>
</div>

<div id="iiicolright">
		<h6>Current Projects:</h6>
		<p><img src="img/link.gif"><a href="#" title="test" target="_blank" class="mbiguism" alt="test">Link One</a></p>
		<p><img src="img/link.gif"><a href="#" title="test" target="_blank" class="mbiguism" alt="test">Link Two</a></p>
		<p><img src="img/link.gif"><a href="#" title="test" target="_blank" class="mbiguism" alt="test">Link Three</a></p>
</div>

<div id="iiicolcontent">
	<p>Default home contents go here: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna <a class="mbiguism" href="foo.html">aliquam</a> erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div>

<h2>&nbsp;</h2>
<h3>&nbsp;</h3>

<div id="bot_container">
	<ul id="bot_menu">
		...
		...
		<!-- SECONDARY NAV MENU GOES HERE -->
		...
		...			
	</ul>
</div>
		
</body>

I use H1 H2 and H3 as horizontal-rule seperators… here is the CSS:


h1 {
	font-size: 15px;
	padding: 0;
	margin: 0;
	line-height: 15px;
	background: url(../img/bg_3x7.gif) repeat-x left center;
	height: 15px;
}
h2 {
	font-size: 5px;
	padding: 0;
	margin: 10px 0 2px;
	line-height: 5px;
	background: url(../img/bg_3x7.gif) repeat-x left center;
	height: 5px;
}
h3 {
	font-size: 5px;
	padding: 0;
	margin: 0 0 5px;
	line-height: 5px;
	background: url(../img/bg_3x7.gif) repeat-x left center;
	height: 5px;
}

Does the overlap have to do with the absolute postioning of #iiicolright?

The overlap does not occur if the center content is taller than content in right col…

I would greatly appreciate any suggestions anyone may have!

Thanks in advance!
Cheers
Micky

system · December 15, 2004, 4:51am

You need to give your middle column position: relative; and negatively position them out of it (meaning in the html the left and right divs must go inside the middle div also).

AutisticCuckoo · December 15, 2004, 7:27am

Absolutely positioned elements are removed from the document flow, which means they don’t affect elements further down in the markup. That’s why you get overlaps.

If you need to put something below your columns, forget positioning unless you always know which column is longest. You need to float your columns. See Paul O’B’s sticky thread at the top of the CSS forum for examples.

PaulOB · December 15, 2004, 12:26pm

As already said above Float the left and right columns.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd](http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd)">
<html xmlns="[http://www.w3.org/1999/xhtml](http://www.w3.org/1999/xhtml)">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#iiicolleft {
 float:left;
 width: 120px;
 margin: 0;
 padding: 0 0px 0 10px;
 text-align: right;
}
* html #iiicolleft {width:130px;w\\idth:120px}/* box model hack*/
#iiicolcontent {
 margin: 0 215px 0 135px;
 padding: 0;
}
/* hide from ie mac and force layout in ie \\*/
* html #iiicolcontent {height:1%;}
/* finish hiding*/
#iiicolright {
 float:right;
 width: 200px;
 margin: 0;
 padding: 0 10px 0 0;
}
* html #iiicolright {width:210px;w\\idth:200px}/* box model hack*/
.clearer{
 height:1px;
 overflow:hidden;
 margin-top:-1px;
 clear:both;
}
</style>
</head>
<body>
<div id="top_container"> 
  <ul id="top_menu">
	... ... 
	<!-- MAIN NAV MENU GOES HERE -->
	... ... 
  </ul>
</div>
<h1>&nbsp;</h1>
<div id="iiicolleft"> 
  <h5>[home]</h5>
</div>
<div id="iiicolright"> 
  <h6>Current Projects:</h6>
  <p><img src="img/link.gif"><a href="#" title="test" target="_blank" class="mbiguism" alt="test">Link 
	One</a></p>
  <p><img src="img/link.gif"><a href="#" title="test" target="_blank" class="mbiguism" alt="test">Link 
	Two</a></p>
  <p><img src="img/link.gif"><a href="#" title="test" target="_blank" class="mbiguism" alt="test">Link 
	Three</a></p>
</div>
<div id="iiicolcontent"> 
  <p>Default home contents go here: Lorem ipsum dolor sit amet, consectetuer adipiscing 
	elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna <a class="mbiguism" href="foo.html">aliquam</a> 
	erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam 
	corper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem 
	veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, 
	vel willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan 
	et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue 
	duis dolore te feugait nulla facilisi.</p>
</div>
<h2>&nbsp;</h2>
<h3>&nbsp;</h3>
<div class="clearer"></div>
<div id="bot_container"> 
  <ul id="bot_menu">
	... ... 
	<!-- SECONDARY NAV MENU GOES HERE -->
	... ... 
  </ul>
</div>
</body>
</html>

Paul

mhulse · December 15, 2004, 7:10pm

WOw! Thanks for all the help guys! I can’t thank you enough for all the good info and code! It makes a lot of sense now.

Thanks for the code example Paul, I really appreciate it. Oh, and congrats on the Mentor and Web-designer of the year awards! That rocks… do you have a personal site I could scope?

Thanks all!
Cheers
Micky

PaulOB · December 15, 2004, 7:45pm

Hi,

Glad it helped

My personal site’s rubbish beacuse I spend too much time fixing other peoples

heres a list of demos you might find useful though:

Paul

mhulse · December 17, 2004, 12:39am

Wow! Great links Paul! Great resources, I really appreciate you sharing them

My night has now been officially booked~! Cooooool cool cool links… mmmmmm

::droooooling::

Thanks bro!
Cheers
Micky

system · October 8, 2014, 12:31am