Mon, 2004-08-09 03:58
Hey, I have a floating image - floating on the right. However, I NEVER want the image to go closer to the left than 680px from the left. Is there a way I can float an image yet give it a margin that it can't go past? Once it gets to 680px I want it to lock and let the bottom browser scrollbar to appear.
Any ideas?
Thanks!
Mon, 2004-08-09 07:54
#1
Float left margin
Can't you use margiin-left: 680px; ?
Mon, 2004-08-09 10:32
#2
Float left margin
Hey - nope. That disables the float and just always stays at 680.
Thanks!
Mon, 2004-08-09 12:02
#3
Float left margin
That doesn't sound right. :?
Do you have the html and css?
Thu, 2004-08-12 17:04
#4
Float left margin
You can see the problem at: http://www.flattrackillustrated.com
And when you look, you'll see how the right float needs to stop at 680px!
Code below - thanks!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Welcome to Flat Track Illustrated Online!</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <? include("inc/map.php"); ?> <div id="top_right"></div> <div id="Layer1"></div> <div id="Layer3"><? include("inc/links.php"); ?></div> <div id="Layer4"><p><img src="images/head_pics.jpg" width="480" height="64"></p> <p><img src="images/title.jpg" width="480" height="28"></p> <div class="text"> <p><strong>Welcome to the Flat Track Illustrated (FTI) website!</strong></p> <p> <u>FTI is a monthly publication sold by subscription and is for racers and enthusiasts:</u> </p> <p><em>- AMA Grand National Series</em></p> <p><em>- AMA Hot Shoe Series</em></p> <p><em>- AHRMA National & Regional Events</em></p> <p><em>- VDTRA National & Regional Events</em></p> <p><em>- CoolKyd of the Month Plus a specialized Kid’s Column!</em></p> <p><em>- Local Racing from Coast-to-Coast</em></p> <p><em>- Featured Vintage & Modern Bikes</em></p> <p><em>- Interviews and Human Interest Stories </em></p> <p><em>- Blast From The Past (Stories about events gone by)</em></p> <p><em>- Classified advertisements</em></p> <p><em>- The most comprehensive flat track calendar of events</em></p> <p><em>- plus much more!</em></p> <p> </p> <p> </p> <p><u>From our site you can:</u></p> <p><em>- Request a FREE Sample issue</em></p> <p><em>- Subscribe online</em></p> <p><em>- View & Purchase Event Photos online</em></p> <p><em>- Paid Subscribers can view the latest issue on-line and check their expiration date!</em></p> <p><em>- Find out how you can Contribute articles </em></p> <p> </p> <p> </p> <p><strong>Flat Track Illustrated…We're everything flat track!</strong></p> </div></div> <div id="Layer5"><img src="images/magazine.jpg" width="188" height="125"> <div class="copyright"> <p>Copyright © <?=date("Y");?></p> <p>Flat Track Illustrated </p> <p>All Rights Reserved</p> <p></p> <a href="http://www.newheartdesign.com" target="_blank"><img src="http://www.newheartdesign.com/logos/nhd.jpg" border="0"></a><br> <a href="http://www.newheartdesign.com" target="_blank" class="copyright">Designed by New Heart Design</a> </div> </div> <center> </center> </body> </html>
STYLE
p { margin: 0px; padding: 0px; } .text { font-family: Arial, Helvetica, sans-serif; font-size: 11px; text-align: left; margin-left: 18px; color: #004D91; } body { background-image: url(images/header_extend.jpg); background-repeat: repeat-x; margin: 0px; padding: 0px; } #nav_extend {background-image: url(images/nav_extend.jpg); background-repeat: repeat-y} #top_right { background-image: url(images/top_right.jpg); background-repeat: no-repeat; float: right; height: 73px; width: 101px; margin-right: 0px; margin-left: 680px; z-index: 1 } #Layer1 { background-image: url(images/header.jpg); background-repeat: no-repeat; position: absolute; left: 0px; top: 0px; width: 668px; height: 73px; z-index: -2 } #Layer3 { position: absolute; left: 0px; top: 73px; width: 188px; z-index: 3 } #Layer4 { position: absolute; left: 188px; top: 73px; width: 480px; height: 414px; z-index: 4 } #Layer5 { background-image: url(images/nav_extend.jpg); position: absolute; left: 0px; top: 273px; width: 188px; height: 300px; z-index: 5 } .copyright { font-family: Arial, Helvetica, sans-serif; font-size: 10px; color: #FFFFFF; margin-top: 0px; margin-bottom: 0px; margin-left: 15px; margin-right: 0px; }