2 divs laten elkaar niet met rust!

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Mohamed nvt

Mohamed nvt

13/12/2020 14:32:29
Quote Anchor link
Onlangs ben ik begonnen met een nieuwe hobbywebsite en helaas werkt CSS niet mee.
Voor de header gedeelte heb ik 1 div gemaakt en daarin heb ik nog 2 andere divs gemaakt, eentje voor logo en eentje straks voor een profiel pagina.
Het is de bedoeling dat logo div links blijft en profiel div rechts blijft, maar beide divs blijven links.
Url: http://nergiz.nl/
CSS code: http://nergiz.nl/main.css

De volgende CSS code gebruik ik:

#wrapper {
max-width:1000px;
min-width:1000px;
margin-left: auto;
margin-right: auto;
border: 1px solid;
}


#header {
position: relative;
border-bottom: 1px solid;
height: 300px;
}
#logo {
position: absolute;
border: 1px solid;
float: left;
width: 30%;
bottom: 5px;
margin: 0px;
}
#profiel {
position: absolute;
border: 1px solid;
float: right;
width: 30%;
bottom: 5px;
margin: 0px;
}
#content{
float: left
}
#footer{
clear: both;
border-top: 1px solid;

}
 
PHP hulp

PHP hulp

16/04/2021 05:03:07
 
Adoptive Solution

Adoptive Solution

13/12/2020 18:47:32
Quote Anchor link
Float werkt niet met position : absolute.
En margin ook niet.
Gebruikt left: 0px; en right: 0px;

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
#logo {
    position: absolute;
    border: 1px solid;
    width: 30%;
    left: 0px;
    bottom: 5px;
}
#profiel {
    position: absolute;
    border: 1px solid;
    width: 30%;
    right: 0px;
    bottom: 5px;
}


https://www.w3schools.com/css/css_positioning.asp
 
Ad Fundum

Ad Fundum

13/12/2020 19:59:20
Quote Anchor link
Wat in deze situatie zou kunnen helpen is CSS flexbox.
Het maakt het leven eenvoudiger bij responsive sites.

Zie: https://developer.mozilla.org/nl/docs/Web/CSS/CSS_Flexible_Box_Layout
En: https://css-tricks.com/snippets/css/a-guide-to-flexbox
 
Mohamed nvt

Mohamed nvt

13/12/2020 21:48:15
Quote Anchor link
Adoptive Solution op 13/12/2020 18:47:32:
Float werkt niet met position : absolute.
En margin ook niet.
Gebruikt left: 0px; en right: 0px;

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
#logo {
    position: absolute;
    border: 1px solid;
    width: 30%;
    left: 0px;
    bottom: 5px;
}
#profiel {
    position: absolute;
    border: 1px solid;
    width: 30%;
    right: 0px;
    bottom: 5px;
}


https://www.w3schools.com/css/css_positioning.asp


Bedankt voor je reactie, maar de oplossing was niet goed.
Omdat ik voor de header een div heb en ik wil 2 andere divs daarin hebben, gebruik ik nu andere code en het werkt precies zoals ik het wil:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?php
#header {
    position: relative;
    border-bottom: 1px solid;
    height: 200px;
}

#logo {
    position: absolute;
    border: 1px solid;
    width: 30%;
    left: 0px;
    bottom: 5px;
}

#profiel {
    position: absolute;
    border: 1px solid;
    width: 30%;
    right: 0px;
    bottom: 5px;
}

?>
 



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.