All geek questions in one place

Why does a wrapper div wrap one and two divs? (In Firefox Browser)

Why does a wrapper div wrap one and two divs? (In Firefox Browser)

<html>
<head>
<style>
#wrapper {position:relative; background:red; border:solid 1px green;}
#one {position:absolute; top:0; left:10px; width:30%; border:solid 1px blue;}
#two {position:absolute; top:0; right:0; width:30%; border:solid 1px yellow;}
</style>
</head>
<body>
<div id="wrapper">
<div id="one">111</div>
<div id="two">222</div>
</div>
</body>
</html>
+3
source share
2 answers

Since there is technically no content in the div wrapper. All its elements were placed absolutely (relative to the wrapper), so there is no content to get the height.

You will get the same effect if you placed both child divs.

You can try placing it overflow: hiddenon a wrapper by giving the shell an explicit height or giving it some "real" content.

+5
source

, . div, div, , . , divs, , , div

#wrapper {position:relative; background:red; border:solid 1px green;}
#one {float:left; width:30%; border:solid 1px blue;}
#two {float:right; width:30%; border:solid 1px yellow;}


<div id="wrapper">
   <div id="one"></div>
   <div id="two"></div>
   <div style="clear:both"></div>
</div>

.

+3

Source: https://habr.com/ru/post/1716688/

More articles:


All Articles