I have scoured this site extensively, searching for a solution to my problem. What I thought was a simple issue has left me frustrated after hours of trying to figure it out on my own. So, I've finally admitted defeat and turned to seek help...
Here's the crux of the matter: I have a main DIV containing two nested DIVs. The first one, "snapshot", includes a script that generates a website snapshot from websnapr.com. With a width of 230px defined for this DIV, the snapshot size is set at 202x150. The second DIV, "description", is intended to be displayed alongside the snapshot with some text inside. However, the text ends up flowing beneath the snapshot instead of staying aligned next to it on its right side.
The issue lies in the alignment of lines 11 and beyond below lines 1-10, not under the snapshot, as desired!
Below is the code snippet:
<div class="entry">
<h2 align="center">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's the CSS styling 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 experimented with various properties like display, clear, overflow, etc., for these two DIVs without success. Hopefully, someone can point out what I'm overlooking here...