CSS: 3 DIVS naast elkaar.

**Chiel Oude Breuil** · 17-08-2013, 19:12

Vorige week kwam ik er niet uit om 2 DIVS naast elkaar te zetten.
Maar nu lukt 3 DIVS ook niet meer, ik post hieronder de codes even.
Wat ik wil is dat de divs #home #klanten en #contact in de div #menugebied komen. Maar wel dat ze uit elkaar zijn dus de DIV home moet tegen de linkerrand van #menugebied zitten, #klanten moet in het midden dus 5% van #klanten af en dan tegen de rechterkant #contact.

De codes:
index.html:

Code:

<!DOCTYPE html><!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> 
<html class="no-js"> 
<!--<![endif]-->
<style>	body {
    background-color: #FFF;
}</style>
    <head>


	<link rel="stylesheet" href="style.css" type="text/css" />
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Test pagina</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>


	<div id="logo">Text in logo</div>
	<div id="content"></div>
	<div id="inbetween"></div>
 	<div id="menugebied"><div id="home">Home</div><div id="klanten">Klanten</div><div id="contact">Contact</div></div>


    </body>
</html>

En de Style.css

Code:

#logo{
text-align: center;
width: 200px;
margin: 0 auto;
height: 50px;
background-color: #FFF;
}


#content
{
border-style:solid;
border-width:1px;
border-color:grey;
width: 900px;
margin: 0 auto;
height: 300px;
background-color: #FFF;
}


#inbetween{
height: 25px;
background-color: #FFF;
}


#menugebied{
border-style:solid;
border-width:1px;
border-color:grey;
height: 300px;
width: 900px;
margin: 0 auto;
background-color: #FFF;
}


#home{
border-style:solid;
border-width:1px;
border-color:grey;
width: 30%
float: left;
height: 300px;
}


#klanten{
border-style:solid;
border-width:1px;
border-color:grey;
width: 30%;
float: left;
height: 300px;
}


#contact{
border-style:solid;
border-width:1px;
border-color:grey;
width: 30%;
float: left;
height: 300px;
}

Het resultaat is dit: http://puu.sh/446px.png

Met vriendelijke groet,

**Marcel Melis** · 17-08-2013, 20:28

Je bent ; vergeten als afsluiting van de width bij home (staat nu dus "width: 30%" en dat moet zijn "width: 30%;")

**Chiel Oude Breuil** · 17-08-2013, 20:31

Hey bedankt, domme fout.

Maar nu staat ze naast elkaar.
Maar ik wil dat ze 5% uitelkaar staan. Want nu is er aan de rechterkant 10% vrij maar ik wil links en rechts naast de middelste 5%

Mvg,

EDIT:
Het is gelukt door #contact een float: right; mee te geven en door #klanten een float left mee te geven en een margin-left van 5%.

Bedankt,

CSS: 3 DIVS naast elkaar.