PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact

DIV binnen een DIV overlapt rechts

Door Harry H Arends op 17-08-2017 17:50
2.752 views
Ik wil een div plaatsen binnen een eerste div, hier alleen is er rechts een overlap. Dit is de css die ik gebruik
    #event-detail {
    background-color: #FFFF00;
    border-radius: 15px;
    border: 1px solid #F5DEB3;
    height: 60%;
    width: calc(100% - 0px);
    margin-auto;
    margin-left: 10px;
    margin-right: 90px;
    }
Als ik het goed heb starten afmeting binnen een div toch weer opnieuw dus mag de breedte 100% zijn of niet??
- SanThe -
17-08-2017 18:01
Gewoon weer rekenen.
- SanThe - op 16/08/2017 14:51:41

De border is 1px en margin is 10px links en 90px rechts.
Dan kom je op: 100% - 2xborder - margin.
Dat wordt dus 100% - 2px - 10px - 90px.

width: calc(100% - 102px);

Harry H Arends
17-08-2017 19:06
Super, misschien iets voor CSS tutorial??
A
Adoptive Solution
17-08-2017 19:39
Een div heeft automatisch de breedte van de container.

Je hoeft dus geen 100% op te geven.

Als je de width weglaat krijg je het gewenste breedte op basis van de linker en rechter marge.
Harry H Arends
02-09-2017 16:18
Bovenstaande toegepast en mij iets verdiept in CSS.
Maar nu wil ik een text-block zowel verticaal als horizontaal gecentreerd hebben.
Mijn probeersel staat hier
Op het internet staan diverse z.g.n. oplossingen maar geen enkele krijg ik werkent.
Iemand een idee??
Jan Koehoorn
02-09-2017 17:21
Harry H Arends op 02/09/2017 16:18:01

Iemand een idee??



.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
Harry H Arends
02-09-2017 19:14
Jan, bedankt. Nooit gedacht aan de transform functie

Reageren

Inloggen om te reageren