Twee div's naast elkaar

    Beste,


    Voor de documentatie van een door mij gemaakte API moet ik twee div's in een simpele layout naast elkaar zetten.
    Div 1 bevat het menu en is standaard 180px. Div 2 bevat de content en de grootte is afhankelijk van hoeveel ruimte er in het venster nog over is (deze heeft geen width meegegeven).


    Ik gebruik momenteel bij beide div's in de CSS float: left;. Dit werkt, alleen omdat ik alle tekst achter elkaar heb getypt, is dit op lagere resoluties of wanneer je je venster minimaliseert te groot waardoor de content div onder de menu div verplaatst. Dit wil ik echter niet, ik wil dan dat de content div kleiner wordt en de tekst gewoon "ge-entert" wordt.


    Bij de tekst <br /> plaatsen is niet echt handig omdat dan bij de hogere resoluties er te weinig tekst op past, wat natuurlijk niet echt handig is plus het ziet er niet zo mooi uit. Daarnaast heb ik ook nog een <textarea> veld waarin PHP code staat die ik gewoon op de zo breed mogelijke breedte wil hebben.


    Weet iemand hoe ik dit kan oplossen?


    Alvast heel erg bedankt!

    Het probleem is, als je het venster helemaal minimaliseert, dat je dus net het menu met een stukje content overhoud, deze content eigenlijk direct overspringt naar onder het menu en dat wil ik niet.


    De max-width helpt daar volgens mij niet tegen.

    Dan moet je een zogenaamde wrapper maken ?


    PHP
    <div id="wrapper">


    Dus dit aan de begin van de layout.


    en dan <div> sluiten waar hij niet mag uitbreken of verder dan de layout komen.


    Edit:

    PHP
    #wrapper{
	margin:0px auto 0px auto;
	min-width:780px;
	max-width:1000px;
}


    Edit:



    PHP
    </div>

    vlak voor het einde van je body tags :)
    Dat moet wel werken ik hoor het resultaat nog wel Groeten peter.p


    Edit:

    Heb je een online voorbeeld? dats makkelijker voor mij om je probleem te begrijpen.


    als je zoiets hebt:


    PHP
    <div id="wrapper">
  <div id="left"></div>
  <div id="right"></div>
  <div style="clear: both;"></div>
</div>


    Als je dan left een breedte aangeeft, hoort right niet meer op gebied van left te komen. (met demo kan ik je meer helpen)

    Wat ik ervan heb begrepen:
    Je hebt een stukje text daar wil je een breedte aangeven tov beeld resolutie.


    Hoe ik het zou doen:


    Voor tekst zet je <div id="tekst"> na tekst zet je </div>


    css als volgt:

    PHP
    #tekst{
   width: 85%;
}


    Je kan ook width: auto; testen (weet niet of die wel goed werkt maar het zou wel is kunnen helpen.)

    Dit kan je oplossen door position in te stellen op absolute en het parent ervan op relative (anders krijg je problemen). Dan zou ie normaal niet meer naar beneden mogen schuiven.


    Dus zo:


    PHP
    <div class="container">
    <div class="article"><p>Dummy text</p></div>
</div>


    css:


    PHP
    .container {
    position: relative;
}
.article {
    position: absolute; /* container is de 'parent' van article */
}

Participate now!

Heb je nog geen account? Registreer je nu en word deel van onze community!

Maak een account aan Login