I would like to conver a news area that show a thumbmail and all text on the right hand side with a title, subheading and a link....some of the subheadings are long and small but they should not wrap under an image.I tried doing a clear:right for the image but the text still wraps. Anyone has a suggestion. I made an image of what it should look like:
here is a gif of what i wanna accomplish with css (<!-- m --><a class="postlink" href="http://www.pepperdine.edu/test_area/victor/images/sample-thumb.gif">http://www.pepperdine.edu/test_area/vic ... -thumb.gif</a><!-- m -->)Give this a try, it's untested, but it should work:<style type="text/css">
img{
width:IMAGEWIDTH;
height:IMAGEHEIGHT;
}
div{
margin-top:NEGATIVE IMAGEHEIGHT;
margin-left:IMAGEWIDTH;
}
</style>
<img src=http://www.webdeveloper.com/forum/archive/index.php/"whatever.jpg" alt="Some whatever." />
<div>
<h3>Heading</h3>
<h4>Sub-heading</h4>
<p>
Some text.
</p>
</div>it works fine! but it totally breaks down if an image is taken off. I woule probably have to set up at least 6 sets of this small section design within a content section of a page. Some might have pictures and some wont. When I take off the image, WAM!
here is a gif of what i wanna accomplish with css (<!-- m --><a class="postlink" href="http://www.pepperdine.edu/test_area/victor/images/sample-thumb.gif">http://www.pepperdine.edu/test_area/vic ... -thumb.gif</a><!-- m -->)Give this a try, it's untested, but it should work:<style type="text/css">
img{
width:IMAGEWIDTH;
height:IMAGEHEIGHT;
}
div{
margin-top:NEGATIVE IMAGEHEIGHT;
margin-left:IMAGEWIDTH;
}
</style>
<img src=http://www.webdeveloper.com/forum/archive/index.php/"whatever.jpg" alt="Some whatever." />
<div>
<h3>Heading</h3>
<h4>Sub-heading</h4>
<p>
Some text.
</p>
</div>it works fine! but it totally breaks down if an image is taken off. I woule probably have to set up at least 6 sets of this small section design within a content section of a page. Some might have pictures and some wont. When I take off the image, WAM!