I think I searched thoroughly this site, but could not find answer to my issue; I also think it's pretty simple, but after several hours of puzzling with this, I have given up and decided to look for help...
Here is my issue; I have a DIV, and two DIVs within it; first DIV, "snapshot" contains script that returns website snapshpt, using websnapr.com; snapshot size is 202 x 150, so I defined width of that DIV to 230 px. Second DIV, "description", is supposed to be displayed on the right side of that snapshot, and it contains some text. My issue is that text at the end flows around "snapshot", i.e., beneath it, and I want it to stay in line, always on the right side of DIV "snapshot", not below him.
So, you see lines 1 through 10 are fine; I want lines 11 and 12, and rest of the text, to be aligned below lines 1-10, not below snapshot!
Here is the code:
<div class="entry">
<h2 align="center">Some title here...</h2>
<div id="snapshot"><script type="text/javascript">wsr_snapshot('some link here', 'some pass here', 's');</script></div>
<div id="description"><p>Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6<br>Line 7<br>Line 8<br>Line 9<br>Line 10<br>Line 11<br>Line 12<br></p>
<p align="left">Link:<br>
<a href="#" target="_blank">some link here</a></p></div>
</div>
and here is CSS for these IDs and classes:
.entry {margin:0 0 20px 0; border:2px solid #fff; background:#e6e6e6 url(images/bg.png) repeat-x; color:#333; padding:10px 10px 0 10px; min-height:200px; height:auto !important; height:200px; }
#snapshot {float:left; width:230px;}
#description {display: block; margin-left:240 px;}
I've tried with various properties for these two DIVs - display, clear, overflow, etc., to no avail; hope someone can shed light on what I'm missing here...