Can't get the div to define how I want

This is the site I work for for a school project. The page is in Dutch, sorry. http://v14ewoude.helenparkhurst.net/index.html I am trying to get my div to hide all my content. But it keeps in my headline. I cannot get it to work. Can anyone find it for me? Thanks in advance.

Here is a portion of my code:

   <body><div id="wrapper">
<img class="logo" src="images/ericvanderwoude.png" alt="Eric van der Woude" height="150" width="150">
    <header>
        <h1>Informatica Opdracht</h1>
    </header>
    <nav id="menu">

        <ul>
            <li><a href="index.html" title="Home">Home</a></li>
            <li><a href="#" title="About">About</a></li>
            <li><a href="#" title="Portfolio">Portfolio</a></li>
            <li><a href="#" title="Contact">Contact</a></li>

        </ul>   

    </nav>

    <section class="fullwidth">
        <h3>Opdracht</h3>
        <p>De opdracht was een site te maken met behulp van HTML5 en CSS. Als hulpbronnen mocht ik onder andere de cursus op <a href="http://informatica-actief.stoas.nl/login/index.php" target="_blank">Informatica Actief</a> gebruiken en de informatie van <a href="http://www.w3schools.com/" target="_blank">W3Schools.</a></p>
        <h3>Eisen</h3>
        <p>Volgens de opdracht moest ik mij aan een aantal eisen houden, namelijk de site moest minimaal een startscherm, hoofdscherm en minimaal 1 scherm vanuit het menu in het rechtergedeelte. Ik moest zo veel mogelijk laten zien wat ik van HTML5 en CSS afweet. De opmaak moet geheel met CSS zijn gemaakt en de pagina moet een favicon hebben.</p>
    </section>

    <article>



        <h3>Kolom</h3>
        <p>Voor het gemak heb ik het onderwerp 'salaris' gekozen. Overigens heb ik de &lt;th&gt; of table header niet meegerekend als kolom.</p>
        <table style="width:100%">
        <caption>Salarissen</caption>
            <tr>
                <th>Maand</th>
                <th colspan="4">Salaris</th>
            </tr>
            <tr>
                <td></td>
                <td>Rex</td>
                <td>Emily</td>
                <td>Marcel</td>
                <td>Julia</td>
            </tr>
            <tr>
                <td>Januari</td>
                <td>€95</td>
                <td>€110</td>
                <td>€70</td>
                <td>€45</td>
            </tr>
            <tr>
                <td>Februari</td>
                <td>€70</td>
                <td>€60</td>
                <td>€85</td>
                <td>€95</td>

            </tr>
                <tr>
                <td>Maart</td>
                <td>€145</td>
                <td>€40</td>
                <td>€60</td>
                <td>€80</td>
            </tr>
            <tr>
                <td>April</td>
                <td>€85</td>
                <td>€110</td>
                <td>€98</td>
                <td>€100</td>       
            </tr>   
        </table>
    </article>
    <aside>
        <h4>Extra opgaven</h4>
        <p>Er werd ook een extra opgave gegeven. Deze zal ik hieronder beschrijven.</p>
        <p>"Je hebt een 4 rijen, 5 kolommen tabel, met de tabel functionaliteit van HTML en geheel met CSS gemaakt. De tabel moet voorzien van een eerste speciale rij en kolom. Elke cel in de tabel moet van een rand voorzien zijn (lijnen zichtbaar)"</p>
    </aside>
    <footer>
    <p>Copyright&copy; 2014 - Eric van der Woude - Informatica Helen Parkhurst</p>
    </footer>
    </div>          
    </body>

      

and heres part of my css:

body{
    overflow:hidden;
    margin:0;padding:0;
    margin: auto;
    background-image:url('/images/background_graygoose_noise.png');
    background-repeat: repeat-y;
    background-repeat: repeat-x;
    background-color:white;
}
#menu{
    background-color: #44699C;
    height: 50px;
    border: 1px solid black;
    border-radius: 10px;
    width:90%;
}
article, section{
    margin: 1.858736%; /* 10px/538px=0.1858736*100=~1.858736 */
}
article, section{
    float: left;
    width: 63.197026%; /* 340px/538px=0.631970*100=~63.197026 */
}
aside{
    float: right;
    width: 29.638029%; /* 158/538px=0.293680*100=~29.638029 */
}
footer{
    float:left;
    width:100%;
    margin: 1.858736%; /* 10px/538px=0.1858736*100=~1.858736 */
}
#wrapper{
    background-color:white;
}

      

+3


source to share


3 answers


The problem is that you are using floats ... which means your wrapper doesn't account for those divs, so it sticks to the only thing that doesn't float. The solution is to remove the floats and find alternatives. hope this helps



+2


source


<div style="clear:both;"></div>

      



put this line before you want to change float or change line

0


source


If you inspect the element in Chrome and look at the Calculate tab next to the styles, you can see that the background repeats, that

repeat-x

      

overrides

repeat-y

      

if you need both to repeat, just put:

background-repeat: repeat;

      

0


source







All Articles