content variabel maken

Luc

Beste,

Ik heb momenteel 3 divs, twee van deze divs hebben een vaste waarde (linker menu, rechter menu). Nu wil ik dat de content het resterende vak opvult. Dus afhankelijk van de browser grootte dat de content uitrekt of inkrimpt.

Dit is mij tot heden nog niet gelukt, en zal toch wel fijn zijn als het kon.

Ik heb 2 keer div float left, en een keer float right.

Hopelijk kunnen jullie mij helpen.

De menu's hebben dus altijd een vaste breedte en dan moet de content het middelste vak vullen, zonder dat hij dus die menu's in de weg zit.

Met vriendelijke groet,

Luc

Nick

content 100% maken en de rechter div in de content div doen?

of bedoel je zoiets? http://vgame.webege.com/test.php

Luc

Ja zoiets bedoelde ik. Bedankt

Nick

PHP

<html>
<head>


<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Naamloos spel</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="css/ingelogd.css" rel="stylesheet" type="text/css" media="screen" />


</head>


<body>


  <div id="header">
<h1>Header</h1>
  </div>


  <div id="container">
container
  </div>


  <div id="menu-left">
	&nbsp;&nbsp;<a href="#">link</a><br />
	&nbsp;&nbsp;<a href="#">link</a><br />
	&nbsp;&nbsp;<a href="#">link</a><br />
	&nbsp;&nbsp;<a href="#">link</a><br />
	&nbsp;&nbsp;<a href="ingelogd.php?p=uitloggen">Uitloggen</a><br />
<div class="hoofd">
&nbsp;&nbsp;Hoofd
</div>
	&nbsp;&nbsp;<a href="ingelogd.php?p=begin">Startpagina</a><br />
	&nbsp;&nbsp;<a href="ingelogd.php?p=bank">Bank</a><br />
	&nbsp;&nbsp;<a href="ingelogd.php?p=reizen">Reizen</a><br />
	&nbsp;&nbsp;<a href="#">link</a><br />
	&nbsp;&nbsp;<a href="#">link</a><br />
	&nbsp;&nbsp;<a href="#">link</a><br />
	&nbsp;&nbsp;<a href="#">link</a><br />
<div class="hoofd">
&nbsp;&nbsp;Hoofd
</div>
	&nbsp;&nbsp;<a href="#">link</a><br />
	&nbsp;&nbsp;<a href="#">link</a><br />
	&nbsp;&nbsp;<a href="#">link</a><br />
	&nbsp;&nbsp;<a href="#">link</a><br />
	&nbsp;&nbsp;<a href="#">link</a><br />
<div class="hoofd">
&nbsp;&nbsp;Hoofd
</div>
	&nbsp;&nbsp;<a href="#">link</a><br />
	&nbsp;&nbsp;<a href="#">link</a><br />
	&nbsp;&nbsp;<a href="#">link</a><br />
	&nbsp;&nbsp;<a href="#">link</a><br />
	&nbsp;&nbsp;<a href="#">link</a><br />
	&nbsp;&nbsp;<a href="#">link</a><br />
	&nbsp;&nbsp;<a href="#">link</a><br />
<div class="hoofd">
&nbsp;&nbsp;Hoofd
</div>
	&nbsp;&nbsp;<a href="#">link</a><br />
	&nbsp;&nbsp;<a href="#">link</a><br />
	&nbsp;&nbsp;<a href="#">link</a><br />
	&nbsp;&nbsp;<a href="#">link</a><br />
	&nbsp;&nbsp;<a href="#">link</a><br />
	&nbsp;&nbsp;<a href="#">link</a><br />
	&nbsp;&nbsp;<a href="#">link</a><br />
<br /><br />
  </div>


  <div id="menu-right">
	&nbsp;&nbsp;<a href="#">link</a><br />
	&nbsp;&nbsp;<a href="#">link</a><br />
	&nbsp;&nbsp;<a href="#">link</a><br />
	&nbsp;&nbsp;<a href="#">link</a><br />
	&nbsp;&nbsp;<a href="#">link</a><br />
<div class="hoofd">
&nbsp;&nbsp;Hoofd
</div>
	&nbsp;&nbsp;<a href="#">link</a><br />
	&nbsp;&nbsp;<a href="#">link</a><br />
	&nbsp;&nbsp;<a href="#">link</a><br />
	&nbsp;&nbsp;<a href="#">link</a><br />
	&nbsp;&nbsp;<a href="#">link</a><br />
	&nbsp;&nbsp;<a href="#">link</a><br />
	&nbsp;&nbsp;<a href="#">link</a><br />
<div class="hoofd">
&nbsp;&nbsp;Hoofd
</div>
	&nbsp;&nbsp;<a href="#">link</a><br />
	&nbsp;&nbsp;<a href="#">link</a><br />
	&nbsp;&nbsp;<a href="#">link</a><br />
	&nbsp;&nbsp;<a href="#">link</a><br />
	&nbsp;&nbsp;<a href="#">link</a><br />
<div class="hoofd">
&nbsp;&nbsp;Hoofd
</div>
	&nbsp;&nbsp;<a href="#">link</a><br />
	&nbsp;&nbsp;<a href="#">link</a><br />
	&nbsp;&nbsp;<a href="#">link</a><br />
	&nbsp;&nbsp;<a href="#">link</a><br />
	&nbsp;&nbsp;<a href="#">link</a><br />
	&nbsp;&nbsp;<a href="#">link</a><br />
	&nbsp;&nbsp;<a href="#">link</a><br />
<div class="hoofd">
&nbsp;&nbsp;Hoofd
</div>
	&nbsp;&nbsp;<a href="#">link</a><br />
	&nbsp;&nbsp;<a href="#">link</a><br />
	&nbsp;&nbsp;<a href="#">link</a><br />
	&nbsp;&nbsp;<a href="#">link</a><br />
	&nbsp;&nbsp;<a href="#">link</a><br />
	&nbsp;&nbsp;<a href="#">link</a><br />
	&nbsp;&nbsp;<a href="#">link</a><br />
<br /><br />
  </div>


  <div id="content">


content


  </div>
  <div id="footer">
Footer
  </div>


</body>
</html>

Toon Meer

links zou ik wel even leeghalen en in de CSS staan dingen die jij niet nodig hebt denk

PHP

body { 
font: normal 100% Arial, Helvetica, sans-serif; 
background: #696969; 
color: #5D5D5D; 
margin: 0; 
} 


#header{
height: 120px;
width: 100%;
margin: 0;
background: #1D1D1D;
}


#container{
width: 100%;
background: #8B0000;
color: #000000;
text-align: center;
}


#menu-left{
float: left;
width: 250px;
background: #333333;
}


#menu-right{
float: right;
width: 250px;
background: #333333;
}


.hoofd{
background: #8B0000;
color: #000000;
font-family: "arial"; 
font-size: 12pt;
font-weight: bold;
}


#content{
margin: 10px auto;
min-height: 450px;
width: 55%;
color: #000000;
border: 1px solid #8B0000;
}


#footer{
border: 1px solid #000;
width: 100%;
height: 30px;
position: fixed;  
bottom: 0;  
background: #1D1D1D;  
}


a {
color: #000000;
}


a:hover{
color: #1D1D1D;
}

Toon Meer

Luc

Thanks, deze werkt inderdaad

:slotje:

Alex

PHP

<div style="float: left; width: 200px;">Links</div>
<div style="float: left; width: auto; margin-left: 200px;margin-right: 200px; position: absolute;z-index: -10000;">
Midden
</div>
<div style="float: right;  width: 200px;">Rechts</div>

Succes

Edit: had topic niet herladen, mijn fout

Patrick

Closed

ICTscripters

Dé plek voor IT

Dé plek voor IT

Beta-testers gezocht voor Crypto-oefenplatform

Na 15 jaar terug van weggeweest: iCriminals.nl is terug (BETA)!

Developer Gezocht

Op zoek naar de legends

[FREE] WeFact Hosting module

Help testers nodig voor android app Urgent

Versio vervanger

Afspraken systeem met planbeperking

350 Nieuwe Domeinnamen Januari 2026

321 Nieuwe Domeinnamen December 2025

Meerdere mafia game template te koop

content variabel maken

Participate now!

Fijne feestdagen

Kritieke update voor Really Simple Security-plug-in

ING Nederland streeft naar ondersteuning van Google Pay tegen eind februari

Functioneel ontwerp

Access Control List implementatie in PHP/MySQL - deel 1/2

Access Control List implementatie in PHP/MySQL - deel 2/2

Gebruikers die dit topic bekijken