Twee div's naast elkaar met float lukt niet...

Status
Niet open voor verdere reacties.
J

Jessedev

Gebruiker
Lid geworden
14 mrt 2008
Berichten
44
Hallo,

Ik heb een probje met css, ik wil twee div's met vaste breedte naast elkaar hebben met een tussen ruimte van 80 px. Dit lukt met float, maar ze springen steeds naar links, dat is niet de bedoeling want de site moet werken onder verschillende resoluties, dus moet de boel gecentreerd worden.

Ik heb al meerdere treads van anderen gelezen, maar dat was telkens nét iets anders... Ook onze vrienden van google hadden geen antwoord.

Hier nog even een screenshot en de broncode:

Screenshot:
screenshotcss.png


Broncode:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Auto-Look.nl</title>
<link href="Auto-Look.nl" rel="stylesheet" type="text/css" />
</head><body bgcolor="#333333">
<div id="Banner">
</div>
<div id="Nieuws"></div>
<div id="Menu"></div>
</body>
</html>

Css code:
Code: 
#Banner {
	background-color: #666;
	margin: 40px;
	width: 780px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	height: 70px;
}

#Nieuws {
	background-color: #666;
	width: 400px;
	margin-right: auto;
	text-align: center;
	float: left;
}

#Menu {
	background-color: #666;
	width: 200px;
	margin-left: 80px;
	margin-right: 20px;
	text-align: center;
	float: left;
}
 
Zorg voor een vaste breedte, -tegen het verschuiven bij kleiner scherm of verkleinen-
genaamd container of wrapper.
Die "vangt" heel je pagina.

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Auto-Look.nl</title>
<style type="text/css" />

#Banner {
	background-color: #666;
	margin: 40px;
	width: 780px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	height: 70px;
}

#Nieuws {
	background-color: #666;
	width: 400px;
	margin-right: auto;
	text-align: center;
	float: left;
}

#Menu {
	background-color: #666;
	width: 200px;
	margin-left: 80px;
	margin-right: 20px;
	text-align: center;
	float: left;
}
#container
{
width:800px;
margin:auto;
border:2px solid #ff0000;
}

</style>
</head>
<body bgcolor="#333333">

<div id="container">
<div id="Banner">
</div>
<div id="Nieuws"></div>
<div id="Menu"></div>
</div>

</body>
</html>

Googel eens met
css container
css wrapper

en css clear
dit laatste is, of kan, nuttig zijn bij gebruik van float.

:cool:
 
Bedankt,

Maar het is juist de bedoeling dat de twee vakken níét over de hele pagina komen maar even breed worden als de balk erboven, dus ook netjes in het midden komen.

dus als je de site zou bekijken in een breedbeeld resolutie moet het geheel even breed blijven als in gewone resolutie.

EDIT:

Volgens mij begin ik het nu te snappen, dat met dat container gedoe.
 
Laatst bewerkt:
Het is gelukt door de div's "nieuws" en "menu" in de container te plaatsen, bedankt!
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan