• Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML & CSS CSS - issue with footer

jjdk

Coder
Hi.

I have a issue with the footer, when right column is shorter than the other.
If the right column is the longest, then the bottom is displayed correctly.
I hope for some suggestions for a solution.
Thanks a lot :)

Please check this site and code:

URL: https://kalendersystem.dk/responsive/

HTML:
HTML:
<!doctype html> 
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Lejers Personlige Side</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> 
        <link rel="stylesheet" type="text/css" href="style.css">
    </head> 
    <body>
        <!-- <img class="img-banner" src="img/toplogo.png" alt="topbanner"> -->
        <div class="wrapper">
            <div class="topbanner">
                <h1>Booking [Trin 2 af 5]</h1>
            </div>
            <div id="linje10"></div>
            <div class="info">
                <h3>Vælg periode</h3>
                <p>Dette område anvendes til at skrive en kort info om siden. Højden på boksen skal afhænge af indholdet.</p>
            </div>
            
            <div class="alert">
                <p>Dette område anvendes til info om fejlindtastninger! Højden på boksen skal afhænge af indholdet. I princippet kan der godt sættes en max.højde og supplere med mulighed for at scrolle ned, hvis indholdet fylder mere</p>
            </div>
            <div class="wrapper_body">
                <div class="datopicker_start">
                    <h2>Start</h2>
                    <p>Her vil der blive vist datopicker, hvor der kan vælges en ankomstdato + klokkeslæt.</p>
                    <p>Boksens højde kan i princippet være fast, idet indholdet altid er den samme</p>
                    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                </div>
                
                <div class="datopicker_slut">
                    <h2>Slut</h2>
                    <p>Her vil der blive vist datopicker, hvor der kan vælges en afrejsedato + klokkeslæt.</p>
                    <p>Boksens højde kan i princippet være fast, idet indholdet altid er den samme</p>
                    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                </div>

                <div class="vejledning">
                    <h2>Vejledning</h2>
                    <p>Her vil der stå en vejledningstekst.<br />Denne boks kan være længere eller kortere end de 2 øvrige - alt efter indholdets omfang. </p>
                    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>           
                    
                </div>
            </div>
            <div class="knapper">
                <button type='submit' onclick="this.form.mySubmit.value='1'"> Send </button>
            </div>           
                
        </div>

        
        <footer>
            <div class="footer">
                <div class="bundtekst">
                    <h1>FDF-hytten</h1>
                </div>
            </div>
        </footer>
        
        
        
    </body>
</html>

CSS:
CSS:
*     {
    margin: 0;
    padding: 0;
}
body {
    background-color: #eeeeee;
}
.wrapper {
    width: 100%;
    background-color: #dddddd;
    background-image: url("cream_pixels.fw.png");
    background-repeat: repeat;
}

.topbanner {
    width: 100%;
    background-color: #186e87;
    line-height: 40px;
}
.topbanner h1{
    padding: 5px 5px 5px;
    font-family: arial, Helvetica, sans-serif;
    font-size: 24px;
    color: #fff;
    line-height: 40px;   
}
#linje10 {
    width: 100%;
    background-color: #aaaaaa;
    height: 3px;
}
.info {
    height: auto;
}
.info p{
    padding: 5px 10px 5px 10px;
    font-family: arial, Helvetica, sans-serif;
    font-size: 14px;
    color: black;
}
.info h3{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 125%;
    font-weight: bold;
    text-align: left;
    color: #186e87;
    text-shadow: 0 1px 1px #dadada;
    padding: 5px 10px 5px 10px;
}
.alert {
    height: auto;
    width: 100%;
    background-color: #ffcc66;
}
.alert p{
    padding: 5px 10px 5px 10px;
    font-family: arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: #B80B0B;
}

.datopicker_start {
    width: 100%;
}

.datopicker_start h2{
    padding: 5px 5px 5px;
    font-family: arial, Helvetica, sans-serif;
    font-size: 18px;
    color: #111;
    line-height: 20px;   
}

.datopicker_start p{
    padding: 0px 5px 5px;
    font-family: arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #111;
    line-height: 16px;   
}

.datopicker_slut {
    width: 100%;
    /*background-color: #cccccc; */
}

.datopicker_slut h2{
    padding: 5px 5px 5px;
    font-family: arial, Helvetica, sans-serif;
    font-size: 18px;
    color: #111;
    line-height: 20px;   
}

.datopicker_slut p{
    padding: 0px 5px 5px;
    font-family: arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #111;
    line-height: 16px;   
}
.vejledning {
    width: 100%;
    background-color: #fffcb0;
}

.vejledning h2{
    padding: 5px 5px 5px;
    font-family: arial, Helvetica, sans-serif;
    font-size: 18px;
    color: #111;
    line-height: 20px;   
}

.vejledning p{
    padding: 0px 5px 5px;
    font-family: arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #111;
    line-height: 16px;   
}

.footer {
    width: 100%;
    background-color: #186e87;
    line-height: 18px;       
}   
.bundtekst {
    width: 100%;
    line-height: 30px;
}
.bundtekst h1{
    padding: 5px 5px 5px;
    font-family: arial, Helvetica, sans-serif;
    font-size: 16px;
    color: #fff;
    line-height: 16px;   
}

@media only screen and (min-width: 768px) {

    .wrapper {
        width: 100%;
    }
    .wrapper_body {
        width: 100%;
    }
    .topbanner {
        line-height: 60px;
    }
    .topbanner h1{
        padding: 15px 15px 15px;
        font-size: 30px;
        line-height: 30px;   
    }
    #linje10 {
        height: 4px;
    }
    
    .info p{
        padding: 5px 20px 10px 20px;
    }
    .info h3{
        font-size: 160%;
        padding: 10px 20px 5px 20px;
    }
    .alert p{
        padding: 10px 20px 10px 20px;
        font-family: arial, Helvetica, sans-serif;
        font-size: 14px;
        font-weight: bold;
        color: #B80B0B;
    }
    .datopicker_start {
        width: 30%;
        float: left;
        height: auto;
        outline: 1px solid #aaaaaa;
        outline-offset: -1px;
    }
    .datopicker_start h2{
        padding: 10px 10px 10px 10px;
    }

    .datopicker_start p{
        padding: 10px 10px 10px 10px;
    }
    .datopicker_slut {
        width: 30%;
        float: left;
        height: auto;
        outline: 1px solid #aaaaaa;
        outline-offset: -1px;
    }
    .datopicker_slut h2{
        padding: 10px 10px 10px 10px;
    }

    .datopicker_slut p{
        padding: 10px 10px 10px 10px;
    }
    .vejledning {
        width: 40%;
        float: left;
        height: auto;
        overflow: auto;
        outline: 1px solid #aaaaaa;
        outline-offset: -1px;
    }
    .vejledning h2{
        padding: 10px 10px 10px 10px;
    }

    .vejledning p{
        padding: 10px 10px 10px 10px;
    }
    .knapper{
        padding: 10px 10px 0px 10px;
        line-height: 40px;       
    }
    .footer {
        width: 100%;
        line-height: 20px;       
    }   
    .bundtekst {
        width: 100%;
    }
    .bundtekst h1{
        padding: 10px 10px 10px;
        font-size: 16px;
    }
}
    
@media only screen and (min-width: 1200px) {

    .wrapper {
        width: 1200px;
        margin: auto;
    }   
    .topbanner {
        line-height: 80px;
    }
    .topbanner h1{
        padding: 20px 20px 20px;
        font-size: 30px;
        line-height: 36px;   
    }
    #linje10 {
        height: 5px;
    }
    .info {
        height: auto; /* Skal være auto høj */
    }
    .info p{
        padding: 5px 20px 10px 20px;
        font-family: arial;
        font-size: 14px;
        color: black;
    }
    .info h3{
        padding: 10px 20px 5px 20px;
    }
    .alert p{
        padding: 10px 20px 10px 20px;
        font-family: arial;
        font-size: 14px;
        font-weight: bold;
        color: #B80B0B;
    }
    
    .datopicker_start {
        width: 29%;
        margin-left: 1%;
        margin-top: 1%;
    }
    
    .datopicker_start h2{
        padding: 10px 10px 10px 10px;
        background-color: white;
    }

    .datopicker_start p{
        padding: 10px 10px 10px 10px;
        background-color: white;
    }   
    .datopicker_slut {
        width: 29%;
        margin-left: 1%;
        margin-top: 1%;
    }
    
    .datopicker_slut h2{
        padding: 10px 10px 10px 10px;
        background-color: white;
    }
    
    .datopicker_slut p{
        padding: 10px 10px 10px 10px;
        background-color: white;
    }

    .vejledning {
        width: 38%;
        margin-left: 1%;
        margin-top: 1%;
        margin-right: 1%;
    }

    .vejledning h2{
        padding: 10px 10px 10px 10px;
    }

    .vejledning p{
        padding: 10px 10px 10px 10px;
    }
    
    .knapper{
        padding: 10px 10px 0px 10px;
        line-height: 40px;       
    }
    .footer {
        width: 1200px;
        margin: auto;
        line-height: 20px;

    }   
    .bundtekst {
        width: 100%;
    }
    .bundtekst h1{
        padding: 10px 10px 10px 10px;
        font-size: 18px;
    }
}
 
Top