[CSS] 50% div width, probleem met margin

[KM Teijgeler]

OPGELOST

Hallo,

Ik heb een probleem met 2 div's die beide 50% van de ruimte moeten innemen maar ook een marge van 3 pixels moeten hebben.
Door de marge komt de totale width boven de 100% uit en worden de 2 div's onder elkaar gezet.
Hoe los ik dit op ?

http://xvision.nl/

Het gaat om div sale_1 en sale_2.

--------------
.sale_1 {
background-color: #FFFFFF;

width: 50%;
height: 100px;
margin: 0px;
padding: 0px;

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
behavior: url(border-radius.htc);

float: left;
}


.sale_2 {
background-color: #FFFFFF;

width: 50%;
height: 100px;
margin: 0px;
padding: 0px;

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
behavior: url(border-radius.htc);

float: left;
}

[hellfighter87]

heb net ff gekeken met firefox 4.0 beta 1 en ze staan prima naast elkaar.
wat je kan proberen is bijden widths op 49% te zetten?

[KM Teijgeler]

Hey, in het voorbeeld stond de marge nog op 0, deze heb ik nu op 3px gezet zoals ik hem wil hebben.
Als je nu kijkt zie je dat ze onder elkaar staan.

Als ik de width op 49% zet dan komen ze wel naast elkaar te staan maar dan is de marge veel groter dan de totale 6 pixels (3+3) die tussen de div's in moet.

[ Voor 34% gewijzigd door KM Teijgeler op 11-07-2010 16:37 ]

[SandaX]

Voor zover ik weet kan dit niet, absoluut en procentueel door elkaar gebruiken. Als ik jou was zou ik gewoon even berekenen hoeveel pixels gelijk staat aan 50% van de ruimte en deze absoluut, dus in pixels, definieren.

[KM Teijgeler]

Het probleem is dat die 50% van de ruimte de ene keer 200px is en de andere keer weer 400px bijvoorbeeld.
Dit komt omdat de ruimte afhankelijk is van de grootte van de browser.

[Bozozo]

Het kan wel, maar je moet een beetje creatief zijn. Zet de beide divs in een container div.

Nieuwe css:

Cascading Stylesheet:

#sale_container {
    width: 100%;
    float: left;
    position: relative;
}

.sale_1 {
    background-color: #FFFFFF;
    
    height: 100px;
    position: absolute;
    left: 3px;
    right: 50%;
    
    margin: 3px 3px 3px 0;
    padding: 0px;

    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    behavior: url(border-radius.htc);
}

.sale_2 {
    background-color: #FFFFFF;
    
    height: 100px;
    position: absolute;
    right: -3px;
    left: 50%;
    
    margin: 3px 0 3px 3px;
    padding: 0px;

    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    behavior: url(border-radius.htc);
}

[ Voor 5% gewijzigd door Bozozo op 11-07-2010 17:03 ]

[KM Teijgeler]

Bozozo heel erg bedankt.

Ik had hier zelf ook al wat mee lopen testen maar ik had de positions niet goed staan.

Nu weet ik het voor de volgende keer !

Tnx.