ansaurus

Question

Is there a way for CSS to determine and adjust for image widths?

Answer 1

A:

The best solution to your problem is probably to modify the CSS dynamically with JavaScript. JQuery's .width() allows you to do things like get the width of an image, and .css() can be used to modify the CSS of an element (including width, margin, and padding). My suggestion would be to add an ID to each itemIcon and itemBody, then use the onload() event to style the divs appropriately.

Guildencrantz 2010-02-28 16:28:40

Answer 2

A:

I hope someone can give you a div/css based solution. But in order to deal with the varying image widths, I think that you will need one of these four things:

inline styles created manually (as you have now)
inline styles created in server-side code
width of text blocks adjusted with javascript
single-row table for each image-and-text block

Perhaps it is just a failure of my imagination, but I don't see that this layout can be done without setting specific paragraph widths somehow, or using a single-row table for each block.

Ray 2010-02-28 16:29:51

Answer 3

+1 A:

You can remove those custom inline margins and paddings if you add overflow: auto to the .itemBody instead:

.itemIcon {
    float: left;
    margin-right: 10px;
}
.itemBody {
    overflow: auto;
}

You will not, however, be able to get rid of that inline width on the .itemIcon like this, because there's no way in CSS to limit the width of the <p> to the width of the image that precedes it. If you only have an image, though and no text to go along with it, you don't need the width.

You can get rid of the inline styles altogether, though, if you use CSS tables:

.itemIcon {
    display: table-cell;
    padding-right: 10px;
}
.itemBody {
    display: table-cell;
    vertical-align: top;
    width: 100%;
}

The width: 100% on the itemBody forces the width of the itemIcon down to its minimum width, which is determined by the width of the image. The vertical-align: top will stop the first line of the itemBody from lining up with the image/text in the itemIcon "table column".

mercator 2010-02-28 16:31:51

Answer 4

A:

CSS doesn't provide, so far as I'm aware, any means for conditional operators, or logic-based operations. This means that you're limited in your choices to:

server-side image-adjustments
client-side image-, or style-, adjustments
using css to apply a consistent width to the images

Of all of these, I'll address point three, which offers a couple of options.

The first is to use:

img {width: 100px; /* or whatever */ }

The second is restricted to working with only absolute positioned images:

img {clip: rect(0 100 100 0); } /* which will take the original image and clip it to the specified dimensions (top, right, bottom, left) */

David Thomas 2010-02-28 16:34:50

Answer 5

A:

OMG everyone forgot table:). I guess table is good fit for this kind of problems.

<div class="item"> 
    <table>
    <tr>
    <td class="image">
    <div class="itemIcon" >
      <img src="icon.png" alt=""/> 
      <p>This is the caption that is under the image.</p>  
    </div>
    </td>
    <td>
    <div class="itemBody" >    
      <h1>This is the first item</h1>
      <p>Aliquid aliquam fabulas duo an, eu delenit intellegebat has, in sit commodo aliquip. Inermis neglegentur vis an, ea mei habeo animal verterem. Cum vivendo intellegam disputando id, usu id dicta harum convenire. Cibo corpora ut pri, sed legere probatus aliquyam no, vidisse suscipiantur eu mea. Modus etiam concludaturque pro an, ut latine quaeque per. Harum ignota mnesarchum pri ad, duo et diam oblique epicurei, pri ne vivendo omnesque epicurei.</p> 
      <p>Aliquid aliquam fabulas duo an, eu delenit intellegebat has, in sit commodo aliquip. Inermis neglegentur vis an, ea mei habeo animal verterem. Cum vivendo intellegam disputando id, usu id dicta harum convenire. Cibo corpora ut pri, sed legere probatus aliquyam no, vidisse suscipiantur eu mea. Modus etiam concludaturque pro an, ut latine quaeque per. Harum ignota mnesarchum pri ad, duo et diam oblique epicurei, pri ne vivendo omnesque epicurei.</p> 
    </div> 
    </td>
    </tr>
    </table>
  </div>

td.image {
     vertical-align:top;
    }

Anantha Kumaran 2010-02-28 17:08:46

Answer 6

A:

The inline style thing is taken care of easily. Add a class to .item like .big, with the HTML then being, for example,

<div class="item big">

and the style being

.item.big .itemIcon { width: 160px; padding-left: -170px; }
.item.big .itemBody { margin-left: 170px; }

There is no way to dynamically change numbers using CSS alone. You can use javascript or a server-side function to insert class names and such. If you're automatically generating the images, you'd handle this at the same time. If you're doing it by hand, adding a class once makes it a lot easier.

D_N 2010-02-28 17:32:53

ansaurus

tags:

views:

answers:

Is there a way for CSS to determine and adjust for image widths?

related questions