Menu
I would like the parent-div (red) to grow with the green child-div. Now it just stops at the viewport.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="de" xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title>simple document</title>
<style type="text/css">
* {
font-family: verdana;
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<div style="margin: 30px; background: red; padding: 10px;">
<div style="background: green; width: 2000px;">dxyf</div>
</div>
</body>
</html>
I don't want to use display:table; since it does not work well in IE.
Any ideas?
710
There are two methods to stretch the div to fit the container using CSS tat are discussed below: Method 1: First method is to simply assign 100% width and 100% height to the child div so that it will take all available space of the parent div.
Answer: Use the CSS display Property You can simply use the CSS display property with the value inline-block to make a <div> not larger than its contents (i.e. only expand to as wide as its contents).
A child div can also be wider than its parent by utilizing different positioning such as absolute or fixed positioning. Different results can occur depending on the specified position of the parent div but as long as the element is either absolute/fixed or contains a specified width, it will grow outside the parent.
Answer: Set the 100% height for parents too And we all know that the default value of the height property is auto , so if we also set the height of <body> and <html> elements to 100%, the resulting height of the container div becomes equal the 100% height of the browser window.
Use display: inline-block; on the parent <div> and it will work as expected
115
Make the parent div float:left; and it will be expanded as desired.
38
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
