plonknimbuzz plonknimbuzz - 4 days ago 4
CSS Question

CSS responsive - after clear both, div pill up/stack instead back to normal

i try to learn responsive website. but i get stuck in here

<!doctype html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<style>
div{
display: block;
height: 50px;
}
.header{
width: 50%;
background-color: red;
}
.left{
background-color: green;
float: left;
width:50%;

}
.right{
background-color: blue;
float: left;
width : 50%;

}
.clear{
display: none;
clear: both;
}
.footer{
width: 50%;
background-color: yellow;
}
</style>
</head>
<body style="width: 100%">

<div class="header">without float</div>
<div class="header">without float</div>
<div class="left">kiri</div>
<div class="right">kanan</div>
<div class="clear"></div>
<div class="footer">after clear xxxxxxxxxx xxxxxx</div>
<div class="footer">after clear shshjsjaa shsusus</div>

</body>
</html>


why div class footer not back to normal like class header?

as i know clear: both clear :left is erase float: left rule. but i dont know why my footer looks pill up

looks for this image to see the display
enter image description here

Answer

You should not add "Display:none;" with "clear:both". that makes div hidden.

Comments