Asemointi voi olla hankalaa, sillä osa dokumenttityypeistä käsittelee eri selaimilla elementtejä eri tavalla.
Jos haluat saada ulkoasun samanlaiseksi kaikilla selaimilla, laita dokumenttityypiksi html5.
<!DOCTYPE html>
Laadi seuraavan karkean luonnoksen mukainen asemointi.
Huomaa valkoisella tehdyt, uudet html5:n mukaiset aluemääritykset. Niitä on muitakin.
<div id="runko">
<header> ylaosa </header> <div class="flex-container"> <aside> sivuosa </aside> <article> sisalto </article> </div> <footer> alaosa </footer> </div>
header {
width:100%;
height:30px;
background-color:#add8e6;
border: 1px solid #000000;
}
#runko {
text-align:left;
width:80%;
margin: 0 auto;
position:relative;
padding:0;
background-color:#ffd700;
border: 2px dashed #ff0000;
}
.flex-container {
display: flex;
flex-direction: row;
}
.flex-container > aside {
width:20%;
min-height:600px;
background-color:#db7093;
border: 1px solid #000000;
}
.flexcontainer > article {
width:79%;
min-height:600px;
border: 1px solid #000000;
background-color: #8fbc8f
}
footer {
width:100%;
height:30px;
background-color:#dda0dd;
border: 1px solid #000000;
}
body {
text-align:center;
}
#runko {
text-align:left;
width:80%;
margin: 0 auto;
position:relative;
padding:0;
background-color:#ffd700;
border: 2px dashed #ff0000;
}
header {
width:100%;
height:30px;
background-color:#add8e6;
border: 1px solid #000000;
}
aside {
width:20%;
min-height:600px;
float:left;
background-color:#db7093;
border: 1px solid #000000;
}
article {
width:79%;
float:left;
min-height:600px;
border: 1px solid #000000;
background-color: #8fbc8f
}
footer {
width:100%;
height:30px;
background-color:#dda0dd;
border: 1px solid #000000;
clear:left;
}