[CSS] Link probleem in geneste DIV

[1st_Ro]

Goedenavond,

Vooraleerst aan de modjes: Ik kon voor de titel nix beters verzinnen. Mochten jullie een betere beschrijving vinden voor mijn probleem(pje), dan merk ik het wel

Dan nu het probleem!
Ik heb even een testcase gebouwd en die is hier te vinden (voorzien van commentaar).

Wat je ziet zijn geneste de divs:

- 1 hoofd DIV, die de breedte bepaald
- 1 container DIV die 50% breed is (worden uiteindelijk 2 kolommen, maar je ziet ze nu onder elkaar)

- in die container DIV 2 DIVs die dus naast elkaar staan.

Kleuren heb ik expres zou duidelijk gemaakt, dan zie je wat wat is

Het punt waar ik op strand is dit: de link die in de rechter DIV staat wil ik de volle breedte van die DIV geven (zoals Voorbeeld 2 laat zien)
Dus uitvullen naar rechts, terwijl de linker DIV intact blijft qua breedte.

Het gekke is dat IE het goed doet en Firefox niet ...

De link pakt dan daadwerkelijk 100% van de breedte van de parent DIV en houdt geen rekening met de linker div, alhoewel die wel zichtbaar is !

Wat doe ik hier nou fout ?

p.s. Mocht het niet duidelijk genoeg zijn, geef dan even een gil, dan probeer ik het te verduidelijken!

[crisp]

Geef je link een margin-left ?

[1st_Ro]

Dan verplaatst ie alles naar rechts (ook qua breedte) ...

En dan blijft het feit dat de rechter DIV eigenlijk niet eens naar links mag (het is buiten zijn box, toch?)

Ik probeer alles het liefst vloeiend te maken, dus zonder gebruik van pixels etc.
Ik zal eerst 's proberen die 2 DIVs gewoon los goed te krijgen (dus zonder link erin)

Edit:
Blijkt dus dat die DIVs al niet naast elkaar willen ... het probleem zat dieper dan ik dacht ...

[ Voor 15% gewijzigd door 1st_Ro op 24-08-2004 22:20 ]

[crisp]

Die ene div geef je een float: left; daarmee haal je 'm dus uit de flow. Het is dus logisch dat de link met display:block dan gewoon helemaal links komt te staan
margin-left gebruiken zou geen problemen op mogen leveren; een blocklevel-element zonder expliciete width zou gewoon alle beschikbare ruimte moeten opvullen.

[ Voor 3% gewijzigd door crisp op 24-08-2004 22:23 ]

[1st_Ro]

Ja, maar als je een block element een margin geeft, dan behoudt ie wel de breedte van zijn parent, toch ?

Vandaar dat die margin dus ook zorgt voor een verbreding aan de rechterkant ter grootte van de opgegeven margin ...

Ik zou bijna tables willen gebruiken

Ik heb ondertussen de linkerkant een float:left en een display: inline gegeven... dan zit ie toch weer in de flow? De breedte is dan de breedte van de inhoud (en voor de linker DIV is dat de bedoeling)

Ik check morgen dit draadje nog even, dan kan ik evt. op mijn werk nog even wat dingen uitproberen.

[ Voor 11% gewijzigd door 1st_Ro op 24-08-2004 22:31 ]

[crisp]

nee, zolang je geen width opgeeft wordt er niets uitgerekt. En alles wat float heeft of position: absolute zit niet in de flow.

[Sendy]

Ik kan het totaal niet volgen. Het is mij onduidelijk wat je wil en wat er dus mis is. Kan je misschien (een crop van) een screenshot plaatsen? En wellicht je testcase duidelijker maken? Ik vraag me bijvoorbeeld af welke div de container is. Ik doe dat meestal door ze borders in verschillende kleuren te geven, en niet een (donkere) achtergrond kleur gebruiken.

[1st_Ro]

@Sendy,

Okay, ik zal het proberen heel duidelijk proberen neer te zetten (misschien ook even in de startpost zetten). Even in telegram stijl:

1. 1 DIV van 600 pixels breed die de breedte van de site aangeeft (Hoofddiv in het commentaar).

2. 1 geneste DIV (container div in het commentaar in de DIV genoemd in punt 1 die 50% is. (Uiteindelijk worden dit 2 kolommen naast elkaar)

3. 2 DIVs in de DIV genoemd in punt 2, die beiden dus naast elkaar moeten staan. De linker moet de breedte van de content hebben (tekst), de rechter moet uitvullen tot de breedte van de parent DIV.

Ik hoop dat het zo wat duidelijk is !

@Crisp, ik ga hem zo even openen en dan op m'n werk (illegaal! ) kijken of ik hem werkend krijg. Eventuele vragen volgen vanzelf

Tot dusver bedankt voor je (jullie) hulp!