Beste Webmasters,
Kan iemand mij helpen met het plaatsten van 3 div's naast elkaar waarvan de linkse en de rechtse 160px breed zijn en de middelste de rest van het scherm opvult? Tussenin zou ik ook graag 10px margin willen.
Mijn style.css ziet er als volgt uit:
Code:#content{ width:100%; height:auto; overflow:hidden; display:block; margin-top:10px; margin-bottom:10px; } #content_left{ float:left; width:160px; height:auto; margin-right:10px; } #content_center{ float:left; width:100%; height:auto; margin:0 auto; min-width:640px; } #content_right{ margin-left:10px; float:right; width:160px; height:auto; }
- Hulp met 3 div's naast elkaar plaatsen, samen 100%
-
27-10-2012, 15:30 #1Particulier
- Berichten
- 77
- Lid sinds
- 12 Jaar
Hulp met 3 div's naast elkaar plaatsen, samen 100%
-
27-10-2012, 15:33 #2
- Berichten
- 944
- Lid sinds
- 14 Jaar
Re: Hulp met 3 div's naast elkaar plaatsen, samen 100%
Allemaal float left.
-
27-10-2012, 15:43 #3Particulier
- Berichten
- 77
- Lid sinds
- 12 Jaar
-
27-10-2012, 15:44 #4
- Berichten
- 679
- Lid sinds
- 12 Jaar
-
27-10-2012, 15:45 #5Particulier
- Berichten
- 77
- Lid sinds
- 12 Jaar
Re: Hulp met 3 div's naast elkaar plaatsen, samen 100%
-
27-10-2012, 15:48 #6
- Berichten
- 679
- Lid sinds
- 12 Jaar
Re: Hulp met 3 div's naast elkaar plaatsen, samen 100%
Probeer je #content eens een PX width te geven ipv 100%. Eventueel mag je de bestanden doorsturen, kijk ik er wel even naar.
-
27-10-2012, 15:51 #7Particulier
- Berichten
- 77
- Lid sinds
- 12 Jaar
Re: Hulp met 3 div's naast elkaar plaatsen, samen 100%
Beste Bas,
Ook als ik #content een width:960px; geef zet hij ze onder elkaar.
Bestanden zien er als volgt uit:
index.php
Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link rel="stylesheet" href="style.css" type="text/css" media="screen" /> </head> <body> <div id="content"> <div id="content_left">Kolom 1</div> <div id="content_center">Kolom 2</div> <div id="content_right">Kolom 3</div> </div> </body> </html>
Code:body{ background-color:#FFFFFF; font-size:20px; } #content{ width:100%; height:auto; overflow:hidden; display:block; margin-top:10px; margin-bottom:10px; } #content_left{ float:left; width:160px; height:auto; margin-right:10px; } #content_center{ float:left; width:100%; height:auto; margin:0 auto; min-width:640px; } #content_right{ margin-left:10px; float:right; width:160px; height:auto; }
Laatst aangepast door Mitchvv : 27-10-2012 om 15:56
-
27-10-2012, 15:56 #8
- Berichten
- 679
- Lid sinds
- 12 Jaar
Re: Hulp met 3 div's naast elkaar plaatsen, samen 100%
-
27-10-2012, 16:22 #9Particulier
- Berichten
- 77
- Lid sinds
- 12 Jaar
Re: Hulp met 3 div's naast elkaar plaatsen, samen 100%
Iemand anders nog enig idee hoe ik dit voor elkaar krijg?
-
27-10-2012, 16:27 #10
- Berichten
- 280
- Lid sinds
- 12 Jaar
Re: Hulp met 3 div's naast elkaar plaatsen, samen 100%
Probeer dit eens, de css die ik nu in de header heb staan moet naar style.css verplaatst worden:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<style>
body{
background-color:#FFFFFF;
font-size:20px;
}
#content{
width:100%;
height:auto;
overflow:hidden;
display:block;
margin-top:10px;
margin-bottom:10px;
}
#content_left{
background: none repeat scroll 0 0 #555555;
float: left;
height: auto;
margin-right: 10px;
width: 25%;
}
#content_center{
background: none repeat scroll 0 0 #111111;
float: left;
height: auto;
margin: 0 auto;
min-width: 49%;
}
#content_right{
background: none repeat scroll 0 0 #555555;
float: right;
height: auto;
margin-left: 3px;
width: 25%;
}
</style>
</head>
<body>
<div id="content">
<div id="content_left">Kolom 1</div>
<div id="content_center">Kolom 2</div>
<div id="content_right">Kolom 3</div>
</div>
</body>
</html>
Ziet er in Firefox zo uit:
link
Nu enkel even de width van de content aanpassen en je hebt het.
-
27-10-2012, 16:30 #11Particulier
- Berichten
- 77
- Lid sinds
- 12 Jaar
Re: Hulp met 3 div's naast elkaar plaatsen, samen 100%
Beste Jelle,
Dit werkt inderdaad wel maar de kolom links en rechts moeten een vast breedte van 160px hebben.
Probeer dit eens, de css die ik nu in de header heb staan moet naar style.css verplaatst worden:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<style>
body{
background-color:#FFFFFF;
font-size:20px;
}
#content{
width:100%;
height:auto;
overflow:hidden;
display:block;
margin-top:10px;
margin-bottom:10px;
}
#content_left{
background: none repeat scroll 0 0 #555555;
float: left;
height: auto;
margin-right: 10px;
width: 25%;
}
#content_center{
background: none repeat scroll 0 0 #111111;
float: left;
height: auto;
margin: 0 auto;
min-width: 49%;
}
#content_right{
background: none repeat scroll 0 0 #555555;
float: right;
height: auto;
margin-left: 3px;
width: 25%;
}
</style>
</head>
<body>
<div id="content">
<div id="content_left">Kolom 1</div>
<div id="content_center">Kolom 2</div>
<div id="content_right">Kolom 3</div>
</div>
</body>
</html>
Ziet er in Firefox zo uit:
Nu enkel even de width van de content aanpassen en je hebt het.
-
27-10-2012, 16:36 #12
- Berichten
- 280
- Lid sinds
- 12 Jaar
Re: Hulp met 3 div's naast elkaar plaatsen, samen 100%
Dus de buitenste 2 moeten 160px zijn, de middelste moet de rest opvullen? Je wilt altijd full-screen dus? Als iemand een heel groot beeldscherm heeft zullen de buitenste balken niet opvallen he, hoop dat je dat snapt. Hoe groter het beeld, hoe groter de middelste balk. Hier moet je rekening mee houden met al je content.. Waarom niet een vaste breedte voor de middelste balk?
Mocht je je plan willen doorzetten: dit kan (volgens mij) niet met HTML/CSS. Javascript o.d.
-
27-10-2012, 16:38 #13Particulier
- Berichten
- 77
- Lid sinds
- 12 Jaar
-
27-10-2012, 16:40 #14
- Berichten
- 280
- Lid sinds
- 12 Jaar
-
27-10-2012, 16:44 #15Bob de webbouwer
- Berichten
- 1.465
- Lid sinds
- 13 Jaar
Re: Hulp met 3 div's naast elkaar plaatsen, samen 100%
Haal eerst eens de "display: block;" weg in je #content. Dat is waarschijnlijk de reden dat de andere divs naar een volgende regel verspringen (een block element kan immers niet inline weergegeven worden en dat wil je nu juist wel).
Als dat alleen niet werkt kun je nog eens proberen overal "float: left;" toe te voegen, maar dan dus zonder "display: block;". Je kunt ook nog proberen overal "display: inline;" aan toe te voegen.
Plaats een
- + Advertentie
- + Onderwerp
Marktplaats
Webmasterforum
- Websites algemeen
- Sitechecks
- Marketing
- Domeinen algemeen
- Waardebepaling
- CMS
- Wordpress
- Joomla
- Magento
- Google algemeen
- SEO
- Analytics
- Adsense
- Adwords
- HTML / XHTML
- CSS
- Programmeren
- PHP
- Javascript
- JQuery
- MySQL
- Ondernemen algemeen
- Belastingen
- Juridisch
- Grafisch ontwerp
- Hosting Algemeen
- Hardware Info
- Offtopic