Hoogte div randen correct krijgen

[Ascathon]

Heb het hele internet al afgezocht maar niemand heeft een oplossing. Althans, niet eentje die ik aan het werk krijg.
Probleem: Ik heb een container div, die zegt maar het gehele blok voorstelt. Daarin een content blok waarin de tekst komt te staan, al dan niet dynamisch. Links en rechts van dat blok heb ik 2 divjes staan waarop ik een background zet. Deze background stelt dan de rand voor van het vak. Omdat de breedte dynamisch is kan ik geen brede background nemen met gradients aan beide zijden. Ik zit in mijn oplossing dus vast aan twee zij-divs.

Nu blijven die 2 zijkanten maar paar pixels hoog, de lengte van de rand.

Ik werkt met ASP.NET 3.5/C# dus als daarmee een geniale oplossing gemaakt kan worden is dat geweldig. Liefst niet teveel Javascript want dan worden ze hier boos. En natuurlijk een IE en Firefox oplossing want anders gaan de 20000 dagelijkse bezoekers boos worden.

HTML:

<div id="dialogContentContainer">
  <div id="dialogContentLeft"></div>
  <div id="content">HIER STAAT AL MIJN CONTENT</div>
  <div id="dialogContentRight"></div>
</div>

Cascading Stylesheet:

#dialogContentContainer
{
    height: 100%;
}
#dialogContentLeft
{                   
    width:3px;
    float:left;
    height:100%;    
    min-height:100%;
    background-image:url( "../../App_Themes/Images/Dialogs/boxborder_default_left.gif" );
    background-repeat:repeat-y;
    }
#dialogContentRight
{
    width:11px;
    float:left;
    height:100%;
    min-height:100%;    
    background-image:url( "../../App_Themes/Images/Dialogs/boxborder_default_right.gif" );
    background-repeat:repeat-y;
    background-position:top;    
}

Onderstaande afbeelding toont hoe het er nu uit ziet. Je ziet linksboven de linkerrand beginnen, maar dan ophouden omdat dan het plaatje af is. De rechterrand staat nu linksonder, waarschijnlijk opgelost zodra de linkerrand gewoon naar beneden doorgaat. Het zijn dus ook niet zomaar lijntjes, maar randen met een kleurverloop.

[OkkE]

Zet al je DIVs eens in elkaar en haal de float: weg.

Door alle elementen te nesten rekken ze automatisch mee, maakt het over het algemeen makkelijker.


Zo dus:

HTML:

<div id="dialogContentContainer">
<div id="dialogContentLeft">
<div id="dialogContentRight">
<div id="content">
HIER STAAT AL MIJN CONTENT
</div>
</div>
</div>
</div>

[ Voor 98% gewijzigd door OkkE op 07-12-2009 15:03 ]

[Ascathon]

Had ik ook al geprobeerd, maar geen succes. Ik zou ook zeggen dat dat moet kunnen. Misschien zag ik de lijnen niet doordat er andere dingen voorstaan. Ben het in ieder geval opnieuw aan het proberen.

Wel nog mn achtergrond voor "right" rechts gepositioneerd zien te krijgen.

Lijkt te werken, wie herkent het...eerst helemaal niks voor elkaar krijgen, dan na een eenvoudige hint het opgelost krijgen.

[ Voor 34% gewijzigd door Ascathon op 07-12-2009 15:14 ]

[Bosmonster]

2 divs in elkaar, eentje met een bg voor de linker rand, en eentje voor een bg voor de rechter rand.

En natuurlijk een paddinkje zodat je content niet over die randen heenloopt, maar dat lijkt me triviaal.

[Verwijderd]

Waarom een float left ipv right op je rechterkolom? En waarom heb je geen float op je content vlak?

[Ascathon]

Verwijderd schreef op maandag 07 december 2009 @ 15:16:
Waarom een float left ipv right op je rechterkolom? En waarom heb je geen float op je content vlak?

Sorry, die had ik wel. CSS stukje van dat blok vergeten erbij te zetten. Dat was dus nog het enige relevante van dat blok dat miste in de paste.

Probleem is ook dat het een stukje framework is dat er al ligt, niet iets nieuws. Dan had ik het compleet anders gedaan. Kan dus niet zomaar alles gaan vernieuwen.
Toch nu semi van scratch opnieuw begonnen met de in dit topic voorgestelde opmaak.

[disjfa]

Ascathon schreef op maandag 07 december 2009 @ 15:34:
[...]
Probleem is ook dat het een stukje framework is dat er al ligt, niet iets nieuws. Dan had ik het compleet anders gedaan. Kan dus niet zomaar alles gaan vernieuwen.
Toch nu semi van scratch opnieuw begonnen met de in dit topic voorgestelde opmaak.

Opmaak en inhoud zijn totaal verschillenden zaken natuurlijk. Als je dan semi nieuwe dingen maakt is het niet veel ingewikkelder om het gewoon netjes in te tikken. Als je het dan toch al aan het aanpassen bent

Half iets aanpassen en dan hopen dat het gaat werken heeft natuurlijk niemand wat aan.

[Ascathon]

Nu nog de lege ruimte tussen de header en de content weg zien te krijgen. Een ruimte die ik in Firefox niet heb. Maarja, als 75% IE7 of lager gebruikt moet ik wel.

[MueR]

Dat lijkt mij gewoon een margin of whitespace probleem, waar IE wel moeilijk over doet, maar dat is wat lastig te zeggen met dit soort ehm.. geobfusceerde code

[Ascathon]

Opgelost, stond nog een stiekem nog een non-breaking space. Opvulling voor een ooit lege div. Foei Ascathon.

Dank

[ Voor 3% gewijzigd door Ascathon op 08-12-2009 08:06 ]

[NiteSpeed]

Ascathon schreef op dinsdag 08 december 2009 @ 08:02:
Opgelost, stond nog een stiekem nog een non-breaking space. Opvulling voor een ooit lege div. Foei Ascathon.

Dank

http://www.quirksmode.org/css/clearing.html Voor in de toekomst

[Ascathon]

Clearing was mijn hele issue niet. Ik zal eigenlijk puur met het stretchen van lege divjes. Maar door het opnieuw opbouwen van de door iemand anders gemaakte container is het opgelost.

Die NBSP had er ook niets mee te maken, die was omdat het mijn ervaring is dat sommige browsers lege divjes niet zo leuk vinden. Dan maar een spatie er in.

Of doel je nog ergens anders op dat niet tot me doordringt