Home/ Questions/Q 6565565
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T14:06:35+00:00

Consider this bit of HTML & CSS: <html> <head> <title>Relative Positioning Resize Demo</title> <style>

  • 0

Consider this bit of HTML & CSS:

<html>
    <head>
        <title>Relative Positioning Resize Demo</title>
        <style>
            div.outerDiv {
                border: 1px solid black;
                height: 300px;
                padding: 10px;
            }

            div.innerDivA, div.innerDivB {
                border: 1px solid blue;
                float: left;
                width: 50%;
            }

            div.innerDivB {
                margin-left: 10px;
            }
        </style>
    </head>
    <body>
        <div class="outerDiv">
            <div class="innerDivA">content a</div>
            <div class="innerDivB">content b</div>
        </div>
    </body>
</html>

The outer div does not have a width specified and expands to the width of the browser window. I want the inner divs to behave similarly, expanding to the width available within their parent div while respecting the 10px margin and padding, never wrapping to two lines, and adjusting to the resizing of the browser window. I’ve tinkered with relative widths and haven’t really achieved the results I’m looking for.

Is this possible with CSS?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The desire for minimal markup is understandable, but mixing and matching percentages and specific pixel values with the various box models will not guarantee consistent results with how you have your present structure.

    You can do this one of several ways:

    1) Add more HTML markup; Fiddle to illustrate: http://jsfiddle.net/kgosser/d4Q2D/

    2) Be comfortable with the chance of layout breaking if page size dips below a certain width, such as 400px

    3) Do everything with percentages and be comfortable with the paddings being dynamic; Fiddle: http://jsfiddle.net/kgosser/EnSd2/

    4) Use jquery to dynamically adjust the widths, heights, and margins–specifically using absolute and relative positioning.

    • 0