Absolute positioning? How to stop overlap?

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! :slight_smile:

Thanks in advance!
Cheers
Micky

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).:wink:

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.

As already said above :slight_smile: 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

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. :smiley:

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 :smiley:

Hi,

Glad it helped :slight_smile:

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

heres a list of demos you might find useful though:

Dotted border change on hover:
http://www.pmob.co.uk/temp/border2color1.htm
Dotted borders that don’t mess up in ie:
http://www.pmob.co.uk/temp/categorybox.htm
How to centre multiple divs:
http://www.pmob.co.uk/temp/centremultipledivs.htm
Complex placement of divs:
http://www.pmob.co.uk/temp/complexdiv.htm
Various rollover effects:
http://www.pmob.co.uk/temp/cssrollover4.htm
http://www.pmob.co.uk/temp/cssrollover5.htm
http://www.pmob.co.uk/temp/cssrollover8.htm
http://www.pmob.co.uk/temp/cssrolloverjag.htm
http://www.pmob.co.uk/temp/cssrollovertabs.htm
Disjointed rollover effects:
http://www.pmob.co.uk/temp/disjointedcssrollover.htm
http://www.pmob.co.uk/temp/disjointedcssrollover2.htm
http://www.pmob.co.uk/temp/disjointedcssrollover3.htm
http://www.pmob.co.uk/temp/disjointedcssrollover5.htm
http://www.pmob.co.uk/temp/disjointedcssrollover8.htm
http://www.pmob.co.uk/temp/disjointednavlist1.htm
http://www.pmob.co.uk/temp/disjointedrollover2.htm
Horizontal drop down menu:
http://www.pmob.co.uk/temp/dropdown_horizontal2.htm
http://www.pmob.co.uk/temp/horizontal-menu-hozsub.htm
Fluid side column 3 col layout:
http://www.pmob.co.uk/temp/elliott.htm
equalcolumns using bg image:
http://www.pmob.co.uk/temp/equalcolumsexample.htm
vertical background fade:
http://www.pmob.co.uk/temp/example2.htm
http://www.pmob.co.uk/temp/gradient.htm
http://www.pmob.co.uk/temp/gradient2.htm
http://www.pmob.co.uk/temp/bgimages.htm

Simple form example:
http://www.pmob.co.uk/temp/exampleform.htm
Fixed position footer in iE:
http://www.pmob.co.uk/temp/fixedfooter_mine.htm
CSS table:
http://www.pmob.co.uk/temp/fourcellsboth.htm
Header Replacement:
http://www.pmob.co.uk/temp/headerreplacement2.htm
Inline centred lists:
http://www.pmob.co.uk/temp/hozinlinemenu.htm
http://www.pmob.co.uk/temp/hozinlinelist3.htm
Hundredpercent borders all around using display:table:
http://www.pmob.co.uk/temp/hundredpercent-display-table2.htm
Image gap test :
http://www.pmob.co.uk/temp/image%20gap%20test.htm
text and image left and right in same element:
http://www.pmob.co.uk/temp/leftandright.htm
List border and rollover effects:
http://www.pmob.co.uk/temp/list-withborder-onhover.htm
http://www.pmob.co.uk/temp/list-withborder-onhover2.htm
http://www.pmob.co.uk/temp/list7.htm
http://www.pmob.co.uk/temp/listexample.htm
http://www.pmob.co.uk/temp/cssrollover11.htm
IE5 mac 100% 3 column layout (the only one ever).
http://www.pmob.co.uk/temp/mac3column.htm
Min and max width expressions for ie:
http://www.pmob.co.uk/temp/min-max-width.htm
http://www.pmob.co.uk/temp/2colminwidth.htm

Multiple classes example:
http://www.pmob.co.uk/temp/multiple_classes_example2.htm
Opacity in IE:
http://www.pmob.co.uk/temp/opacity2.htm
http://www.pmob.co.uk/temp/opacity.htm
http://www.pmob.co.uk/temp/opacityview.htm
Imitating outline text:
http://www.pmob.co.uk/temp/outlinetext.htm
Pop up message in css:
http://www.pmob.co.uk/temp/popupmessagecss3.htm
positioning test showing elements are in the same place cross browser:
http://www.pmob.co.uk/temp/positioningtest.htm
Random bg image with css and js:
http://www.pmob.co.uk/temp/randombgimage2.htm
List bullet on the right side instead of left:
http://www.pmob.co.uk/temp/rightbullet.htm
Swap image with js:
http://www.pmob.co.uk/temp/swapimage.htm
Alternate coloured rows in table:
http://www.pmob.co.uk/temp/tablealternaterows.htm
Simple CSS table:
http://www.pmob.co.uk/temp/tabledatacss.htm
Table with fixed column while content scrolls:
http://www.pmob.co.uk/temp/tablescroll.htm
Tab effect:
http://www.pmob.co.uk/temp/tabmenu_mine2.htm
Transparentheader example:
http://www.pmob.co.uk/temp/transparentheader.htm
Vertical-align:examples:
http://www.pmob.co.uk/temp/vertical-align.htm
http://www.pmob.co.uk/temp/vertical-align-examples.htm
Three column examples:
http://www.pmob.co.uk/temp/3colfixedtest_4.htm
http://www.pmob.co.uk/temp/new3colfluid/3col.htm
http://www.pmob.co.uk/temp/new3colfluid/3col_3.htm
http://www.pmob.co.uk/temp/new3colfluid/3colfluid_1.htm
http://www.pmob.co.uk/temp/mac3column.htm
One column centred:
http://www.pmob.co.uk/temp/1colcentred.htm
Equal columns:
http://www.pmob.co.uk/temp/2equalisingfloats.htm
http://www.pmob.co.uk/temp/2equalisingfloats2.htm
centre an element of no specified width.
http://www.pmob.co.uk/temp/centre-no-width.htm
Fixed header and footer for ie and moz:
http://www.pmob.co.uk/temp/fixedlayoutexample2.htm
http://www.pmob.co.uk/temp/fixedlayoutexample3.htm

Paul

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

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

::droooooling::

Thanks bro!
Cheers
Micky