Home/ Questions/Q 8147163
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-06T14:15:31+00:00

I have a wrapper containing 3 boxes (green: 300px, blue: 200px and yellow: 100px).

  • 0

I have a wrapper containing 3 boxes (green: 300px, blue: 200px and yellow: 100px). The container can have a width of either 500px or 300px.

What I want is that, in the case the wrapper’s width is 500px, the green and blue boxes get aligned, and the yellow gets hidden (Case A). In the other case (B), if the wrapper’s width is 300px, I want to have the green box in the top, and the other 2 boxes aligned together in the bottom.

Is there a way to do this?

All the heights are equal (e.g. 100px)

UPDATE: I cannot control in advance the width of the wrapper. So I need a solution that works for both cases, not 2 solutions (each for 1 case).

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    <!doctype html>
<html>
    <head>
        <title>Demo</title>
        <style>
            #caseA {width: 500px; float: left;}
            #caseB {width: 300px; float: left; clear: both; margin-top: 100px;}
            #caseA > div, #caseB > div {height:100px; position: relative;}

            .boxGreen {background-color:green; width: 300px; float: left; z-index: 3;}
            .boxBlue {background-color:blue; width: 200px; float: right; z-index: 2;}
            .boxYellow {background-color:yellow; width: 100px; float: right; margin-left:-100px; z-index: 1;}
        </style>
    </head>
    <body>
        <div id="caseA">
            <div class="boxGreen"></div>
            <div class="boxBlue"></div>
            <div class="boxYellow"></div>
        </div>

        <div id="caseB">
            <div class="boxGreen"></div>
            <div class="boxBlue"></div>
            <div class="boxYellow"></div>
        </div>
    </body>
</html>
    • 0