[CSS][960GS] DIV rekt niet mee uit

[Tusk]

Jaren geleden maakt ik wel eens een websiteje. Maar dat was nog uit het <table> tijdperk. Nu heb ik me onlangs voorbijgeluld en beloofd dat ik wel ff een website voor het hotel van mn oom zou fixxen. Uiteraard wil ik het nu netjes en meteen goed doen dus ben begonnen om met het grid960 systeem een site te bouwen.

HTML:

 <div id="featured" class="container_12">
        <div id="reserveren" class="grid_5">
            <h2><strong>Boek</strong> een kamer</h2>
            <p>datum<br>tijd<br>Personen<br>etc<br>etc</p>
            <center><button>Reserveer</button></center>
            <hr class="clearr">
        </div>
        <div id="welkom" class="grid_7">
            <h1><strong>WELKOM</strong> op deze site</h1>
            <img src="#" align="left">
        <p>inleiding
        </p>
        <p>
            main tekst.
        </p>
            
    </div>
</div>

Cascading Stylesheet:

#featured{ 
background-color: yellow;
}
#reserveren{
    background-color: #575046; 
    background-image:url(../img/glans1.png);
    background-repeat:repeat-x; 
    margin:0; width:400px; 
    height:100%;
    -webkit-border-bottom-left-radius: 20px;
    -webkit-border-top-left-radius: 20px;
    -moz-border-radius-bottomleft: 20px;
    -moz-border-radius-topleft: 20px;
    border-bottom-left-radius: 20px;
    border-top-left-radius: 20px;
}
#reserveren p {margin: 10px; text-align:center; }   
.clearr { border:0px; clear:both; overflow:hidden;}
#welkom{
    background-color:#463f33;
    background-image:url(../img/glans1.png);
    background-repeat:repeat-x; 
    margin:0; 
    width: 560px; 
    -webkit-border-bottom-right-radius: 20px;
    -webkit-border-top-right-radius: 20px;
    -moz-border-radius-bottomright: 20px;
    -moz-border-radius-topright: 20px;
    border-bottom-right-radius: 20px;
    border-top-right-radius: 20px;
}
#welkom p {margin: 10px;}

Dit geeft mij:


Heb het even geel gemaakt om de zaak te verduidelijken.
Ik wil dus dat de hoogte van de linker kolom gelijk blijft aan die van de rechter, ook als er meer tekst in kom.
Ik loop er nou al een paar dagen mee te klooien en google me suf, maar ik kom er niet aan uit.
(let niet op t plaatje is ff voor het idee)
Er zijn nog wel wat meer probleempjes waar ik tegenaan loop met de margin icm de backgrounds maar dat heb ik met workarounds al verholpen.

[Bosmonster]

faux columns

[Tusk]

ik hoopte even dat het zo makkelijk zou zijn.

deze site gevonden: http://pepijnkoning.nl/valse-kolommen-in-css-faux-columns/

Cascading Stylesheet:

#featured{ 
  width: 960px;
  background: #fff url(../img/fauxcolumns.png);
  overflow: hidden;
}

maar dat helpt niet. Hetgene wat hier geel is wordt dan gevult met het achtergrondplaatje en dan is de linker kolom (#reserveren) nog steeds even hoog (te kort dus) als in het plaatje hierboven.

[Cartman!]

Het idee is dus dat het niet uitmaakt dat die kolom niet daadwerkelijk zo hoog wordt als die andere maar dat dit zo lijkt

[Tusk]

hah ok heb de #feature nu rounded borders gegeven en ze bij de 2 kolommen weggehaald.

wel raar dat je de container heel lichtjes achter de kolommen doorziet:


(fauxcolums.jpg is rood btw )

[Herko_ter_Horst]

Dat ligt aan de rendering/aliassing die je browser op die rounded corners loslaat. Niet rood maken, maar bruin dus

[RobIII]

^Dat. En sowieso geen jpg gebruiken maar png of desnoods gif voor afbeeldingen die geen foto's zijn. Al is het maar omdat je nooit 100% zeker bent van een exacte match van de kleuren die je in je CSS instelt met de JPG vanwege (enigszins) mogelijk kleurverschil door JPG compressie. (Voor de nuances van deze post lees je hier maar even verder of verdiep je je even in JPEG, Gif, PNG). Diezelfde foute keuze voor bestandsformaat zie ik namelijk ook in de bel in je afbeelding.

[ Voor 96% gewijzigd door RobIII op 04-05-2011 21:17 ]

[nerz101]

Misschien even een stomme vraag, maar zijn dit soort problemen niet ook op te lossen met min-height: ...; ?
Of is dit bad-practice?
Verkeerd gelezen, moet ook dynamisch meerekken.

[ Voor 21% gewijzigd door nerz101 op 05-05-2011 09:08 ]

[Flowmo]

Tusk schreef op woensdag 04 mei 2011 @ 18:40:
hah ok heb de #feature nu rounded borders gegeven en ze bij de 2 kolommen weggehaald.

wel raar dat je de container heel lichtjes achter de kolommen doorziet:
[afbeelding]

(fauxcolums.jpg is rood btw )

Daarvoor heeft webkit een kleine fix:

Cascading Stylesheet:

-webkit-background-clip: padding-box;