plonknimbuzz plonknimbuzz - 4 months ago 33
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>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
display: block;
height: 50px;
width: 50%;
background-color: red;
background-color: green;
float: left;

background-color: blue;
float: left;
width : 50%;

display: none;
clear: both;
width: 50%;
background-color: yellow;
<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>


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


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