SitePoint Sponsor |
|
User Tag List
Results 1 to 6 of 6
Hybrid View
-
Aug 18, 2004, 19:44 #1
- Join Date
- Apr 2003
- Location
- Albany, NY
- Posts
- 417
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Can't seem to get float to wrap text...
Here's the test page:
http://www.capitalwebhost.net/wraptest.htm
Here's the CSS:
Code:<style type="text/css"> <!-- #main { position: absolute; left: 10px; top: 10px; width: 640px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; line-height: 16px; color: #330099 ; } #content { position: relative ; left: 10px; width: 500px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px; color: #000000; } #content img { float:right;} #adquote { position: relative; float: right; width: 300px; font-size: 8px; line-height: 10px; color:#FF0000; padding: 2px 0 2px 0; text-align:center } --> </style>
Sean P Sullivan
Web Hosting::Web Templates::Free Smilies
Free Image Hosting::DIY Home Repair::DIY Gardening::Flash Games
-
Aug 18, 2004, 20:17 #2
- Join Date
- Nov 2003
- Location
- Northern CA, USA
- Posts
- 46
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
#adquote {
clear: both;
Add the above line ( clear: both; ) to your #adquote style rule.
hth-
-
Aug 18, 2004, 20:24 #3
- Join Date
- Apr 2003
- Location
- Albany, NY
- Posts
- 417
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
doh...thank you...lol...*smacks self in head*.
Owe ya a beer...Sean P Sullivan
Web Hosting::Web Templates::Free Smilies
Free Image Hosting::DIY Home Repair::DIY Gardening::Flash Games
-
Aug 18, 2004, 21:00 #4
- Join Date
- Mar 2004
- Location
- Lovely Leipzig
- Posts
- 166
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Albion's right and I don't want to nitpick but
Code:clear:right;
IMHO, a better solution would be to associate the caption with the picture in the html. That would be more semantically correct and would sort your problem too.
So, if it was me, I'd be aiming more for this
HTML Code:... [s]#content img { float:right;}[/s] [color=red]#ad[/color][s]quote[/s][color=red] {[/color] [s]position: relative;[/s] /*don't need this*/ [color=red] float: right; width: 300px; font-size: 8px; line-height: 10px; color:#FF0000; padding: 2px 0 2px 0; text-align:center }[/color] --> </style></head> <div id="content">.... .... <div id="ad"><img src="/demo_ad.jpg" height="250" width="300"> <br>Vestibulum sit amet nisl. Proin vulputate varius lorem. In lacinia. Cum sociis. </div>
That's my two cents on it,
JohnLast edited by jfitz; Aug 18, 2004 at 22:28.
-
Aug 20, 2004, 16:17 #5
- Join Date
- Nov 2003
- Location
- Northern CA, USA
- Posts
- 46
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Nice catch John,
I saw it was a demo page to wrap the content around the pic, but I agree that your solution is a good one.
Have a good weekend!
-
Aug 22, 2004, 09:56 #6
- Join Date
- Mar 2004
- Location
- Lovely Leipzig
- Posts
- 166
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by albion7
Bookmarks