2 divs laten elkaar niet met rust!

Door Mohamed nvt op 13-12-2020 14:32

2.999 views

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;

}

A Adoptive Solution

13-12-2020 18:47

Float werkt niet met position : absolute.
En margin ook niet.
Gebruikt left: 0px; en right: 0px;

#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

? Onbekende gebruiker

13-12-2020 19:59

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

M Mohamed nvt

13-12-2020 21:48

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;
#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:

<?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;
}
?>

Reageren

Inloggen om te reageren