Can't get dynamic images to work properly with css

Question

Here's my html

<div id="contentBox" style="margin:0px auto; width:100%">      

    <div align="left" id="column1" style="float:left; margin:0; width:37%;">
            <ul class="tmo_list">
                <strong>
          Commercial Buildings<br><br>
          Shopping Centers<br><br>
          Dumpster Pads<br><br>
          Decks & Patio<br><br>
          Store Fronts<br><br>
          Restaurants<br><br>
          Drive Ways<br><br>
          Awnings<br><br>
                </strong>
            </ul>

    </div>

    <div class="wrapper">
        <img src="images/pressurewashing.jpg"/>
    </div>


    <div align="right" id="column3" style="float:right; margin:0; width:37%;">
            <ul class="tmo_list">
                <strong>
          Office Buildings<br><br>
          Business Signs<br><br>
          Loading Docks<br><br>
          Rust Removal<br><br>
          Wood Fences<br><br>
          Gas Stations<br><br>
          Bus Stops<br><br>
          Homes<br><br>
                </strong>
            </ul>

    </div>
</div>

Here's my css

.wrapper img {
display: inline-block;
max-width: 100%;
height: auto;
width: auto;
}

I've been reading a few tutorial's mainly http://www.fredparke.co.uk/blog/using-max-width-resize-images-dynamically and How can I resize an image dynamically with CSS as the browser width/height changes? and How to dynamically resize image in css?

with no luck, I'm tired of changing things... so frustrating, what I get is the image superimposed over column3, but never does the image resize...

user2580076 · Answer 1 · 2013-07-14T05:44:51.953

1

It does resize, Here is the fiddle, http://jsfiddle.net/TCdsK/

What browser are you using? I tried in mozilla and chrome.

Also make sure you have a large sized image, If you have a small image, your css wont stretch, here is the fiddle with the small image http://jsfiddle.net/TCdsK/1/

here is the 3 column layout you are looking for

http://jsfiddle.net/TCdsK/3/

edited Jul 14 '13 at 05:44

answered Jul 14 '13 at 05:22

user2580076

577
2
10

hrmmm... yes, it did have that affect as well, (dropping below column1), I was trying to maintain some columns using division. Initially I had something akin to
for column2, but the image wasn't resizing, and column 3 was overlaying column 2... any idea how I can get the image to stay in the center column?
– thistleknot Jul 14 '13 at 05:32
@thistleknot okay so you are trying to make 3 columns, text-image-text, did I get you right? – user2580076 Jul 14 '13 at 05:34
@thistleknot I am glad I could help, if this answers your question, could you please accept the answer – user2580076 Jul 14 '13 at 05:55
hmm, don't know why, but that only produced rows, not columns, and still didn't resize. Works in the fiddler, just not on my damned webpage!!! argghhhh. here's what it looks like http://imgur.com/ZrAEbeZ – thistleknot Jul 14 '13 at 14:47
@thistleknot can you give acutal link to the website or fiddle the whole page so I can see where the problem is? – user2580076 Jul 14 '13 at 16:38
I can confirm it works in fiddle, but not in my page, here's some screenshots. fiddle http://jsfiddle.net/75FM7/ screenshots http://imgur.com/a8YmDEg (center is fiddle, outer is my page) – thistleknot Jul 14 '13 at 18:25
@thistleknot bud, i cant tell anything from image, I got to see the code to figure out the issue, could you provide the link for your page? – user2580076 Jul 14 '13 at 18:35
I don't have it up, I sent you the fiddle code, did you see it? same post as the lastest imgur here it is again jsfiddle.net/75FM7 – thistleknot Jul 14 '13 at 18:42

Can't get dynamic images to work properly with css

1 Answers1