Help with Left Aligning Image

Dev Shed Forums Sponsor:

March 17th, 2013, 03:33 PM

acbugs

Registered User

Join Date: Mar 2013

Posts: 1

Time spent in forums: 23 m 15 sec
Reputation Power: 0

Help with Left Aligning Image

Thanks everyone!
With the help of some generous tips from stackoverflow.com, I received several solutions to my problem. I had to use a negative margin value on the image. Thanks again!

Hi,
I need some help with left aligning an image using CSS. I've tried several different things including padding, margin, etc. Would you mind taking a look at this to see what I am doing wrong?

The image I am trying to left align is called homepage_students_smaller.png.

Just as a reference, this is what the mock up of the page I am working on currently looks like.
http://www.nwsccmoodledemo.com/newnwscc/

I want to align the image to the edge of the red border so that there is no space between the border and the edge of the image.

Thanks for any assistance!

Code:

<style type="text/css"> /*CSS RESET*/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { 	margin: 0; 	padding: 0; 	border: 0; 	outline: 0; 	font-weight: inherit; 	font-style: inherit; 	font-size: 100%; 	vertical-align: baseline; } /* remember to define focus styles! */ :focus { 	outline: 0; } body { 	line-height: 1; 	color: black; 	background: white; } ol, ul { 	list-style: none; } /* tables still need 'cellspacing="0"' in the markup */ table { 	border-collapse: separate; 	border-spacing: 0; } caption, th, td { 	text-align: left; 	font-weight: normal; } blockquote:before, blockquote:after, q:before, q:after { 	content: ""; } blockquote, q { 	quotes: "" ""; }  strong { 	font-weight:bold;color:#0289ce; }  em { 	font-style:oblique; }  p { 	margin:15px 0; 	line-height:25px; }  .aligncenter, div.aligncenter { 	display: block; 	margin-left: auto; 	margin-right: auto; } .alignleft { 	float: left; } .alignright { 	float: right; }  h1 {font-size:180%;} h2 {font-size:150%;} h3 {font-size:125%;} h4 {font-size:100%;} h5 {font-size:90%;} h6 {font-size:80%;}  a:link {color:#0289ce;} a:hover {color:#f64274;}  /*End RESET - Begin Full Width CSS*/ 	body { 		color:#DFE4ED; 		background:url(images/home_frame_925.gif) repeat top center; 		color:#2D1F16; 		font:13px Helvetica,  Arial,  sans-serif 		 	}  	.wrap { 		position:relative; 		padding:0 0 0 0; 		margin:0 auto auto auto; 		width:900px; 		clear:both; 	} 	 	a:link{ 		text-decoration:none; 		color:#000033;		 		} 		 	a:hover { 		color:#0066CC;  	} 	 	a:visited { 		color:#0066CC: 	} 	 	#header, #footer { 		width:925px; 		float:center; 		padding:0 0; 		height:103px; 		margin:auto; 	} 	 		 	#header { 		background:#698DA4; 	} 	 	#header .logo { 		float:left; 		/*width:400px;*/ 		padding:0 0 0 0; 		margin:0; 		/*clear:both;*/ 	} 	 	#header p { 		float:right; 		width:400px; 		margin:0; 	} 	 	#content { 		padding:30px 0px 0px 0px; 		clear:both; 		margin:0 auto auto auto; 		 	} 	 	#footer { 		background:#698DA4; 		width:925px; 		text-align:right; 		/**position:fixed;**/ 		bottom:0; 		float:center: 		z-index:999999; 		padding:20px 0; 	} 	 	#footer2 { 		 		background:#D2D8E8; 		width:925px; 		text-align:center; 		float:center; 		/**position:fixed;**/ 		bottom:0; 		z-index:999999; 		margin:auto; 	 	} 	 	#footer a { 		color:#fff; 	} 	 </style> </head>  <body bgcolor="#DFE4ED">  <div id="header"> <!--	<div class="wrap">-->     	<div class="logo">         	<a href="http://www.nwscc.edu">                       <p><img src="images/banner2.png" alt="NW-SCC Homepage Banner" /></p>             </a></div> <!--    </div>--> </div>           <div class="wrap"> 	<div id="content">                <table cellpadding="0" cellspacing="0">                <tr style="float:left;"><td style="vertical-align:top;horizontal-align:left;padding:0px;margin:0 0 0 0;"> 	    	    	   <img src="images/homepage_students_smaller.png" style="float:left;margin:0 0 0 0;border:0 none;padding:0;"><br><br>  	                  <table style="margin:auto"><tr><td style="vertical-align:top;horizontal-align:left;padding:5px"><a href=http://www.facebook.com/pages/Northwest-Shoals-Community-College/105177256819"><img src="images/facebooknew.png" width="63px" height="58px"></td></a></td><td style="vertical-align:top;padding:5px"><a href="http://twitter.com/#!/NWSCC"><img src="images/twitternew.png" width="63px" height="54px"></a></td><td style="vertical-align:middle;padding:0px"><a href="http://www.youtube.com/user/OfficialNWSCC"><img src="images/youtubenew.png" width="100px" height="51px"></a></td>               </tr></table>        </td>                <td style="padding:0px"> 	 	<table style="vertical-align:top;padding:0px 20px 20px 20px;"> 	 	<tr style="vertical-align:top;"><td style="vertical-align:top;width:40%;"> 	 	<h1>Quick Links</h1>                <p><a href="http://www.nwsccmoodle.com">Moodle</a> | <a href="http://nwscc.edu/moodlehandout.pdf">Login Instructions</a><br>        <a href="http://www.nwscc.edu/collectionfees.html">Online Services</a> | <a href="http://www.nwscc.edu/onlineserviceslogin.pdf">Login Instructions</a><br>        <a href="http://www.nwscc.edu/studentemail.html">Student Email</a><br>        <a href="http://www.nwscc.edu/classschedule.html">Spring 2013 Class Schedule</a><br>        <a href="http://www.nwscc.edu/library/library.html">Library</a><br>        <a href="http://www.nwscc.edu/onecard/nwscconecard.html">NW-SCC OneCard</a></p>         </td> 	<td style="vertical-align:top;width:40%;"><h1><br></h1>         <p><a href="http://www.nwscc.edu/applicationinfo.html">Admissions Application</a><br> 	<a href="http://nwscc.edu/calendar.html">College Calendar</a><br> 	<a href="http://nwscc.edu/bookstorecheck.html">Bookstore</a><br> 	<a href="http://nwscc.edu/financialaid/finaid.html">Financial Aid</a><br> 	<a href="http://www.nwscc.edu/businessoffice.html">Financial Data</a><br /> 	<a href="http://www.nwscc.edu/distanceeducation/">Distance Education </a></p> 	</td></tr>                <tr style="vertical-align:top"><td style="vertical-align:top;padding:0px" colspan="2">  	<script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script> <script> new TWTR.Widget({   version: 2,   type: 'profile',   rpp: 10,   interval: 31000,   width: 475,   height: 150,   theme: {     shell: {       background: '#698DA4',       color: '#f9f9fc'     },     tweets: {     background: '#fcfcfc', 	color: '#8C0000',     links: '#063c94'     }   },   features: {     scrollbar: true,     loop: false,     live: true,     behavior: 'all'   } }).render().setUser('NWSCC').start(); </script> 	</td>        </tr>                       </table>        </td></tr></table>            </div> </div>

Last edited by acbugs : March 18th, 2013 at 02:50 PM. Reason: Solution!

Help with Left Aligning Image

Developer Shed Advertisers and Affiliates