Home/ Questions/Q 6528011
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T09:29:41+00:00

I’m trying to code more responsive after reading Ethan Marcote’s A Book Apart .

  • 0

I’m trying to code more “responsive” after reading Ethan Marcote’s A Book Apart.

I have come up with a case which I’m not sure how to solve. In a li element, I have four different divs. The first one cannot change width or height (I know this isn’t responsive but the image size must remain the same within it). The other three divs can stretch as they are just text.

Now, I know I can set the divs to have different percentages of their parent width, which is fine, except for the fact that div1 HAS to be a defined pixel width. This throws out the calculations for the other percentages (browser width – 77px is going to be a different number for different browser sizes), so what shall I do?

I’ve whipped up this to help illustrate my problem.

enter image description here

As I mention, I realise I can use JS to set a container div’s width on document load and resize but that seems, well, not so great.

Thanks for any help 🙂

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Maybe table somethings can help

    <!DOCTYPE html>
<html>
    <head>
        <style>
            li { display: table; clear: both; width: 100% }
            li div { display: table-cell; border: 1px solid blue; height: 1em }
            .div1 { min-width: 65px; max-width: 65px }
            .div2 { width: 60% }
            .div3 { width: 10% }
            .div4 { width: 30% }
        </style>
    </head>
    <body>
        <ul>
            <li>
                <div class="div1"></div>
                <div class="div2"></div>
                <div class="div3"></div>
                <div class="div4"></div>
            </li>
            <li>
                <div class="div1"></div>
                <div class="div2"></div>
                <div class="div3"></div>
                <div class="div4"></div>
            </li>
        </ul>
    </body>
</html>
    • 0