DIV binnen een DIV overlapt rechts

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Harry H Arends

Harry H Arends

17/08/2017 17:50:53
Quote Anchor link
Ik wil een div plaatsen binnen een eerste div, hier alleen is er rechts een overlap. Dit is de css die ik gebruik
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
    #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??
 
PHP hulp

PHP hulp

03/08/2020 11:06:54
 
- SanThe -

- SanThe -

17/08/2017 18:01:23
Quote Anchor link
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

Harry H Arends

17/08/2017 19:06:03
Quote Anchor link
Super, misschien iets voor CSS tutorial??
 
Adoptive Solution

Adoptive Solution

17/08/2017 19:39:47
Quote Anchor link
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

Harry H Arends

02/09/2017 16:18:01
Quote Anchor link
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??
 
Ramon van Dongen

Ramon van Dongen

02/09/2017 16:31:24
Quote Anchor link
Beetje met de top-margin van de <p> proberen en je komt een heel eind.

https://jsfiddle.net/bsra1295/1/
 
Jan Koehoorn

Jan Koehoorn

02/09/2017 17:21:14
Quote Anchor link
Harry H Arends op 02/09/2017 16:18:01:
Iemand een idee??


Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
 
Harry H Arends

Harry H Arends

02/09/2017 19:14:20
Quote Anchor link
Jan, bedankt. Nooit gedacht aan de transform functie
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.