[css] wrapper gebruiken om 2 "boxen" naast elkaar te zetten

[AtlonXP1800]

Omdat ik op mijn pagina wat dingen mooi wilde indelen in boxen ben ik het internet af gaan speuren voor een mooie css oplossing. Uiteindelijk een mooie oplossing gevonden waarbij je zelfs geen plaatje nodig hebt.

Deze CSS code:

Cascading Stylesheet:

.box ,
.box b.tc,
.box b.tc,
.box b.bc,
.box b.tc b.L1, .box b.tc b.L2, .box b.tc b.L3,.box b.bc b.L1, .box b.bc b.L2, .box b.bc b.L3{ font-size:0px;padding:0;display:block; }
.box b.tc b.L1,.box b.tc b.L2,.box b.bc b.L1,.box b.bc b.L2 { height:1px; line-height:1px; overflow:hidden; }
.box b.tc b.L1,.box b.bc b.L1 { margin: 0 4px; }
.box b.tc b.L2,.box b.bc b.L2 { margin: 0 2px; border-width:0 2px; border-style:solid; }
.box b.tc b.L3,.box b.bc b.L3 {margin: 0 1px; border-width:0 1px;    border-style:solid; height:2px; overflow:hidden; }
.box .content { border-left-style:solid; border-left-width:1px;    border-right-style: solid;border-right-width:1px;    margin:0; overflow:hidden; }
/* Left-side border color */.box .content { border-left-color:#aaa; border-right-color:#aaa; }
/* Top border color */.box b.tc b.L1 { background-color:#aaa; }.box b.tc b.L2,.box b.tc b.L3 { border-color:#aaa;}
/* bottom border color */.box b.bc b.L1 { background-color:#aaa; }.box b.bc b.L2,.box b.bc b.L3 { border-color:#aaa;}
/* -- Default params for where content is ---- */.box .content { background:#eee; }.box b b.L2, .box b b.L3 {background-color:#FFF;}
.box { margin:5px; width:315px; }.box .content { padding:5px;background-color:#FFF; }

icm deze HTML

HTML:

<div class="box">
            <b class="tc">
                <b class="L1"></b>
                <b class="L2"></b>
                <b class="L3"></b>
            </b>
            <div class="content">
content
            </div>
            <b class="bc">
            <b class="L3"></b>
            <b class="L2"></b>
            <b class="L1"></b>
            </b>
        </div>

levert dit op:



Nu wilde ik 2 van dit soort boxen naast elkaar zetten, daarvoor gebruik ik deze css:

code:

div.member_wrapper {
position: relative;
clear: both;
}

div.left {
width: 50%;
position: relative;
float: left;
}

div.right {
width: 50%;
position: relative;
float: right;
}

In de HTML wrap ik 2x de bovenstaande HTML in de wrapper, en dan de eerste box in "left" en de 2e in "right"

In firefox werkt dat prima, en krijg ik:


Maar in IE gaat het fout, en wordt het:


Iemand enig idee hoe dit zo te krijgen is dat het in beide browsers werkt?

[ Voor 0% gewijzigd door BtM909 op 29-11-2009 15:26 ]

[posttoast]

Niet direct een oplossing, wel een tip: lees eens iets over semantiek. Als je werkt zoals je nu doet kun je net zo goed met tabellen gaan werken (daarmee zeg ik niet dat ik dat een goed idee vind).

Dit is een goede om mee te beginnen: http://home.parse.nl/~michiel/semantiek.html

En om je ook nog een stukje op weg te helpen met je probleem: floats werken anders dan hoe jij waarschijnlijk denkt dat ze werken. Als je een object een "float: left" geeft zullen blok-elementen die daarnaast staan er tegenaan komen. Het heeft dus geen zin om een ander object "float: right" te geven.

[ Voor 35% gewijzigd door posttoast op 28-11-2009 22:53 ]

[AtlonXP1800]

posttoast schreef op zaterdag 28 november 2009 @ 22:48:
Niet direct een oplossing, wel een tip: lees eens iets over semantiek. Als je werkt zoals je nu doet kun je net zo goed met tabellen gaan werken (daarmee zeg ik niet dat ik dat een goed idee vind).

Dit is een goede om mee te beginnen: http://home.parse.nl/~michiel/semantiek.html

En om je ook nog een stukje op weg te helpen met je probleem: floats werken anders dan hoe jij waarschijnlijk denkt dat ze werken. Als je een object een "float: left" geeft zullen blok-elementen die daarnaast staan er tegenaan komen. Het heeft dus geen zin om een ander object "float: right" te geven.

Bedankt, ziet er uit als een interessant stuk, ik ga het zeker even doorlezen.

[Rwin]

Welke versie van IE? Ik denk dat door de margin op childdivs of padding op de container ergens in IE iets wordt opgeteld, wat niet zou moeten. Zet de width van div left en right eens op 40%, of om te testen even op een vaste breedte die minder is als de helft van de container.

[Tarilo]

Ik zou inderdaad eens wat over semantiek lezen.

Het probleem dat je nu hebt komt denk ik doordat de boxen te breed zijn. Onthoud dat de margins enz. buiten de breedte van je box vallen. Tel dus eens goed de breedte en alle margins op en kijk hoe breed je venster is. Maak je boxen bv. wat smaller en kijk of het dan nog steeds fout gaat.

edit: IE wil trouwens nog wel eens problemen hebben met 2 keer 50% uitrekenen. Het kan gebeuren dat je boxen een pixel breder worden dan de bedoeling is.

[ Voor 39% gewijzigd door Tarilo op 29-11-2009 15:23 . Reden: deel weg gehaald, niet goed gelezen ]

[macciez]

note: Ik heb niet de bovenstaande code doorgelezen.
IE en FF gaan beide anders om met borders en margins en dergelijke. Ik denk dus ook dat je boxen te breed zijn in IE om naast elkaar te passen. (niet helemaal zeker, maar geloof dat IE een border aan de buitenkant zet en FF aan de binnenkant)

[Cartman!]

Zorg vooral eerst voor een juist doctype, dat scheelt je al een hele berg ellende met boxmodels

[Loadichus]

Wat zijn de bevindingen als beide boxen op 40% worden gezet?