Float clear overflow
Float och clear samt overflow:hidden/auto
Float ser till att just det block elementet flyter till vänster på sidan så långt det går. Om det inte får plats så flyttas det ner under det tidigare elementen. HTML elementet som berörs flyttas ut ur det ordinarie flödet och kan flyta både till vänster och höger.
Om man börjar att flyta element så kan man ibland behöva stänga av flytandet. Det gör man med CSS-egenskapen "clear".
Clear ser till att allt ska hamna under det som finns till vänster(left) eller höger(right) eller båda delarna(both).
Här kommer ett till exempel som är lämpligt att exprimentera med.
1) ändra width på rubrik
2) öka istället bredd på kolumn2 (eller padding eller border), vad händer och varför
3) varför hamnar allt i mitten
4) varför hamnar texten i sidfoten i mitten men inte rubriken
?) Hur får man kolumnerna i samma färg ( t ex khaki färgen). Vi vill inte se någon laxrosa färg.
Tips! Det kan vara smart att sätta rubrik taggarna (h1-h6 taggarna) till margin:0 och padding:0 för att lättare kunna styra utseendet på sina sidor. Eftersom de har som default att det ska vara luft ovanför och under och det är inte alltid vi har koll på hur mycket luft det blir.
Vi använder en div-tagg, "container", som behållare för allt och som har overflow:hidden för att div-taggens kantlinje ska synas under utvecklingen. Om vi inte hunnit skapa eller vill ha sidfot (med clear:both) så vill vi att det ska se bra ut ändå. Det gör det med denna inställning. Om vi bygger nedanstående som har en sidfot utan overflow:hidden så skulle det se tokigt ut tills vi lagt till sidfoten, först då hade allt ordnat sig och kantlinjen omslutit allt.
I vårt fall går det lika bra med overflow:auto och detta css trick kallas "the clearfix hack".
<!DOCTYPE html>
<html>
<head>
<title>2 kolumner</title>
<style>
body {
margin:0px;
font-family:Calibri, Arial, sans-serif;
}
.container {
width:500px;
margin:auto;
padding: 0px;
border:1px black solid;
background-color:lightsalmon;
overflow:hidden; /* viktig när man bygger för att det ska bli bra utan eventuell sidfot med clear:both */
}
.rubrik {
/*width:100%; */ /* onödig */
padding:10px 50px;
margin:0px;
border-bottom:1px black solid;
background-color:lightskyblue;
}
.kolumn1 {
width:230px;
/*height:200px;*/ /*väldigt begränsande, oflexibelt*/
margin:0;
padding:10px;
float:left;
background-color:#C93;
}
.kolumn2 {
width:229px;
/*height:200px;*/ /*väldigt begränsande, oflexibelt*/
margin:0;
padding:10px;
border-left:1px black solid;
float:left;
background-color:#396;
}
.sidfot {
text-align:center;
margin:0;
padding:10px;
border-top:1px black solid;
background-color:#999;
clear:both;
}
</style>
</head>
<body>
<div class="container">
<div class="rubrik">
Hej svejs!
</div>
<div class="kolumn1">
xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx
</div>
<div class="kolumn2">
yy yy yy yy yy yy yy yy yy yy yy yy yy yy yy yy yy yy yy yy yy yy yy yy yy yy yy yy yy yy yy yy yy yy yy yy yy yy yy
</div>
<div class="sidfot">
© PB
</div>
</div>
</body>
</html>
Ett exempel med clearfix
Först utan "clearfix".
div { background-color:#C60; width:500px; border:5px solid red;}
<div>
<img src="bilder/ros.jpg" alt="ros" />När bilden flyter till höger och är större än det omgivande html-elementet som här är en div-tagg så förstår inte div-taggen att den ska omsluta bilden.
</div>
När bilden flyter till höger och är större än det omgivande html-elementet som här är en div-tagg så förstår inte div-taggen att den ska omsluta bilden.
Nu med "clearfix".
div { background-color:#C60; width:500px; border:5px solid red; overflow:auto;}
<div>
<img src="bilder/ros.jpg" alt="ros" />När bilden flyter till höger och är större än det omgivande html-elementet som här är en div-tagg så förstår inte div-taggen att den ska omsluta bilden. Om inte som i detta fall lägger till overflow:auto i stilmallen till div-taggen.
</div>
När bilden flyter till höger och är större än det omgivande html-elementet som här är en div-tagg så förstår inte div-taggen att den ska omsluta bilden.