flydende DIVs i vertikal retning
Hej eksperterJeg er er også hoppet med på DIV bølgen. De kloge siger jo at det er mere korrekt at bruge end tables, når det kommer til opbygning af design. Jeg har brugt en tutorial fra http://www.devarticles.com/c/a/Web-Style-Sheets/DIV-Based-Layout-with-CSS/7/
Det er sådan at jeg har tænkt mig at designet skal se ud når jeg har fået skåret photoshop billederne ud. Hvor jeg førhen ikke havde noget problem ved at bruge tables, som er uhyre nemme at styre, så er jeg løbet ind i en del problemer ved divs. Jeg synes at det er sådan nogle underlige løsninger. Men nu til det rigtige problem.
Jeg vil have at min "footer" altid smider sig i bunden af browseren, og hvis der er ikke er nok indhold på siden, så trækker den bare siden ned, således at browseren altid er fyldt ud, og har en bar i bunden. Jeg har lavet det i sin tid på www.klippegavekort.dk med tables. her klister indholds siden og højre side sig til bunden af browseren uanset hvad. Det er samme effekt jeg vil opnå med DIVs, dog skal indhold og højre side klistre sig til footer siden, som så altid er placeret i bunden.
I øvrigt ville jeg gerne have hele designet centreret
Jeg har ændret eksemplet fra tutorial siden som jeg mener at man burde gøre det (mere krævede tables ikke), men alle divs flyder bare oven i hinanden.
Mit design ser ud som følgende:
<html>
<head>
<title>TWO-COLUMN LIQUID LAYOUT WITH FLOATING BOXES</title>
<style type="text/css">
<!--
body {
margin: 0px;
padding: 0px;
}
#header {
background: #0f0;
width: 750px;
}
#rightcol {
background: #f00;
float: left;
width: 200;
height: 100%;
}
#content {
background: #fff;
float: right;
width: 500;
height: 100%;
}
#footer {
background: #0f0;
clear: both;
width: 750px;
height: 100px;
}
-->
</style>
</head>
<body>
<div id="header">Header Section</div>
<div id="righttcol">Right Section</div>
<div id="content">Content Section</div>
<div id="footer">Footer Section</div>
</body>
</html>
