html - CSS Float elements -
I think it can be asked many times, but I have searched in the forum and I do not know the case Answer for.
I have some div's "containers" and some div's "items", they start all the elements, and I want every "container" below the previous one
I know that without using floats on the container I can achieve this but I thought : after
and clear:
would be enough
Why does not this work?
My code:
& lt ;! Doctype html & gt; & Lt; Html & gt; & Lt; Top & gt; & Lt; Link rel = "stylesheet" type = "text / css" href = ". / Style2.css" & gt; & Lt; / Head & gt; & Lt; Body & gt; & Lt; Header & gt; & Lt; / Header & gt; & Lt; Div class = "container" & gt; & Lt; Div class = "item" & gt; & Lt; / Div & gt; & Lt; Div class = "item" & gt; & Lt; / Div & gt; & Lt; Div class = "item" & gt; & Lt; / Div & gt; & Lt; Div class = "item" & gt; & Lt; / Div & gt; & Lt; Div class = "item" & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "container" & gt; & Lt; Div class = "item" & gt; & Lt; / Div & gt; & Lt; Div class = "item" & gt; & Lt; / Div & gt; & Lt; Div class = "item" & gt; & Lt; / Div & gt; & Lt; Div class = "item" & gt; & Lt; / Div & gt; & Lt; Div class = "item" & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "container" & gt; & Lt; Div class = "item" & gt; & Lt; / Div & gt; & Lt; Div class = "item" & gt; & Lt; / Div & gt; & Lt; Div class = "item" & gt; & Lt; / Div & gt; & Lt; Div class = "item" & gt; & Lt; / Div & gt; & Lt; Div class = "item" & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Body & gt; & Lt; / Html & gt;
My CSS:
* {margin: 0; Padding: 0; } Headers {Width: 100%; Minimum height: 25px; Background color: # 444; Status: fixed; Overflow: Auto; }. Container {float: left; Padding: 10px; Margins: 10px; }. Container: after {content: "."; Display area; Height: 0; Clean both; Visibility: hidden; } .item {min-width: 50px; Min height: 50px; Swim left; Background color: light blue; Border: 1px solid red; Margin: 5 px; }
thanks
just specify : your
.container
rules
.container {clear: left; Swim left; Padding: 10px; Margins: 10px; }
Comments
Post a Comment