[CSS] Div positioneren mbv pixels en percentage

[Felixje]

Ik ben bezig met een site waarop ik alles met div's wil positioneren.
Laten we het even simpel houden: ik wil links een balk voor de navigatie op de site van 115 pixels. Daarnaast moet een div komen die de breedte heeft van de rest van de site.

Nu heb ik deze code gescreven:

code:

#links{
position: relative;
float:left;
clear:left;
width:115px;
height:auto;
border: 1px solid;
}

#text{
position: relative;
float: left;
left:0px;
top:0px;
width:100%;
height:auto;
border: 1px solid;
}

Het probleem is dat #text de hele tijd onder #links schiet.
Ik heb geprobeerd de breedte op auto te zetten, maar ook dan komt de div onder de div van de links.
Ik heb ook geprobeerd float weg te halen uit #text, naast de links werkt dit goed, maar wanneer de links ophouden schiet de tekst onder de links, omdat hij 100% breed is.
Ik heb geprobeerd het breedte-percentage van #text aan te passen, maar als je het venster dan gaat vergroten of verkleinen gaat het mis. Waarschijnlijk zal het iets heel lulligs zijn, maar ik zit al de hele tijd te proberen en te zoeken, maar kan de oplossing niet vinden.

Een oplossing zou misschien zijn om bij de breedte 100%-115px op te geven, maar dit ondersteunt CSS niet, is hier misschien een alternatieve schrijfwijze voor?

Ik weet dat het ook op te lossen is met tabellen, maar ik wil het juist met div's doen.

[ Voor 6% gewijzigd door Felixje op 01-02-2009 13:40 ]

[BtM909]

Wat gebeurt er als je de tweede div een marge meegeeft links (bovenop de 100% width)?

[Felixje]

BtM909 schreef op zondag 01 februari 2009 @ 13:43:
Wat gebeurt er als je de tweede div een marge meegeeft links (bovenop de 100% width)?

Dan schuift hij gewoon op onder het linkdivje.

Edit: het is gelukt, als ik die linkermarge meegeef, float left weghaal en de breedte op auto zet gaat het goed. Kan iemand misschien nog vertellen waarom het wel goed gaat als ik float left weghaal? Dit begrijp ik niet.

[ Voor 31% gewijzigd door Felixje op 01-02-2009 13:49 ]

[Da Weef]

Floating elements interpreteren een breedte van 100% altijd als de totale breedte van de parent. In dit geval zal een float met breedte 100% altijd de breedte van de viewport aannemen, als je daar elementen naast plaats valt het geheel dus altijd buiten de viewport en wordt dus gecleared.

Als je geen float en breedte meegeeft aan de div zal hij wel de beschikbare ruimte uitvullen.

Een oplossing zou misschien zijn om bij de breedte 100%-115px op te geven, maar dit ondersteunt CSS niet, is hier misschien een alternatieve schrijfwijze voor?

Dit kan eventueel met javascript maar oplossing zoals je nu hebt is robuuster/eleganter

[Kiphaas7]

Je kan hier ook nog gaan werken met negatieve margins. Dan is het wel mogelijk om 100%-115px te doen icm floats. Google maar eens op "negative margins".

[ Voor 3% gewijzigd door Kiphaas7 op 02-02-2009 12:23 ]

[Da Weef]

Kiphaas7 schreef op maandag 02 februari 2009 @ 12:22:
Je kan hier ook nog gaan werken met negatieve margins. Dan is het wel mogelijk om 100%-115px te doen icm floats. Google maar eens op "negative margins".

Volgens mij is dit niet waar, maar als je een werkende case kunt presenteren hou ik me aanbevolen. De margins hebben imo geen effect op de breedte van het element, dus ik weet niet wat je hier met negatieve margins wilt bereiken...

EDIT:
Hmmm, ik moet even uit mijn box stappen... Ik zie inderdaad dat het kan, maar dan leg je de divs over elkaar ipv naast elkaar: http://www.search-this.co...side-of-negative-margins/

[ Voor 17% gewijzigd door Da Weef op 02-02-2009 14:35 ]

[Kiphaas7]

Da Weef schreef op maandag 02 februari 2009 @ 14:32:
EDIT:
Hmmm, ik moet even uit mijn box stappen... Ik zie inderdaad dat het kan, maar dan leg je de divs over elkaar ipv naast elkaar: http://www.search-this.co...side-of-negative-margins/

Dat klopt, maar visueel maakt het geen donder uit . In de source code staan ze naast elkaar, en in de browser staan ze naast elkaar.

Mooi voorbeeld:

http://blog.html.it/layoutgala/LayoutGala24.html