:
Faux Columns, , .
, , . HTML HTML- , display CSS , :
<a href="#">
<div style="height:200px;width:200px;">
They wanted the anchor to have height/width
And didn't realize that a `display:block` CSS property
would allow the anchor element a height/width
</div>
</a>
CSS float clear, float margin overflow-y. , :
<div style="background:yellow;overflow-y:hidden;">
<div style="width:100px;float:left;">
Left Column
</div>
<div style="height:500px;margin-left:101px;background:blue;">
Main Column
</div>
</div>
... as soon as you realize that you look at the Faux Columns trick , and then you can summarize that into three columns too .
If you then do everything further and start playing with CSS positioning ...
<div style="border:2px solid black;margin:50px;border:2 px solid yellow;height:1500px;width:500px;">
<div style="height:50px;border:2px solid red;position:absolute;top:0px;">
Absolute; Top (take note that its parent element is statically positioned...)
</div>
<div style="border:2px solid blue;position:relative;left:100px;height:200px;padding-top:50px;">
Relative; see how it just offset from where it is normally?
<div style="height:50px;border:2px solid red;position:absolute;top:0px;">
Absolute; Top (take note that its parent element is NOT statically positioned hence why it not in the same place as the last absolutely positioned div)
</div>
</div>
<div style="height:50px;border:2px solid green;position:fixed;bottom:0px;">
Fixed; bottom (even there when you scroll)
</div>
</div>
... then I think you can go from “basic CSS knowledge” to “experienced”.
source
share