Home/ Questions/Q 8232783
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-07T17:56:39+00:00

When my browser window is maxmised this code works fine, the child is contained

  • 0

When my browser window is maxmised this code works fine, the child is contained within the parent and the parent spans the width of the browser. However, when the browser window is smaller than the child elements width, the parent element fails to contain it (tested in chrome 20 and firefox 13)

http://jsfiddle.net/x9duU/

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Example</title>

        <style type="text/css">
            #toolbar {
                background-color:#cccccc;
                padding:10px 0;
            }

            #nav {
                background-color:#00cccc;
                margin:0 auto;
                width:1000px;
            }
        </style>
    </head>
    <body>

        <div id="toolbar">
            <div id="nav">NAVIGATION</div>
        </div>

    </body>
</html>

I can solve the problem by floating the parent and giving it a minimum with of 100% but this seems wrong. What can I do to solve this?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    #toolbar is a blocklevel-element, which defaults to width:100% – 100% width regarding the parent element. This is the rule it obeys to, letting the child overflow in case it’s width exceeds. You could tweak this by setting the overflow property.

    However, if you want the parent div to take it’s child’s width into account set a min-width (which equals the width of the child) Important: you have to take possible margins and paddings into account (or change the box-model to border-box).

    #toolbar {
   min-width:1000px;
}​
    • 0