Beste Jelle,
De content past zich ook aan aan de breedte, is niet storend in ieders geval. Ik had eerst alles in een <table> staan maar hiermee kan ik niet alles netjes onder elkaar zetten en dergelijke.
Beste Marcel,
Heb de "display: block;" weggehaald maar nog steeds zet hij ze onder elkaar. Ook met alle div float:left; te zetten blijft alles onder elkaar staan.
- Hulp met 3 div's naast elkaar plaatsen, samen 100%
-
27-10-2012, 16:49 #16Particulier
- Berichten
- 77
- Lid sinds
- 12 Jaar
Re: Hulp met 3 div's naast elkaar plaatsen, samen 100%
-
27-10-2012, 16:53 #17Bob de webbouwer
- Berichten
- 1.465
- Lid sinds
- 14 Jaar
Re: Hulp met 3 div's naast elkaar plaatsen, samen 100%
display: inline al geprobeerd?
-
27-10-2012, 16:54 #18Particulier
- Berichten
- 77
- Lid sinds
- 12 Jaar
-
27-10-2012, 16:59 #19Bob de webbouwer
- Berichten
- 1.465
- Lid sinds
- 14 Jaar
Re: Hulp met 3 div's naast elkaar plaatsen, samen 100%
Dan zit je probleem waarschijnlijk in de 100%. Daarmee vertel je de #content namelijk dat hij even breed moet zijn als zijn parent element (in dit geval dus even breed als de <body>) maar dat kan niet omdat je er nog 2 divs naast wilt hebben.
Aangezien de #content dus 100% breed moet zijn (en dus even breed als de <body>) is er geen plek meer over voor de andere divs en die worden dus op een volgende regel gezet.
-
27-10-2012, 17:01 #20Particulier
- Berichten
- 77
- Lid sinds
- 12 Jaar
Re: Hulp met 3 div's naast elkaar plaatsen, samen 100%
Beste Marcel,
Hmm en er is geen andere manier om hier aan uit te komen?
Dan zit je probleem waarschijnlijk in de 100%. Daarmee vertel je de #content namelijk dat hij even breed moet zijn als zijn parent element (in dit geval dus even breed als de <body>) maar dat kan niet omdat je er nog 2 divs naast wilt hebben.
Aangezien de #content dus 100% breed moet zijn (en dus even breed als de <body>) is er geen plek meer over voor de andere divs en die worden dus op een volgende regel gezet.
-
27-10-2012, 17:03 #21Bob de webbouwer
- Berichten
- 1.465
- Lid sinds
- 14 Jaar
Re: Hulp met 3 div's naast elkaar plaatsen, samen 100%
Probeer eens de left en right div een width 5% te geven en de #content een width van 90% (even zonder margins en paddings anders is het totaal nog te breed).
Daarnaast stel je bij de left en right div ook "min-width: 160px" in.
-
27-10-2012, 17:10 #22Particulier
- Berichten
- 77
- Lid sinds
- 12 Jaar
Re: Hulp met 3 div's naast elkaar plaatsen, samen 100%
Beste Marcel,
Nu zet hij alles over elkaar heen, heel vreemd. Ik denk dat ik alles maar weer in een <table> zet. Dan lukt het wel namelijk alleen niet heel erg netjes en recht.
-
27-10-2012, 17:15 #23Bob de webbouwer
- Berichten
- 1.465
- Lid sinds
- 14 Jaar
Re: Hulp met 3 div's naast elkaar plaatsen, samen 100%
Nee dat is niet zo vreemd, ik was er al bang voor. Dat komt door die minimale breedte van 160 px. De totale breedte is nu weer breder dan de totale pagina en dan gaat hij dus dingen over elkaar zetten...
Er zal ongetwijfeld een oplossing voor zijn maar ik kan 'm je zo niet vertellen helaas.
-
27-10-2012, 17:21 #24Particulier
- Berichten
- 77
- Lid sinds
- 12 Jaar
Re: Hulp met 3 div's naast elkaar plaatsen, samen 100%
Beste Marcel,
Bedankt voor de moeite in ieders geval.
Nee dat is niet zo vreemd, ik was er al bang voor. Dat komt door die minimale breedte van 160 px. De totale breedte is nu weer breder dan de totale pagina en dan gaat hij dus dingen over elkaar zetten...
Er zal ongetwijfeld een oplossing voor zijn maar ik kan 'm je zo niet vertellen helaas.
-
27-10-2012, 17:58 #25
- Berichten
- 159
- Lid sinds
- 15 Jaar
Re: Hulp met 3 div's naast elkaar plaatsen, samen 100%
Hallo Mitch,
Dit is volgens mij niet mogelijk met css. De middelste div heeft namelijk een vaste breedte nodig. Een andere mogelijkheid is om ook bij de zijkanten met procenten te gaan werken. Je zou dan een min-width mee kunnen geven, zodat de website niet lelijk wordt als de browser van klein formaat is.
Je resultaat is wel te behalen met een beetje javascript. Zoals hier boven al gezegd; de middelste div heeft een vaste breedte nodig. Deze breedte is te berekenen.
Ik heb het even in jQuery gedaan:
PHP Code:$(document).ready(function(){
changeWidth = function(){
var windowWidth = $(window).width(); //pakt de browserbreedte
var contentWidth = windowWidth - 320; //zijkanten - de browserbreedte = width van #content_center
$('#content_center').css("width", contentWidth); //verandert de css width van #content_center
}
$(document).ready(changeWidth); //voert de berekening functie uit bij binnenkomst
$(window).resize(changeWidth); //voert berekening functie uit bij resizen van de browser
});
Breedte van de browser - 320 pixels = breedte van de middelste div.
Nadat de berekening is gemaakt, wordt de width veranderd van #content_center.
Omdat het in jQuery is, moet je nog wel even jQuery in de head zetten.
Hier nog even het geheel:
PHP Code:<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
changeWidth = function(){
var windowWidth = $(window).width(); //pakt de browserbreedte
var contentWidth = windowWidth - 320; //zijkanten - de browserbreedte = width van #content_center
$('#content_center').css("width", contentWidth); //verandert de css width van #content_center
}
$(document).ready(changeWidth); //voert functie uit bij binnenkomst
$(window).resize(changeWidth); //voert functie uit bij resizen van de browser
});
</script>
<style>
html, body{margin: 0; padding: 0;}
#content{height: 100%; width: 100%;}
#content_center{height: 100px; width: 100%; float: left; background: blue;}
#content_left{height: 100px; width: 160px;float: left; background: red;}
#content_right{height: 100px; width: 160px; float:left; background: green;}
</style>
</head>
<body>
<div id="content">
<div id="content_left">
</div>
<div id="content_center">
</div>
<div id="content_right">
</div>
</div>
</body>
</html>
Succes ermee!
Groet,
Wijnand
-
27-10-2012, 19:31 #26
- Berichten
- 63
- Lid sinds
- 13 Jaar
Re: Hulp met 3 div's naast elkaar plaatsen, samen 100%
Natuurlijk is dit mogelijk met CSS! Probeer dit eens ;)
Code:<style> #container { width: 100%; } #left, #right { width: 160px; float: left; background: #00F; } #left { margin-right: 10px; } #right { float: right; margin-left: 10px; } #center { overflow: auto; background: #F00; } </style> <html> <div id="container"> <div id="left">Kolom 1</div> <div id="right">Kolom 3</div> <div id="center">Kolom 2</div> </div> </html>
-
27-10-2012, 20:04 #27Particulier
- Berichten
- 77
- Lid sinds
- 12 Jaar
Re: Hulp met 3 div's naast elkaar plaatsen, samen 100%
Beste Wijnand,
Dit werkt inderdaad wel tot dat ik een min-width:640px; wil toevoegen en de pagina wordt kleiner gemaakt. Dan verspringen de blokken naar onder toe. Is dit nog aan te passen?
Hallo Mitch,
Dit is volgens mij niet mogelijk met css. De middelste div heeft namelijk een vaste breedte nodig. Een andere mogelijkheid is om ook bij de zijkanten met procenten te gaan werken. Je zou dan een min-width mee kunnen geven, zodat de website niet lelijk wordt als de browser van klein formaat is.
Je resultaat is wel te behalen met een beetje javascript. Zoals hier boven al gezegd; de middelste div heeft een vaste breedte nodig. Deze breedte is te berekenen.
Ik heb het even in jQuery gedaan:
PHP Code:$(document).ready(function(){
changeWidth = function(){
var windowWidth = $(window).width(); //pakt de browserbreedte
var contentWidth = windowWidth - 320; //zijkanten - de browserbreedte = width van #content_center
$('#content_center').css("width", contentWidth); //verandert de css width van #content_center
}
$(document).ready(changeWidth); //voert de berekening functie uit bij binnenkomst
$(window).resize(changeWidth); //voert berekening functie uit bij resizen van de browser
});
Breedte van de browser - 320 pixels = breedte van de middelste div.
Nadat de berekening is gemaakt, wordt de width veranderd van #content_center.
Omdat het in jQuery is, moet je nog wel even jQuery in de head zetten.
Hier nog even het geheel:
PHP Code:<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
changeWidth = function(){
var windowWidth = $(window).width(); //pakt de browserbreedte
var contentWidth = windowWidth - 320; //zijkanten - de browserbreedte = width van #content_center
$('#content_center').css("width", contentWidth); //verandert de css width van #content_center
}
$(document).ready(changeWidth); //voert functie uit bij binnenkomst
$(window).resize(changeWidth); //voert functie uit bij resizen van de browser
});
</script>
<style>
html, body{margin: 0; padding: 0;}
#content{height: 100%; width: 100%;}
#content_center{height: 100px; width: 100%; float: left; background: blue;}
#content_left{height: 100px; width: 160px;float: left; background: red;}
#content_right{height: 100px; width: 160px; float:left; background: green;}
</style>
</head>
<body>
<div id="content">
<div id="content_left">
</div>
<div id="content_center">
</div>
<div id="content_right">
</div>
</div>
</body>
</html>
Succes ermee!
Groet,
Wijnand
Ik heb dit in mijn html neer gezet maar ook dit werkt helaas niet als ik een min-width:640px; toe wil passen.
Natuurlijk is dit mogelijk met CSS! Probeer dit eens ;)
Code:<style> #container { width: 100%; } #left, #right { width: 160px; float: left; background: #00F; } #left { margin-right: 10px; } #right { float: right; margin-left: 10px; } #center { overflow: auto; background: #F00; } </style> <html> <div id="container"> <div id="left">Kolom 1</div> <div id="right">Kolom 3</div> <div id="center">Kolom 2</div> </div> </html>
Laatst aangepast door Mitchvv : 27-10-2012 om 20:19
-
27-10-2012, 20:27 #28
- Berichten
- 63
- Lid sinds
- 13 Jaar
Re: Hulp met 3 div's naast elkaar plaatsen, samen 100%
Je moet de min-width wel toepassen op de container div. Dus als je de middelste div minimaal 640px wil hebben, moet de container min-width: 980px; zijn. (Met de margins erbij natuurlijk.)
-
27-10-2012, 20:28 #29
- Berichten
- 159
- Lid sinds
- 15 Jaar
Re: Hulp met 3 div's naast elkaar plaatsen, samen 100%
Dus het is wél mogelijk met css! Weer wat geleerd (;
@Mitch,
Je zou in het voorbeeld van Stijn de #container div een min-width kunnen geven. Stel dat je website minimaal 960 px breed moet zijn is de style van de #container dus:
#container {
width: 100%;
min-width: 960px;
}
Moet je alleen nog wel even rekening houden met de margins.
Groet,
-
27-10-2012, 20:29 #30Particulier
- Berichten
- 77
- Lid sinds
- 12 Jaar
Re: Hulp met 3 div's naast elkaar plaatsen, samen 100%
Laatst aangepast door Mitchvv : 27-10-2012 om 20:35 Reden: Automatisch samengevoegd.
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