Miten saa järkevimmin css:llä tehtyä seuraavanlainen sivupohja?
Kuva
Nuo Left ja Right ovat kiinteillä mitoilla ja tuo Content on määritelty prosenttena.
Ei kai ole mitään järkeä laittaa reunapalkkeja kiinteästi ja keskustaa prosentteina. Mitä tapahtuu, kun summa on yli 100%? Miten rumaa jälkeä tulee, kun summa on vaikka alle 50%?
Tavoitteesta riippuen olisi järkevää laittaa joko kaikki kiinteästi tai kaikki prosentteina. Reunat voi kelluttaa (float), ja keskustalle voi laittaa vastaavan marginaalin, jos haluaa, että palkkien alle jää tyhjää tilaa.
Itse määrittäisin reunoille kiinteän leveyden ja jättäisin keskustan määrittelemättä -> sen koko määräytyy jäljelle jääneen tilan mukaiseksi. Kun näiden yhteiselle parentille vielä määrittää vähimmäisleveyden, niin sisältöaluetta ei voi kutistaa mielivaltaisen pieneksi.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<style type="text/css">
body {
width: 80%;
min-width: 50em;
margin: 20px auto;
border: 1px solid red;
}
body > * {
min-height: 500px;
}
.bar {
width: 140px;
background: #55d;
}
#bar-1 {
float: left;
}
#bar-2 {
float: right;
}
#content {
display: inline-block;
}
</style>
</head>
<body>
<div id="bar-1" class="bar">
<p>Left stuff</p>
</div>
<div id="content">
<p>Lorem ipsum</p>
</div>
<div id="bar-2" class="bar">
<p>Right stuff</p>
</div>
</body>
</html>Okei. Kiitoksia!
Aihe on jo aika vanha, joten et voi enää vastata siihen.