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.

css code - Bekijk de code zonder highlighting - Klap code in 
  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:
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  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:

css code - Bekijk de code zonder highlighting - Klap code in 
  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.44s