Beste SD lid,

ik ben bezig met een klein scriptje op te zetten maar bots tegen een probleem. Ik ben nog niet zo bekend met CSS en daardoor kwam ik er echt niet uit.

Wanneer ik een margin toevoeg, is de layout niet goed meer. Doe ik dit niet, dan is het wel ok maar staan alle kolommen tegen elkaar geplakt. Het gaat om een startpagina script.

Wanneer ik bij #box een margin toevoeg, krijg ik dit:



code:

Code:

body {
    margin: auto;
    background: #005CA3 url('images/bg.jpg');
    }

#menu {
    width: 100%;
    height: 20px;
    padding-top: 5px;
    color: #959385;
    font-size: 11px;
    font-family: Verdana;
    background-color: #F1F1F1;
    border-bottom: #005DA3;
    text-align: center;
    }

#menu a, a:visited, a:after, a:before, a:active {
    padding-left: 5px;
    padding-right: 5px;
    color: #959385;
    text-decoration: none;
    }

#menu a:hover {
    color: #959385;
    text-decoration: underline;
    padding-left: 5px;
    padding-right: 5px;
    }

#box {
    width: 213px;
    background-color: white;
    float: left;
    margin: 5px;
    }

#boxtitle {
    background-image: url('images/box_silver.jpg');
    width: 213px;
    float: left;
    height: 22px;
    font-size: 12px;
    overflow: hidden;
    color: gray;
    padding-top: 10px;
    text-align: center;
    font-family: Verdana;
    }

#boxcontent {
    border: 1px black solid;
    width: 207px;
    float: left;
    border-top: none;
    overflow: hidden;
    background-color: #F5F5F5;
    font-size: 10px;
    font-family: Verdana;
    color: #737373;
    padding-left: 4px;
    padding-top: 3px;
    padding-bottom: 3px;
    }

#boxcontent a, a:after, a:before, a:visited {
    color: #737373;
    text-decoration: none;
    }

#boxcontent a:hover {
    color: #737373;
    text-decoration: underline;
    }

#content {
    width: 500px;
    height: auto;
    background-color: white;
    float: left;
    margin-left: 25px;
    margin-top: 25px;
    }

#contenttitle {
    background-image: url('images/boxcontent.jpg');
    width: 500px;
    height: 22px;
    font-size: 12px;
    color: gray;
    padding-top: 10px;
    text-align: center;
    font-family: Verdana;
    }

#contentcontent {
    border: 1px black solid;
    width: 494px;
    border-top: none;
    background-color: #F5F5F5;
    font-size: 10px;
    font-family: Verdana;
    color: #737373;
    padding-left: 4px;
    padding-top: 3px;
    padding-bottom: 3px;
    }

#contentcontent a, a:after, a:before, a:visited {
    color: #737373;
    text-decoration: none;
    }

#contentcontent a:hover {
    color: #737373;
    text-decoration: underline;
    }

Wanneer ik dan weer bij #box de margin verwijder, staat het zo:



Hoe kan ik dit nou goed laten verlopen? Dus zodat het:
Muziek 1 Muziek 2 Muziek 3 Muziek 4 Muziek 5

Muziek 6 Muziek 7

Zoiets, dus netjes onder elkaar.. Ik ben ten einde raad.

Alvast bedant!

Mvg
Thijs V.

muziek6 een "clear:both" meegeven.

Dit werkt in FF, maar niet in IE..

als je bijv een div hoogte van 100px hebt en voeg je daar een margin van 10px bij, dan word het automatisch 100 + 10 = 110px dus als je een bepaald aantal pixels margin er aan toevoegd aan een div moet je dat er afhalen

dus in jouwn geval:

Code:

#box {
    width: 213px;
    background-color: white;
    float: left;
    margin: 5px;
    }

word dus:

Code:

#box {
    width: 208px;
    background-color: white;
    float: left;
    margin: 5px;
    }