Hej alle dejlige udviklere.
Jeg har et spærgsmål til et flexibelt layout, som jeg er ved at lave.
Jeg vil gerne have at col-1 og col-3 er 200px hver og står hhv. til venstre og hørjre i mit design.
og så kommer det "svære" (Nok ikke for jer?), at jeg gerne vil have col-2, som er indholds-div'en i midten til at sprede sig, det tilladte i mellem de to andre col. Jeg vil gerne undgå, at give den en fixed width, og det skal være denne col, der udvider sog eller skrumper alt efter hvor høj skærmopløsning brugeren har. Øh... Giver det mening?
Jeg vil i øvrigt også gerne udenom at give wrapperen en fixed width. Er hemmeligheden em?
Kan nogen se, hvad jeg gør galt?
HTML
<html>
<body>
<wrapper>
<div id="col-1">
<ul>
<li><a href="#">nyheder</a></li>
<li><a href="#">billeder</a></li>
<li><a href="#">kommende projekter</a></li>
<li><a href="#">kontakt fredagsbaren</a></li>
</ul>
</div>
<div id="col-2">
<p>col-2 kefjojiav wohfi nvoHWFC OVCIJ CVPIJDWEKN æqknvf æwfj wkpwsfc wpdcjasmkmd aqdoaækndæpkd vcåqåæd qædkmækdm cqækdnæqkd </p>
</div>
<div id="col-3">
<p>col-3</p>
</div>
</div>
</body>
</html>
CSS
@charset "utf-8";
*{
padding: 0px;
margin: 0px;
}
#wrapper {
width: 1026px;
background-color: #FFF;
margin-right: auto;
margin-left: auto;
}
#col-1 {
background-color: #83FFEA;
float: left;
width: 150px;
padding-top:10px;
padding-right: 20px;
padding-bottom:20px;
padding-left: 25px;
}
#col-2 {
background-color: red;
float: left;
padding-top: 25px;
padding-left: 25px;
}
#col-3 {
background-color: green;
float: right;
width: 150px;
padding-top: 25px;
padding-left: 25px;
}
Bimbom