Help with CSS, please?

October 26, 2006 2:50 AM

Posting on behalf of a friend: CSS Absolute / relative positioning problem. In designing a course website which has to validate as XHTML (Strict or Transitional), I've come up against a problem with an image. I want the image to remain in the right hand div but resize gracefully. My problem is that the trowel image either interferes with the header (is too high) but IS able to move with the page or doesn't interfere with anything but won't resize with the page!

Two examples

here
and
here.

Thanks!

posted by dance to clothing, beauty, & fashion (4 comments total)

There are a few problems with the css in this document. I assume what you're asking is how does the trowel get bigger or smaller to fill the sidebar when the browser window is resized?

First thing, you need to define widths for the parents. The sidebar isn't currently floating properly because the width isn't defined. It should be 35%, to account for the margins and padding on the "main" div. Second, the trowel div then needs to be defined as having a width of 100%, and then you can define the #trowel img in css to have a relative width, 100% or 50% or whatever.

You don't need to float the main AND the sidebar, just one or the other, as long as the floated div is before the non-floated div.

I assume your friend is just learning, based on the code. There are lots of good tutorials out there, usually just google something like "css div float img relative" or similar. w3schools is always a good start.
posted by maxwelton at 3:25 AM on October 26, 2006

Sorry, that was based on the first example.
posted by maxwelton at 3:27 AM on October 26, 2006

The image shouldn't need a div around it. It should just sit in the div that floats to the right. maxwelton is right also. only one of the containers needs to float.

Keep the main content relative with no floats then float the right column. Give the right div an absolute width and ensure the image is no bigger than it. there is no way in css to dynamically resize an image. You would need to write a javscript function or similar I think.
posted by twistedonion at 5:06 AM on October 26, 2006

ah, I didn't read maxweltons tip... learn something new every day! you can dynamically resize images, that's well cool. With that in mind replace sidebar, trowel and trowel img with the following and you should be on your way (based on your top link) Worked perfectly for me:

#sidebar {
background:white;
float:right;
width: 30%;
border: 1px solid red;
}

#trowel {
position:relative;
width: 100%;
}

#trowel img {width: 100%;}
posted by twistedonion at 5:25 AM on October 26, 2006