Avatar billede syswatch Novice
26. juli 2011 - 12:48 Der er 5 kommentarer og
1 løsning

100% height på divs

Hejsa,
Jeg har dette layout som passer mig fint.
Eneste problem er at jeg ikke kan få kolonnerne til at have samme højde. Mente man kunne løse det ved at angive height 100%, men det ser ikke ud til at virke...
Hvad gør jeg forkert ?


* { padding: 0; margin: 0; }

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
height: 100%;
}

p {
padding: 6px;
}

#wrapper {
margin: 0 auto;
width: 1225px;
border-style:solid;
border-width:1px;
min-height: 100%;
}

#content {
float: left;
color: #333;
height: 100%;
width: 655px;
display: inline;
background: url("../img/sitebg.jpg");
background-attachment: fixed;
background-repeat: repeat-x;
background-position: top;
background-color: rgb(x,y,z);
}


#header {
position: relative;
color: #333;
width: 1225px;
float: left;
height: 227px;
background-image:url('../img/head.jpg');
}

#footer { 
width: 1225px;
height: 25px;
clear: both;
color: #fff;
background: #00455f;
text-align: center;
}


#navigation {
float: left;
width: 1225px;
height: 34px;
color: #333;
background-image:url('../img/menubg.jpg');
}

#leftcolumn {
color: #333;
height: 100%;
width: 285px;
float: left;
background: url("../img/sitebg.jpg");
background-attachment: fixed;
background-repeat: repeat-x;
background-position: top;
background-color: rgb(x,y,z);
}

#boxleft {
margin: 13px 0 13px 13px;
height:200px;
width: 260px;
border-style:solid;
border-width:1px;
border-color: #fff;
background-color: #2b3943;
}

#boxleftdiv {
margin-top: 6px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
color: #fff;
}

#boxcenter {
margin: 13px 0 13px 4px;
height: 100%;
width: 645px;
border-style:solid;
border-width:1px;
border-color: #fff;
background: url("../img/boxbg.jpg");
background-repeat: repeat-x;
background-position: top;
background-color: rgb(x,y,z);
}

#boxcenterdiv {
margin-top: 6px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
color: #fff;
}
#boxcenterdiv h1{
font-style: italic;
}


#boxright {
float:right;
margin: 13px 13px 13px 0;
height:200px;
width: 260px;
border-style:solid;
border-width:1px;
border-color: #fff;
background-color: #2b3943;
}

#boxright p{
margin-top: 6px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
color: #fff;
}

#rightcolumn {
color: #333;
height: 100%;
width: 285px;
float: left;
background: url("../img/sitebg.jpg");
background-attachment: fixed;
background-repeat: repeat-x;
background-position: top;
background-color: rgb(x,y,z);
}


#menu {
margin-top: 2px;
margin-left:20px;
}

/*
CSS Til forms
*/

#login-area {
    position: absolute;
    bottom:5px;
    right:8px;
    width: 229px;
    height:81px;
    margin-top: 0px;
    background: url("../img/login.jpg");
}

#login-area input, #login-area textarea {
    padding: 1px;
    width: 123px;
    font-family: Helvetica, sans-serif;
    font-size: 1.4em;
    margin: 0px 0px 10px 0px;
    border: 0px;
}

#loging-area textarea:focus, #login-area input:focus {
    border: 0px;
}

#signup {
    float: right;
    margin-right:30px;
    margin-top:7px;
    color: #ffffff;
    a:visited:
}

#signup a:visited{
    color: #ffffff;
}


#login-btn {
    float: right;
    margin-right:13px;
    margin-top:4px;
}
Avatar billede LilleUdvikler Nybegynder
26. juli 2011 - 14:04 #1
Står der noget i de div's som ikke er lige høje?
Måske står der mere i den ene end den anden?

Har du måske et link eller noget, så vi kan se hvad det er du laver? :-)
Avatar billede syswatch Novice
26. juli 2011 - 15:24 #2
Du kan se her siden jeg arbejder på: http://www.slaebesteder.dk/v3

Hvordan får jeg DIV boksene til at tilpasse sig indholdet ?
Avatar billede LilleUdvikler Nybegynder
26. juli 2011 - 15:50 #3
Prøv at lade være med at give nogle af dine divs en height. Så justere de sig efter hvor meget indhold der er i dem :)
Avatar billede webweaver Praktikant
26. juli 2011 - 18:54 #4
Prøv at smide overflow: auto; på de bokse som skal udvide sig efter indholdets størrelse.
Avatar billede LilleUdvikler Nybegynder
29. august 2011 - 09:54 #5
Hej Syswatch.

Hvis du har fndet en løsning, må du enten bede en af os der har svaret om at lægge et svar så vi kan få point. Eller hvis du har brugt en løsning du selv har lavet, give dig selv point - så der ikke er et åbent spørgsmål :-)
Avatar billede syswatch Novice
16. august 2013 - 10:40 #6
Er der ikke en der vil smide et svar så jeg kan lukke ?
Havde helt glemt dette spørgsmål.
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester