[CSS] Twee DIVs naast elkaar, zelfde hoogte én border

[r0bert]

Ik loop tegen een probleempje met het plaatsen van 2 divs naast elkaar. Heb al flink in de search lopen spitten, maar ik vind niet de oplossing die ik zoek. Het zal wel duidelijk wezen hoe ik de divjes naast elkaar wil hebben, maar voor de zekerheid:

code:

+-----+-----+
|  1  |  2  |
+-----+-----+

1 en 2 moeten naast elkaar verschijnen maar er staat niet vast welke div er het langste is. Verder moet er tussen 1 en 2 een border lopen die door moet lopen tot de onderkant van de container. Enige oplossing die ik heb kunnen vinden is een backgroundimage in de container gebruikt die de 2 kolommen/divs naast elkaar simuleerd. Maar dat lijkt me beetje overdreven voor 1 1px bordertje, dus ben op zoek naar een nettere oplossing.

[simon]

position: absolute;?

[r0bert]

Klinkt niet echt als een nette oplossing vind ik, vind jij wel? Hoe krijg ik die border er dan tussen? Want naast elkaar zetten lukt ook wel met float

[ Voor 42% gewijzigd door r0bert op 15-12-2004 19:27 ]

[Verwijderd]

Zeg Simon, hoe dacht jij dat klaar te spelen dan? Als je iets roept, roep dan goed

@TS, een achtergrond plaatje is de enige oplossing bij mijn weten, het ding hoeft echt niet heel groot te zijn (1px breed dus en geef hem wat hoogte, anders tiled ie wel erg vaak. Ik ben volgens mij ooit tegengekomen dat veel tilen de performance van een kleiner plaatje weer onderuit haalt)

[Priet]

Volgens mij is de oplossing die je zelf aangeeft (en mopher ook) de enige manier Heb er ook naar lopen zoeken, maar helaas niks gevonden.

Naar mijn mening een heel groot nadeel ten opzichte van een layout met tabellen. Als er iemand is met een mooie oplossing.... graag!

[r0bert]

2Mophor: Dus een background image met repeat-y en linkerruimte meegeven zeg jij?

En ja, denk dat daar toch wel een oplossing voor zal moeten komen in volgende CSS versies willen ze het gebruiken van tabellen terugdringen tot het eigenlijke doel

[ Voor 58% gewijzigd door r0bert op 15-12-2004 19:30 ]

[Verwijderd]

jups, je kan een de positie meegeven

Cascading Stylesheet:

background-position: 100px 0; /* of */
background-position: center top;

offtopic:
mensen, het is mophor, geen Mophor of mopher

@hieronder: maar dat was de vraag dus niet

[ Voor 22% gewijzigd door Verwijderd op 15-12-2004 19:34 ]

[Thomasje]

Verwijderd schreef op woensdag 15 december 2004 @ 19:26:
Zeg Simon, hoe dacht jij dat klaar te spelen dan? Als je iets roept, roep dan goed

@TS, een achtergrond plaatje is de enige oplossing bij mijn weten, het ding hoeft echt niet heel groot te zijn (1px breed dus en geef hem wat hoogte, anders tiled ie wel erg vaak. Ik ben volgens mij ooit tegengekomen dat veel tilen de performance van een kleiner plaatje weer onderuit haalt)

Hij roept wel iets goed. Je kan toch met position absolute de twee divjes naast elkaar zetten. De lengte is dan wel niet bepaald maar de breedte wel. De lengte rekt wel mee als er veel tekst in zit.

[r0bert]

jups, maar beetje jammer die manier want ik gebruikte juist percentuele breedtes ten opzichte van de hoofdcontainer (ivm dynamisch verbreden/versmallen) .. dus moet ik ook nog uit gaan zoeken of dat kan..

(background-position: 70% 0;)

Eigenlijk niet de oplossing die ik zoek (had ik ook in search gevonden) dus als iemand een ANDERE oplossing heeft, graag (tog bedankt hoor )

[r0bert]

Thomasje schreef op woensdag 15 december 2004 @ 19:32:
[...]


Hij roept wel iets goed. Je kan toch met position absolute de twee divjes naast elkaar zetten. De lengte is dan wel niet bepaald maar de breedte wel. De lengte rekt wel mee als er veel tekst in zit.

"en de border dan" ? (wat dus het probleem is)

_{sorry, had via een edit gekunt}

[ Voor 8% gewijzigd door r0bert op 15-12-2004 19:34 ]

[Thomasje]

r0bert schreef op woensdag 15 december 2004 @ 19:33:
jups, maar beetje jammer die manier want ik gebruikte juist percentuele breedtes ten opzichte van de hoofdcontainer (ivm dynamisch verbreden/versmallen) .. dus moet ik ook nog uit gaan zoeken of dat kan..

(background-position: 70% 0;)

Eigenlijk niet de oplossing die ik zoek (had ik ook in search gevonden) dus als iemand een ANDERE oplossing heeft, graag (tog bedankt hoor )

Heeft je hoofdcontainer wel een vaste breedte.

[Thomasje]

r0bert schreef op woensdag 15 december 2004 @ 19:34:
[...]

"en de border dan" ? (wat dus het probleem is)

_{sorry, had via een edit gekunt}

Je wilt dus een border om die div'jes heen als ik het goed begrijp.

Cascading Stylesheet:

  border-style: solid;
  border-color: black;
  border-width: 1px;

[ Voor 20% gewijzigd door Thomasje op 15-12-2004 19:37 ]

[Verwijderd]

wachten op CSS3 columns http://www.w3.org/TR/2001/WD-css3-multicol-20010118/

[chris]

Hij is al eens langs geweest, maar dit is wat je nodig hebt :0

[r0bert]

chris schreef op woensdag 15 december 2004 @ 19:36:
Hij is al eens langs geweest, maar dit is wat je nodig hebt :0

Dat is dus die oplossing van de image, die ik ook al gevonden had en noemde

_{wat ik wil is:}

code:

+---+---+
| 1 | 2 |
+---+---+
    ^
    |
rode border ertussen

en eromheen een container natuurlijk
en dat de border tot onderaan doorloopt
  zowel als div 1 het langst is
  danwel div 2

[ Voor 29% gewijzigd door r0bert op 15-12-2004 19:43 ]

[BtM909]

chris schreef op woensdag 15 december 2004 @ 19:36:
Hij is al eens langs geweest, maar dit is wat je nodig hebt :0

Gelukkig was r0bert iets eerder met die oplossing

Verwijderd schreef op woensdag 15 december 2004 @ 19:26:
@TS, een achtergrond plaatje is de enige oplossing bij mijn weten, het ding hoeft echt niet heel groot te zijn (1px breed dus en geef hem wat hoogte, anders tiled ie wel erg vaak. Ik ben volgens mij ooit tegengekomen dat veel tilen de performance van een kleiner plaatje weer onderuit haalt)

Weet niet wat de laatste versie doet, maar vorige IE versies mappen je background naar één bmp, waardoor IE dus bij wijze van spreke een bmp probeert te renderen van 10-1xx MB groot

[Thomasje]

Kan je niet een container maken met daarin twee subcontainers. De linkse geef je een border aan de rechter kant en de rechter aan de linker kant. Nu heb je een verticale lijn van boven naar onder. En dan ga je in die subcontainers gewoon verder zoals je dat wilt.

Snap je?

[r0bert]

Snap ik, maar of dat gaat werken in alle browsers wordt nog wel even proberen Jij bedoelt een overlappende border kj, 2 mogelijkheden om uit te testen, weer wat werk

[ Voor 19% gewijzigd door r0bert op 15-12-2004 19:49 ]

[Thomasje]

r0bert schreef op woensdag 15 december 2004 @ 19:48:
Snap ik, maar of dat gaat werken in alle browsers wordt nog wel even proberen Jij bedoelt een overlappende border kj, 2 mogelijkheden om uit te testen, weer wat werk

Ja, ik denk wel dat dat in elke browser werk. die sub containers maak je gewoon 100% height

Ik ga zelf ook even proberen

[ Voor 5% gewijzigd door Thomasje op 15-12-2004 19:53 ]

[r0bert]

methode 1 krijg ik nog niet aan de praat (??)

code:

<div style="    background-position: 70% 0; 
                background-image: url('./images/cntBorder.png'); 
                background-attachment: fixed; 
                background-repeat: repeat-y;
            ">
        <div style="    float: left; 
                        width: 70%; height: 100%; 
                        margin-right: -4px;
                    ">
                asdfsda<br />
                <br /><br /><br />
                asdfd sjkfksdjf<br />
                sdfjksjfkdsfj<br /> dfk
        </div>
        
        <div style="    height: 100%; 
                        clear: right;
                    ">
                sdjf k<br />
                dsfhjsd jfh sd <br />
        </div>
</div>

Laat maar, is al gefixed, code is al gefixed

Nog wel ander probleem.. hij repeat de background niet Ik snap niet wat daar fout aan kan zijn?

[ Voor 72% gewijzigd door r0bert op 15-12-2004 19:56 ]

[BtM909]

Let niet op m' n l337 HTML skills (m'n eten brandt anders aan )

HTML:

<html>
<head>
<style>
#master{
  border: 1px dotted red;
  margin: 0; padding: 0;
  float: left;
}

#a{
  border-right: 1px dotted black;
  width: 50%;
  display: inline;
  float: left;
}

#b{
  border-left: 1px dotted orange;
  width: 50%;
  display: inline;
  margin-left: -1px;
  float: left;
}
</style>
</head>
<body>
<div id="master">

  <div id="a">
    asdfsda<br />
    <br /><br /><br />
    asdfd sjkfksdjf<br />
    sdfjksjfkdsfj<br />
  </div>

  <div id="b">
    sdjf k<br />
    dsfhjsd jfh sd <br />
  </div>

</div>

</body>
</html>

Je hebt toch helemaal geen background nodig?

[r0bert]

Dat is dus wat Thomasje zei

[BtM909]

r0bert schreef op woensdag 15 december 2004 @ 20:26:
Dat is dus wat Thomasje zei

Klopt maar waarom gebruik je dan nog een background?

[r0bert]

BtM909 schreef op woensdag 15 december 2004 @ 20:31:
[...]

Klopt maar waarom gebruik je dan nog een background?

Ik weet niet of het in alle browsers werkt, dus dat moet ik eerst even uitproberen. En nu kan ik de border ook wat meer custom maken (dus schaduwen, verschillende kleuren, lijnen etc.. meer vrijheid)

Mijn eigen code is btw gefixed inmiddels door aan de container height: 100%; toe te voegen

[ Voor 12% gewijzigd door r0bert op 15-12-2004 20:38 ]

[Thomasje]

Als je met schaduwen gaat werken heb ik hier een leuke tutorial voor jouw. Ik heb hem zelf nog niet geprobeerd maar zag hem laatst en heb hem even terug opgezocht voor je.

http://www.alistapart.com/articles/onionskin/

PS: Zou ik de code eens kunnen zien die je tot nu toe hebt.

[ Voor 13% gewijzigd door Thomasje op 15-12-2004 21:27 ]

[r0bert]

Die tutorial heb ik inderdaad ook gelezen maar schaduw was maar een voorbeeldje.. ben zo wel tevreden

de css staat online op
http://www.robertdewilde.nl/_projects/Snm/

[ Voor 12% gewijzigd door r0bert op 15-12-2004 21:49 ]

[Thomasje]

r0bert schreef op woensdag 15 december 2004 @ 21:48:
Die tutorial heb ik inderdaad ook gelezen maar schaduw was maar een voorbeeldje.. ben zo wel tevreden

de css staat online op
http://www.robertdewilde.nl/_projects/Snm/

Uhm hij is niet echt vriendelijk voor firefox