2 replies [Last post]
Zygote76
Offline
Regular
Ohio
Last seen: 12 years 28 weeks ago
Ohio
Timezone: GMT-4
Joined: 2007-08-20
Posts: 25
Points: 3

Hi guys,

I am currently working on redoing a site. http://www.5point.com/mercier/about.htm I am having a couple of minor problems. Throughout the site they want to have an image/link to adobe acrobat. As you can see it is positioned in the left column. I have used absolute positioning on it to keep it in the same spot throughout the site. Unfortunately when viewing the site on a wide screen monitor/laptop the image moves out to the left of the column. I was wondering if there was a way to apply an absolute positioning inside of the div that it is located to avoid it moving out of the column. I would appreciate any help or input you guys can give as this has been vexing me for a while now. note: all /> end tags have been fixed. Not sure where they went to. (stupid WYSIWYG)

Edited: code way to long edited to include appropriate code.

Here's the site HTML



  <div id="leftCol">
		<div id="leftColTop">
		<h4>SUPPORT</h4>
		</div>
		<div id="leftColBtm"><br>
		<p>Click below to download our company brochure</p>
			
		<p><a href="http://www.5point.com/brochures306/Fivepoint%20Company%20Brochure.pdf" rel="nofollow">brochure</a> | 958 k</p>
<a href="http://www.adobe.com/products/acrobat/readstep.html" target="_blank" rel="nofollow"><img src="images2/getacro.gif" alt="go to adobe.com" border="0" height="31" width="88" class="adobeimage" /></a>
		</div>
  </div>

  

And the CSS:

/* CSS Document */
tml, body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset {
margin: 0;
padding: 0;
border: 0;
}

body {
	background-color: #FFFFFF;
	color: #11175E;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	margin: 0;
	padding: 0;
	text-align: center;
}


#wrapper {
	background-color:#FFFFFF;
	margin: 23px auto;
	width: 700px;
}

#header {
	padding: 0;
	background-image: url(images2/header.jpg);
	background-repeat: no-repeat;
	height: 96px;
}

#leftCol {
	background-color:#EBEDE0;
	width: 180px;
	height: 390px;
	float: left;
	margin-top: 15px;
}

#leftColTop {
	background-image:url(images2/lftColtop.jpg);
	background-repeat:no-repeat;
	height: 30px;
	padding-top: 5px;
}

#leftColTop h4 {
	color:#FFFFFF;
}

.leftColCap {
	background-position: bottom;
}

#leftColBtm p {
	text-align: left;
	margin-left: 15px;
	margin-right: 15px;
	font-size: 10px;
}

#leftColBtm {
	background-image: url(images2/lftColbtm.jpg);
	width: 180px;
	height: 360px;
}

#rightCol {
	background-color:#EBEDE0;
	width: 500px;
	height: 390px;
	float: right;
	margin-top: 15px;
}

#rightColTop {
	background-image:url(images2/rtColtop.jpg);
	background-repeat:no-repeat;
	height: 30px;
	padding-top: 5px;
}

#rightColTop h4 {
	color:#FFFFFF;
}

#rtColBtm {
	background-image: url(images2/rtColbtm.jpg);
	height: 360px;
	width: 500px;
}

#rtColBtm p {
	padding: 10px;
	font-size: 10px;
}

/* images */
.rightimage {
	float: right;
	margin-left: 10px;
}

.leftimage {
	float: left;
	margin-right: 10px;
}

.adobeimage {
	position: absolute;
	left:204px;
	top:518px;
}
 
/* Horizontal Rules */
hr.d {border: none 0; 
	border-top: .5px solid #8388A5;
	border-bottom: thin;
	width: 90%;
	height: 1px;
	padding: 0px;
	text-align: center;
	}
	
hr.e {border: none 0; 
	border-top: .5px solid #8388A5;
	border-bottom: thin;
	width: 80%;
	height: 1px;
	margin-bottom: 10px;
	margin-top: 10px;
	}

Thanks again for any advice you can give.
Zygote

Triumph (not verified)
Anonymous's picture
Guru

Zygote76 wrote:... I was

Zygote76 wrote:
... I was wondering if there was a way to apply an absolute positioning inside of the div that it is located to avoid it moving out of the column. ...
Yep, define the parent div as position: relative and it will contain an absolutely positioned item.

Zygote76
Offline
Regular
Ohio
Last seen: 12 years 28 weeks ago
Ohio
Timezone: GMT-4
Joined: 2007-08-20
Posts: 25
Points: 3

Thanks! Worked like a

Thanks!

Worked like a charm. Had been racking my brain I knew it had to be possible Smile

Cheers!
Zygote