Images Going Over Div Edges

Hopefully this is a simple question. I have a site with 3 “liquid” columns at http://www.alkyangels.com/studio/ and the images on the page push over the right side of the column edges when the browser is sized small. I’m wondering if anyone has a solution. I’d like the columns to expand as the browser gets larger but to stop shrinking when the columns reach the width of the images inside them.

I can include the source code for the page and the css file if needed but thought just the link would suffice. Any takers?

Thanks in advance!
~Dax

Hi Dax and welcome to SPF! :waves:

The link doesn’t work…

However, if you want the narrowest width of a column to be only as wide as the image contained within, then you can use the min-width property on your column.

Play about with these setting:
[css]

<div style=‘width:600px; text-align:center’>

<!-- image: 175x175 –>
<img src=‘www.alkyangels.org/images/AALogoTransSm.gif’ style=‘float:left; width:98%%; max-width:175px; bordeer:0’ alt=‘#’ />

<img src=‘www.alkyangels.org/images/AALogoTransSm.gif’ style=‘float:left; width:98%%; max-width:175px; bordeer:0’ alt=‘#’ />

<img src=‘www.alkyangels.org/images/AALogoTransSm.gif’ style=‘float:left; width:98%%; max-width:175px; bordeer:0’ alt=‘#’ />

</div>
[/css]

Thanks for the replies! (And the welcome!) Sorry about the link it’s .org not .com so it’s http://www.alkyangels.org/studio/
As for the column it’s a main content container controled by CSS with properties:

.thrColLiqHdr #mainContent {
margin: 0 24% 0 23.5%;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.9em;
font-style: normal;
font-weight: normal;
}

I tried putting in the min-width: 505px; into that above but that doesn’t seem to work. And I’m getting confused with the page code and the .css file. There seem to be two images that do this. One in the header (721px wide) and another in the center column (500px wide). So, John, please excuse my ignorance but I’m not sure where to put that code, why you list it three times. Should I put it into the div tags on the page code or into the .css file?

Thanks so much again for helping me out.
~Dax

PS: The “studio” folder is the site I’m working on. The main index page is the live site. <== two different things.

@arrway;

Ignore my previous message and try this:



  <div id="mainContent" style='outline:dotted 5px #f00; overflow:hidden'>

    <!-- image will shrink when the width of the column shrinks below 500px; -->
    <img src="index_files/Placeholder.jpg" style='max-width:500px; width:100%; border:0'>

    <h3>Debug spacer</h3>

    <!-- image will stay the same size but will not overlap when width of the column shrinks below 500px; -->
    <img src="index_files/Placeholder.jpg" style='width:500px; height:300px; border:0'>
     <h1>Alky Angels Motorcycle Riders Association International</h1>

     <p>
       Welcome to the Alky Angels Motorcycle Riders Association International website.
       ...
       ...
       ...
      </p>

   <!-- end #mainContent --></div>


Remove the outline:dotted 5xp #f00 when testing finished.

Screen Dump

OH SO CLOSE!! But I don’t want the column to close smaller than the image. This fix is there but it scrunches the column and hides the photo. I’m trying to get the columns to stop shrinking at 721 for the header and 500 for the center column. Oh, please help me out just a little bit more. We’re so almost there!

AH HA!! Wait a minute! I think I got it. I changed the width attribute from 95% in the container to min-width: 750; and it works! HA! Thanks Kahoutek for the suggestion and thank you also John! You guys are the best!

I am pleased you managed to fix the problem, you may as well go the whole 9 yards and…

http://validator.w3.org/check?uri=http%3A%2F%2Fwww.alkyangels.org%2Fstudio%2F&charset=%28detect+automatically%29&doctype=Inline&group=0&ss=1&outline=1&No200=1&verbose=1

yup, this is a comment problem if your not using fixed with so setting your pixels to the minimum size of your image then it has to work