Home/ Questions/Q 7895143
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-03T07:34:17+00:00

I have a div inside a parent container and want it to be 300px

  • 0

I have a div inside a parent container and want it to be 300px in width and same height as the parent, but with a margin of 10 on each side. I found some answers that say, this is possible by setting height: 100%; margin: 10px; and margin-bottom to a negative value like -20px (to compensate for the 10px space on top and bottom). I tried it like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" style="height:100%;width:100%;margin:0;padding:0;">
    <head></head>
    <body style="height:100%;width:100%;margin:0;padding:0;">
        <div style="height:100%;width:100%;margin:0;padding:0;">
            <div style="border:1px solid black;height:100%;width:300px;margin-top:10px;margin-left:10px;margin-bottom:-20px;">
                Hello world!
            </div>
        </div>
    </body>
</html>

But it doesn’t work. The div has the same height as the parent container, so it overlaps on the bottom …

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" style="height:100%;width:100%;margin:0;padding:0;">
    <head></head>
    <body style="height:100%;width:100%;margin:0;padding:0;">
        <div style="height:100%;width:100%;margin:0;padding:0;position:relative">
            <div style="border:1px solid black;width:300px;position:absolute;left:10px;top:10px;bottom:10px;">
                Hello world!
            </div>
        </div>
    </body>
</html>

    ALSO BY JAVASCRIPT

    <div style="height:100%">
    <div class="child"></div>    
</div>

    JS

    docHeight = document.body.clientHeight;
childHeight = docHeight-22; //2px due to borders
document.getElementsByClassName('child').style.height = childHeight;

    CSS

    .child {padding:10px}

    • 0