Nested DIVs
ZiGGi
Jeg har et problem som reelt er ret simpelt. Det drejer sig om anvendelse af
DIVs som containers.
Nedenstående eksempel er simpelt og beskriver problemet. Kort fortalt har
jeg en DIV som fungerer som "container". I denne findes yderligere 2 DIVs
som har indholdet. Disse floates så de står ved siden af hinanden. Der
anvendes ikke statiske størrelser.
Hver af de 2 child DIVs sætter højden i overensstemmelse med indholdet.
Problemet består i at få dem til at matche højden på den største således at
de bliver ens i hver container.
Det kunne sagtens løses med en tabel men det vil være en dårlig løsning i
forbindelse med forskellige andre designbeslutninger i projektet.
Jeg håbede i første omgang på at kunne sætte height til 100% på de 2 child
DIVs og derved opnå at de fylder parent DIV'en helt. Parent DIV'en håbede
jeg så på bare ville vokse til at matche den child DIV med størst indhold.
Desværre fungerede det ikke efter hensigten.
<html>
<head>
<title>test</title>
<style>
#container1 { width: 100%; background-color: red;
border: 1px solid; }
#test1 { width: 60%; float: left; background-color:
blue; }
#test2 { width: 40%; float: left; background-color:
green; }
</style>
</head>
<body>
<div id="container1">
<div id="test1">
test1<br />test1<br />test1<br />test1<br
/>test1<br /> test1<br />
test1<br />test1<br />test1<br />test1<br />
</div>
<div id="test2">test2</div>
</div>
</body>
</html>
Jeg håber at der er en der har en løsning som kan klares med CSS
Pft.
/Michael
ZiGGi
"ZiGGi" <ziggiman...@hotmail.com> wrote in message
news:47b451ec$0$15009$ba62...@nntp02.dk.telia.net...
Jeg glemte i øvrigt at nævne, at det lader til at container DIV'en blot
"pakker sig sammen" i toppen og reelt ikke omkranser child DIV'erne.
Bertel Lund Hansen
> Problemet består i at få dem til at matche højden på den største således at
> de bliver ens i hver container.
Det kan gøres på en anden måde med et trick i ren CSS. Du
definerer en containerdiv med meget bred venstremargin. Så har du
dine to felter inden i hvilke du kan anbringe indholdet. De er
garanteret altid lige lange.
Du kan se metoden på en af mine sider, men undlad venligst at
linke til den, og undlad at poste den samlede URL. Ikke fordi det
er vildt vigtigt, men den er ikke beregnet på offentliggørelse:
bornholm prik lundhansen prik dk
Du kan se i CSS-filen hvordan jeg har gjort. Jeg har selvfølgelig
glemt detaljerne. Det er snuppet fra en engelsk side som jeg også
har glemt.
--
Bertel
http://bertel.lundhansen.dk/ FIDUSO: http://fiduso.dk/
Bertel Lund Hansen
> Jeg glemte i øvrigt at nævne, at det lader til at container DIV'en blot
> "pakker sig sammen" i toppen og reelt ikke omkranser child DIV'erne.
Det klares ved også at floate containeren.
Birger
news:1fl8r31bgdohibpbj...@4ax.com...
er det ikke det sædvanlige clearing problem?
<br style="clear:both">
Birger
-----
http://bbsorensen.dk
http://varmeretter.dk - hverdagsmad. Sundt, nemt, hurtigt og billigt. Daglig
opdatering.
Bertel Lund Hansen
> er det ikke det sædvanlige clearing problem?
Det ville undre mig. Et clear får ikke en div til at omslutte
noget. Men vi har jo ikke set siden.
Birger
> Birger skrev:
>
>> er det ikke det sædvanlige clearing problem?
>
> Det ville undre mig. Et clear får ikke en div til at omslutte
> noget. Men vi har jo ikke set siden.
Det mener jeg nu den gør.
Ikke at det er logisk, men hvis ikke floating afsluttes med en clear kan
browseren ikke finde ud af hvornår indholdet slutter, og den div der skulle
omslutte det floatede ligger blot i toppen, og omslutter ingenting.
Jørgen Farum Jensen
> Jeg håber at der er en der har en løsning som kan klares med CSS
>
Du skulle måske lige læse denne artikel:
http://webdesign101.dk/css/floatcontainer.php
--
Med venlig hilsen
Jørgen Farum Jensen
Håndbog i webdesign: http://webdesign101.dk/wwwbog/udgave2/
Webdesign med stylesheets: http://webdesign101.dk/cssbog/
.
Bertel Lund Hansen
> Ikke at det er logisk, men hvis ikke floating afsluttes med en clear kan
> browseren ikke finde ud af hvornår indholdet slutter, og den div der skulle
> omslutte det floatede ligger blot i toppen, og omslutter ingenting.
Okay, det må jeg prøve ved lejlighed. Jeg har løst det problem
flere gange ved at floate forælderen.
Birger
> Birger skrev:
>
>> Ikke at det er logisk, men hvis ikke floating afsluttes med en clear kan
>> browseren ikke finde ud af hvornår indholdet slutter, og den div der
>> skulle
>> omslutte det floatede ligger blot i toppen, og omslutter ingenting.
>
> Okay, det må jeg prøve ved lejlighed. Jeg har løst det problem
> flere gange ved at floate forælderen.
>
Det må jeg så til gengæld prøve...
Det er ikke altid det kan lade sig gøre at floate en parent?
Hvis det nu er en "main div" som man normal vil have centreret?
Bertel Lund Hansen
> Det er ikke altid det kan lade sig gøre at floate en parent?
Det er da rigtigt, men jeg fylder som regel hele siden ud
(autojustering efter vinduet).
ZiGGi
news:47b451ec$0$15009$ba62...@nntp02.dk.telia.net...
Hejsa,
Tak for alle jeres forslag og inputs! :-)
Jeg prøver de forskellige forslag ASAP og skal nok lige poste så snart der
er nyt :-)
I alt fald: Go' weekend hele vejen rundt!
/Michael