2 divs naast elkaar.

**Chiel Oude Breuil** · 13-08-2013, 21:14

Hallo SD,

Ik krijg geen 2 DIVs meer naast elkaar.
Wat ik nu heb is dit:

Code:

#gebied{
width: 75%;
margin: 0 auto;
}


#content
{
float: left;
width: 50%;
height: 500px;
background-color: #000;
}


#sidebar
{
float: right;
width: 25%;
height: 400px;
background-color: #FFF;
}

En de HTML
Stukje van de code.

Code:

<div id="gebied"><div id="content"><div id="sidebar"></div></div></div>

Maar nu overlappen ze elkaar.

Mvg,

gast60062 · 13-08-2013, 21:30

Zet het zo maar eens neer.

<div id="gebied"><div id="content"></div><div id="sidebar"></div></div>

**Chiel Oude Breuil** · 13-08-2013, 21:35

Maar nu is het heel raar kijk maar eens: http://chielob.eu/PHP%20dingen/Layoutartikelensite/

Terwijl ik juist Gebied heb aangemaakt om het mooi te krijgen zodat het lijkt als of het in het midden is maar nu staat het 10px naar onderen en tegen de zijkant aan.

Mvg,

**Henk G.** · 13-08-2013, 21:42

Code:

#content{float: left;width: 75%;margin: 0 auto;}

Je hebt de float left weggehaald.

**Chiel Oude Breuil** · 13-08-2013, 21:47

Neehoor, die is er nog steeds.
Ik heb namelijk andere namen genomen voor de divs op de website.

Mvg,

**Henk G.** · 13-08-2013, 21:50

Je hebt nu ook je sidebar onder je content staan, is dat echt de bedoeling? Om die te verplaatsen naast je content moet je toch echt die float terug plaatsen. En vervolgens geef je gebied een width van 75% mee en de auto margin en dan staat dit ook netjes. (Ik ga er van uit dat je dat bedoelt)

**Chiel Oude Breuil** · 13-08-2013, 21:58

Ik wil een gebied van 75% creeeren en hier wil ik een 50% breede content stuk hebben en een 25% breede sidebar. Dat zou mooi passen maar nu is het anders.

Mvg

gast60062 · 13-08-2013, 22:18

Kun je even uittekenen wat je precies wilt?

**Henk G.** · 13-08-2013, 22:25

CSS:

Code:

#logo 
{
height: 65px;
width: 75%;
margin: 0 auto;
padding-top: 20px;
}




#lijn
{
height: 1px;
width: 100%;
background-color: #BDBDBD;
}


#inbetween
{
height: 25px;
}


#content
{
float: left;
width: 75%;
}


#gebied
{
margin: 0 auto;
width: 75%;
}


#artikels{float: left;width: 75%;margin: 0 auto;}


#sidebar
{
float: right;
width: 25%;
height: 400px;
background-color: #000;
}

En pas in je HTML ook even aan dat je style geladen wordt in de head tags;

Code:

<!DOCTYPE html>
<html>
<head>
<title>Website titel</title>
<link href="style.css" rel="stylesheet" type="text/css"/>




</head>
<body>




<div id="logo"><font size="6"><span style="background-color:#000;color:#ffffff;">Artikel</span>website</font></div>
<div id="lijn"></div>


<div id="inbetween"></div>


<div id="gebied"><div id="content">Content</div><div id="sidebar">Sidebar</div></div>


</body>
</html>

In de head van je pagina stop je als het waren alle informatie die niet direct zichtbaar moet zijn voor je bezoeker. Je laad hier dus de opmaak (css) en geeft bijvoorbeeld je pagina titel aan.
De body is vervolgens de pagina die je bezoeker ziet.

**Chiel Oude Breuil** · 14-08-2013, 08:36

Dan heb ik nog steeds hetzelfde resultaat.
zo wil ik het hebben:
Rood is het gebied, groen moet de artikelen DIV zijn en Blauw is de sidebar div.

Mvg,

**Robin L** · 14-08-2013, 10:13

http://jsfiddle.net/RBUhy/2/

Gebruik binnen een div altijd weer gewoon 100% percentage. Wellicht is je container/wrapper 75% (75% van je beeldscherm), maar binnen die container/wrapper heb je weer gewoon '100% te besteden'.

**Chiel Oude Breuil** · 14-08-2013, 10:15

Ja, klopt ik had het al gefixed bedankt allemaal.

Mvg,

2 divs naast elkaar.