login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Fluid width DIV's

Offline AgentX - 09/09/2007 18:44 (laatste wijziging 09/09/2007 18:50)
Avatar van AgentXHTML beginner Hallo luitjes, weer een width probleem.

Ik heb 2 beeldschermen waarop ik dus 2 resoluties kan testen.

Ik draai in de ene:
- 1024x748
- Mozilla FireFox 2
- Daar gaat het goed, ik heb de width precies zoals ik het wil.

Ik draai op de hoofdmonitor:
- 1280x1024
- Opera
- Daar is het precies hetzelfde als in FF.

  1. .menu{
  2. /* Dit is de linker DIV */
  3. border: 1px solid white;
  4. width: 20%;
  5. max-width: 200px;
  6. float: left;
  7. }
  8.  
  9. .spacer{
  10. /* Dit is de middelste DIV */
  11. /* Deze regelt dat deze divs niet tegen elkaar staan. */
  12. width: 5px;
  13. float: left;
  14. border: 1px solid white;
  15. }
  16.  
  17. .content{
  18. /* Dit is de rechter DIV */
  19. min-width: 784px;
  20. max-width: 960px;
  21. border: 1px solid white;
  22. float: left;
  23. }


Misschien is een voorbeeldje handig:
http://v2.themafiaclub.nl/new/

Hier de HTML:
  1. <div class="page2">
  2.  
  3. <!-- Vanaf hier de linker DIV -->
  4. <div class="menu">
  5.  
  6. <div class="menutop">
  7. Blaat
  8. </div>
  9. <div class="menutext">
  10. Blaat <br />
  11. Blaat <br />
  12. Blaat <br />
  13. Blaat <br />
  14. Blaat <br />
  15. Blaat <br />
  16. Blaat <br />
  17. Blaat <br />
  18. Blaat <br />
  19. Blaat <br />
  20. Blaat <br />
  21. Blaat <br />
  22. </div>
  23.  
  24. </div>
  25. <!-- Dit is die spacer die zorgt dat de linker
  26. en de rechter niet tegen elkaar aan staan -->
  27. <div class="spacer"> </div>
  28.  
  29. <!-- Vanaf hier de rechter DIV, deze moet dus een
  30. "fluid width" hebben. -->
  31. <div class="content">
  32. </div>
  33.  
  34. <div style="clear: both;"> </div>
  35. </div>


Hoe kan ik er voor zorgen dat de rechter div tot aan de kant loopt?
100% is te veel, want dan schiet hij onder de linker DIV, bij auto blijft hij hetzelfde, en bij * is hij niet CSS valid.

Heeft iemand een ideetje?

Alvast bedankt!

3 antwoorden

Gesponsorde links
Offline Basman - 12/09/2007 15:28
Avatar van Basman Nieuw lid Is de maximale breedte van belang?

Zo zou ie moeten werken:

  1. .content{
  2. display:block;
  3. position:relative;
  4. min-width: 784px;
  5. border: 1px solid white;
  6. }
Offline Xfader - 13/09/2007 19:18
Avatar van Xfader Lid padding/margin?
Offline AgentX - 14/09/2007 15:45 (laatste wijziging 18/09/2007 17:18)
Avatar van AgentX HTML beginner Helaas, nu gaat die contentDIV OVER de menuDIV heen..

En de spacerDIV let hij helemaal niet op
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.193s