How do I get CSS "width:auto" to give sizing priority to text alongside it within a DIV?

Question

I am using width:auto to have an image look reasonably sized on both desktop and mobile. My problem is that the image takes sizing priority to fit on the screen and bunches the text up on the right. I am hoping to have the image take 30% to 40% of the screen to leave room for the text on the right. I'll decide specifics in that regard once I see how it looks when working.

I have tried using max-width:40% with the width:auto for the image and for some reason the image becomes very small.

I have three different sections on the page I want to format with this style. This is the latest effort permutation of the HTML/CSS for one of them:I have been struggling with this for way too long and any help that can be provided would be greatly appreciated.

Other things I have tried to include putting both the image and the text in separate div sections and using max-width:30 and max-width:70 on each of those containers respectively. I've also tried using max-width: 30% directly on the image and the text free floating in the same container without a container defined specifically for the text.

    .writingsBox {
       display : flex; 
       max-width : 1600px;
       Padding-right : 15px;
       align-items : center;
       background-color : #EAE2BA;
    }

    }
    .leftImage {
       display:block;
       width: auto;
       max-width:333px;
       float:left;
       border : solid 3px;
       margin : 15px;
    }

    .blockLink {
       display : block;
       color : black;
    }

<!DOCTYPE html>
<html>

<body>
   <div class="writingsBox"><a class=blockLink href="https://thewebsite.text/thewebpage.html">
         <div style="display:inline;width:30%"><img src="https://i.sstatic.net/19E7G693.png"
               alt="Home Page Pic Travel Log" class="leftImage  pluginImg28" /></div>
      </a><a class=blockLink href="https://thewebsite.text/thewebpage.html">
         <div style="display:block;width:70%">
            <h1>Writings</h1>
            <font style="font-size:1.25em;font-color:black">This is where perspectives, ideas and general philosophies
               are
               dispensed in WebLogs and snippets to form a library of experiential outcomes. In other words, this is
               where
               I write what's on my mind.</font>
         </div>
      </a>
   </div>
</body>

</html>

It looks like you initially screwed up something with the code, so it wasn't presented as a snippet. After the second attempt, the snippet works, but only after I approved the question without further changes. I did not find out the root cause, could be some site software mulfunction... — Sergey A Kryukov
– Sergey A Kryukov, Commented Aug 24 at 20:54
Thanks for hanging in there and your help along the way Sergey. Hopefully all is well in the post now. — Vranicoff
– Vranicoff, Commented Aug 24 at 21:32
No problem. I did not look at the problem itself yet, by the way. — Sergey A Kryukov
– Sergey A Kryukov, Commented Aug 24 at 21:33
Still, I added minor fixes after that. Please confirm or edit further after the edit approval. — Sergey A Kryukov
– Sergey A Kryukov, Commented Aug 24 at 21:36
I think the problem may have been caused by stray character introduced by cut and paste. I see some oddly placed linefeeds as I look at the final post. It's puzzling to me though because I pasted into a text editor first which historically strips such issues and then copy again from there. Anyway, it's solved thank you. Now and the post is live. Now let's see if the actual problem posted about can get solved. — Vranicoff
– Vranicoff, Commented Aug 25 at 2:14

Vranicoff · Accepted Answer · 2025-08-27 18:47:17Z

The answer looks to be that the CMS framework around the site is causing the issue. I am using a HTML plugin on a wiki page to display this information. Everything has worked fine using this strategy and it didn't occur to me that the outer framework could cause this one singular problem of image resizing on mobile until I saw these suggestions confirming that previous attempts should have worked fine. I copied my HTML to a stand-alone page and it works fine. So now I have a different kind of problem to solve.

At the risk of TMI I would like to thank you for hanging in there with me to figure this out. I used to run highly technical teams in a very hand on way as a go-to sort of guy and am now in my 4th year of recovery from a brain injury. I am at a point now I am trying to make myself useful again. This may have seemed like a waste of time for you, but for me it has been more helpful, and meaningful, than one might guess. So thank you again for your help.

dwpprof · Accepted Answer · 2025-08-25 03:15:14Z

Your code is not formatted very clearly, did I understand correctly that it is like this?

<!DOCTYPE html>
<html>
    <body>
       <div class="writingsBox">
            <a class=blockLink href="https://thewebsite.text/thewebpage.html">
                <div style="display:inline;width:30%">
                    <img src="https://i.sstatic.net/19E7G693.png" alt="Home Page Pic Travel Log" class="leftImage  pluginImg28" />
                </div>
            </a>
            <a class=blockLink href="https://thewebsite.text/thewebpage.html">
                <div style="display:block;width:70%">
                    <h1>Writings</h1>
                    <font style="font-size:1.25em;font-color:black">This is where perspectives, ideas and general philosophies
                       are
                       dispensed in WebLogs and snippets to form a library of experiential outcomes. In other words, this is
                       where
                       I write what's on my mind.</font>
                </div>
            </a>
       </div>
    </body>
</html>

You have a <div class='writingsBox'/> which are two child elements <a class='blockLink'/>.

Your css flex container known only about youra elements, not for it childs div that are lower in the hierarchy. That's why your percentage styles don't work properly, because it sets the width inside your blockLink elements, not the parent writingsBox element.

if both your blocks should open one link, you can replace the div block with a and set a class with css properties flex for it, then you need to remove the a elements inside the container and leave the div blocks with set width sizes in percentage, then I think you will get what you wanted

<!DOCTYPE html>
<html>
    <body>
        <a class="writingsBox" href="https://thewebsite.text/thewebpage.html">
            <div style="display:inline;width:30%">
                // img
            </div>
            <div style="display:block;width:70%">
                // text
            </div>
        </a>
    </body>
</html>

Also you can just set style="display:inline;width:30%" for blockLink element not for div inside it and this will solve problem too

<!DOCTYPE html>
<html>
    <body>
       <div class="writingsBox">
            <a class=blockLink style="display:block;width:70%" href="https://thewebsite.text/thewebpage.html">
                <div>
                    // img
                </div>
            </a>
            <a class=blockLink style="display:block;width:70%" href="https://thewebsite.text/thewebpage.html">
                <div >
                    // text
                </div>
            </a>
       </div>
    </body>
</html>

Thank your for the response.I was pushing to get this question in before surgery today in the hopes of getting an answer while down that I could try when back at it. I'm still kinda loopy and will give this a go in the next day or two. I'm not sure where the down-vote came from. It wasn't me. I'm happy to have something to try. thank you for the suggestions and explanations.

Collectives™ on Stack Overflow

How do I get CSS "width:auto" to give sizing priority to text alongside it within a DIV?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related