aan alle goede dingen komt een eind, webmasterplein.net 2003 - 2013
wij danken jullie voor al mooie momenten die dankzij dit forum ontstonden - Derk, Rutger en Stef

2 divs naast elkaar plaatsen

Het echte opmaakwerk, alles vragen over HTMLen, CSSen en Javascripten.

2 divs naast elkaar plaatsen

Berichtdoor Krassie » 14 sep 2010 15:23

Ik probeer twee div's (menu en content) naast elkaar te krijgen zonder dat ik de grote er wil van bepalen, zodat het op elke resolutie goed te zien is.

Dit heb ik in mijn css bestand staan:

Code: Selecteer alles
body{

      margin-left:auto;

      margin-right:auto;

      width:75%;

      background-color:#800080;

      font-color:#FFFFFF;

      font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;

   }

    div.menu{


        border:1px solid #0000ff;

         height:auto;

         width:auto;

          float:left;

          text-align:center;

         }



    div.content{

        border:1px solid #0000ff;

         height:auto;

          float:right;

          text-align:center;

         }   


Dan doe ik in mijn index het volgende:
Code: Selecteer alles
<div class="menu" align=left>

MENU

bla

bal b

la

</div>

<div class="content" align=right>

<p> blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla v
 </p>

</div>


Zolang de inhoud van de content de breedte niet overschrijd van die 75% minus de autobreedte van het menu gaat alles ok, maar bij een langere regel, gaat de content weg onder de menu wat dus niet mag...
Avatar gebruiker
Krassie
wmpr
 
Berichten: 4526
Geregistreerd: 15 dec 2003 06:28
Woonplaats: Oost-Vlaanderen - Belgiƫ

Re: 2 divs naast elkaar plaatsen

Berichtdoor Krassie » 15 sep 2010 18:15

Het blijft dus niet lukken, het lukt alleen maar als ik wel de breedte bepaal maar dat wil ik niet.

Gebruikt niemand van jullie dit principe op zijn website?
Avatar gebruiker
Krassie
wmpr
 
Berichten: 4526
Geregistreerd: 15 dec 2003 06:28
Woonplaats: Oost-Vlaanderen - Belgiƫ

Re: 2 divs naast elkaar plaatsen

Berichtdoor Stefan » 16 sep 2010 13:10

Je zult een element met Float altijd een breedte moeten geven. http://www.gigadesign.be/2007/11/14-flo ... rdigheden/

Hoogte vind ik niet altijd verplicht, dit kan je oplossen met gebruik van clear.
Opzoek naar een webdesigner? http://webtilize.net/
Avatar gebruiker
Stefan
wmpr
 
Berichten: 406
Geregistreerd: 27 dec 2007 14:08
Woonplaats: Ter Aar

Re: 2 divs naast elkaar plaatsen

Berichtdoor DoubleJ » 16 sep 2010 14:52

Nog even een puntje waar je bij moet opletten als je met fluid widths gaat werken en waar ik zelf ook een keer tegen aan ben gelopen.

Stel je hebt iets in de vorm van dit:
Code: Selecteer alles
<body><div class="1">Content</div><div class="2">Content</div></body

Dan kun je de breedte van de kolommen bijvoorbeeld instellen op 25% en 75%.
Echter wanneer je margin, padding of borders toevoegd, worden deze bij de breedte opgeteld.

Dus:
Code: Selecteer alles
div.1 { width: 75%; border: solid 1px #000; padding: 10px; margin: 10px; }

Dan heeft dit tot resultaat dat de breedte van dit onderdeel 75% + 2*1 + 2*10 + 2*10 is, oftewel je krijgt 42 extra pixels breedte. Als je dan hiernaast nog een div plaatst met breedte 25% gaat dit dus niet lukken en passen ze niet naast elkaar.

Makkelijkste oplossing die ik heb gevonden is om margins of paddings ook in procenten uit te drukken.

Wat je eventueel ook kan doen is deze fluid grids techniek toepassen van Alistapart.

Ik zelf heb met deze laatste nog niet heel veel ervaring omdat ik tot nu toe alleen fixed width layouts heb gemaakt.
De wondere wereld van het wijde web.
Avatar gebruiker
DoubleJ
wmpr
 
Berichten: 253
Geregistreerd: 20 jan 2008 20:32


Keer terug naar HTML, CSS, Javascript



cron