Nieuw lid |
|
Beste,
Ik maak de laatste tijd veel vaker layouts, en telkens kom ik weer bij het zelfde probleem.
Mijn layout bestaat uit vakjes. nu heb ik dus in de eerste kollom een vakje, en in de tweede. Ik scheid de kolommen gewoon via float: left;
Maar, nu gaat het vakje uit de 2e kolom over de hele pagina, dus onder het vakje in de eerste kolom door.
Mijn CSS:
body
{
background: url('images/bg.gif') repeat-x;
background-attachment: fixed;
font-family: Verdana;
font-size: 11px;
}
#container_radio
{
background: #DCDCDC;
border-bottom: 1px solid #000000;
position: fixed;
width: 100%;
height: 30px;
top: -0px;
margin-left: -8px;
margin-right: -10px;
margin-bottom: 30px;
padding-top: 5px;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 5px;
}
#container_header
{
background: url('images/banner.png') no-repeat #dcdcdc;
border-top: 1px solid #C6C6C6;
border-left: 1px solid #C6C6C6;
border-right: 1px solid #C6C6C6;
border-bottom: 2px solid #C6C6C6;
width: 965px;
height: 90px;
margin-top: 57px;
margin-left: auto;
margin-right: auto;
padding-top: 5px;
padding-left: 5px;
padding-bottom: 5px;
}
#container
{
background: #ffffff;
border-top: 1px solid #C6C6C6;
border-left: 1px solid #C6C6C6;
border-right: 1px solid #C6C6C6;
border-bottom: 2px solid #C6C6C6;
width: 965px;
margin-top: 15px;
margin-left: auto;
margin-right: auto;
padding-top: 5px;
padding-left: 5px;
padding-bottom: 5px;
}
#container_menu
{
width: 275px;
padding: 5px;
float: left;
}
#container_content
{
width: auto;
padding: 5px;
}
#footer
{
clear: both;
}
.vakje
{
background: #ffffff;
border: 1px solid #000000;
padding: 5px;
margin-bottom: 10px;
margin-right: 10px;
}
.blauw
{
background: #3EADE8;
padding: 2px;
color: white;
margin-bottom: 5px;
}
body { background: url('images/bg.gif') repeat-x; background-attachment: fixed; font-family: Verdana; font-size: 11px; } #container_radio { background: #DCDCDC; border-bottom: 1px solid #000000; position: fixed; width: 100%; height: 30px; top: -0px; margin-left: -8px; margin-right: -10px; margin-bottom: 30px; padding-top: 5px; padding-left: 5px; padding-right: 5px; padding-bottom: 5px; } #container_header { background: url('images/banner.png') no-repeat #dcdcdc; border-top: 1px solid #C6C6C6; border-left: 1px solid #C6C6C6; border-right: 1px solid #C6C6C6; border-bottom: 2px solid #C6C6C6; width: 965px; height: 90px; margin-top: 57px; margin-left: auto; margin-right: auto; padding-top: 5px; padding-left: 5px; padding-bottom: 5px; } #container { background: #ffffff; border-top: 1px solid #C6C6C6; border-left: 1px solid #C6C6C6; border-right: 1px solid #C6C6C6; border-bottom: 2px solid #C6C6C6; width: 965px; margin-top: 15px; margin-left: auto; margin-right: auto; padding-top: 5px; padding-left: 5px; padding-bottom: 5px; } #container_menu { width: 275px; padding: 5px; float: left; } #container_content { width: auto; padding: 5px; } #footer { clear: both; } .vakje { background: #ffffff; border: 1px solid #000000; padding: 5px; margin-bottom: 10px; margin-right: 10px; } .blauw { background: #3EADE8; padding: 2px; color: white; margin-bottom: 5px; }
HTML:
<link rel='stylesheet' type='text/css' href='style.css'/>
<link rel='stylesheet' type='text/css' href='vakjes.css'/>
</head>
<body>
<div id="container_radio">
Hierzo radio speler een DJ Says etc.
</div>
<div id="container_header">
</div>
<div id="container">
<div id="container_menu">
<div class="vakje">
<div class="blauw">
Test?
</div>
Jahaaa!
</div>
</div>
<div id="container_content">
<div class="vakje">
<div class="blauw">
Test?
</div>
Jahaaa!
</div>
</div>
<link rel='stylesheet' type='text/css' href='style.css'/> <link rel='stylesheet' type='text/css' href='vakjes.css'/> <div id="container_radio"> Hierzo radio speler een DJ Says etc. <div id="container_header"> <div id="container_menu"> Test? Jahaaa! <div id="container_content"> Test? Jahaaa!
Alvast bedankt
|