Quote:
Originally Posted by blondeh
This is a tricky one, and it's nearly making me want to resort to a table... how do you do it??
What I want is this -
An image to the left, who's width cannot be specified in the CSS, and then a DIV to the right of it, which fills the remaining space not taken by the image.
+---------------------------------------------------+
|+------------++-----------------------------------+|
|| UNKNOWN || NON-FIXED WIDTH DIV ||
|| WIDTH IMG ||
|+------------++-----------------------------------+|
| REMAINING SPACE IN BROWSER |
| |
+---------------------------------------------------+
Obviously I can't use float left and then put a left margin on the right hand DIV, because I don't know the margin amount needed.
This is for a portfolio site where I will have many news articles. Each article will have an image and the text to the right. But the image width will be changing for each news item.
Please help!
|
Why do you need a div for the text? The general approach to this would be to have the image (floated left), followed by the text (using <p> tags) inside of a container.
Something like this:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Example</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
<div style="width:800px;margin:0 auto;">
<img style="float:left;" src="http://www.google.com/intl/en_ALL/images/logo.gif" alt="an image" />
<p>Some text next to an image. Add enough text and it will flow underneath the image as well.<br /><br />Here is some lorem ipsum to illustrate:<br />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer quis libero a erat laoreet placerat. Aenean sapien risus, facilisis nec ultricies id, suscipit ac tellus. Mauris quis euismod erat. Donec eu diam a magna imperdiet dictum. Sed sagittis, ipsum imperdiet mattis feugiat, mauris massa iaculis neque, in pellentesque ligula arcu eget lectus. Curabitur luctus hendrerit rutrum. Nullam vehicula tempor convallis. Mauris ac aliquam justo. Maecenas lacinia dignissim sapien nec facilisis. Duis ut sapien orci. Praesent sodales pellentesque malesuada. Vivamus interdum risus et risus ullamcorper at commodo sapien varius. Ut iaculis ligula sit amet orci varius vulputate. Vestibulum pellentesque turpis a nulla venenatis quis mollis dolor consectetur. Maecenas sit amet ornare lacus. In consequat vulputate elit, ac luctus purus fermentum eget.</p>
</div>
</body>
</html>
Or are you worried about having text wrap underneath the image? If so, then this can be worked out fairly easily with some php. Does your host allow you PHP access?
Before you post, read our: 
