HTML 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.
.menu{
/* Dit is de linker DIV */
border: 1px solid white;
width: 20%;
max-width: 200px;
float: left;
}
.spacer{
/* Dit is de middelste DIV */
/* Deze regelt dat deze divs niet tegen elkaar staan. */
width: 5px;
float: left;
border: 1px solid white;
}
.content{
/* Dit is de rechter DIV */
min-width: 784px;
max-width: 960px;
border: 1px solid white;
float: left;
}
.menu{ /* Dit is de linker DIV */ border: 1px solid white; width: 20%; max-width: 200px; float: left; } .spacer{ /* Dit is de middelste DIV */ /* Deze regelt dat deze divs niet tegen elkaar staan. */ width: 5px; float: left; border: 1px solid white; } .content{ /* Dit is de rechter DIV */ min-width: 784px; max-width: 960px; border: 1px solid white; float: left; }
Misschien is een voorbeeldje handig:
http://v2.themafiaclub.nl/new/
Hier de HTML:
<div class="page2">
<!-- Vanaf hier de linker DIV -->
<div class="menu">
<div class="menutop">
Blaat
</div>
<div class="menutext">
Blaat <br />
Blaat <br />
Blaat <br />
Blaat <br />
Blaat <br />
Blaat <br />
Blaat <br />
Blaat <br />
Blaat <br />
Blaat <br />
Blaat <br />
Blaat <br />
</div>
</div>
<!-- Dit is die spacer die zorgt dat de linker
en de rechter niet tegen elkaar aan staan -->
<div class="spacer"> </div>
<!-- Vanaf hier de rechter DIV, deze moet dus een
"fluid width" hebben. -->
<div class="content">
</div>
<div style="clear: both;"> </div>
</div>
<!-- Vanaf hier de linker DIV --> Blaat <!-- Dit is die spacer die zorgt dat de linker en de rechter niet tegen elkaar aan staan --> <!-- Vanaf hier de rechter DIV, deze moet dus een "fluid width" hebben. --> <div style="clear: both;"> </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!
|