2 divs laten elkaar niet met rust!
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;
}
En margin ook niet.
Gebruikt left: 0px; en right: 0px;
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
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;
}
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
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
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;
https://www.w3schools.com/css/css_positioning.asp
En margin ook niet.
Gebruikt left: 0px; en right: 0px;
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
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;
}
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)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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;
}
?>
#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;
}
?>