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

Crimora.nl

RPG game gebouwd met AI

(Verkoop) Criminals

Het Grote Vibe Code Topic

Ictscripters Chat

Het oorspronkelijke Criminals Script

StraatBaas is back, maar hoe?!

PWYL source gezocht

306 Nieuwe Domeinnamen Juni 2026

4-letter domein: Togi.nl

359 Nieuwe Domeinnamen Mei 2026

content variabel maken

Participate now!

Quanscient ontvangt €10M om AI- en kwantum-native hardware engineering te bevorderen - Tech.eu

Datalek bij leverancier Canvas - Universiteit van Amsterdam

Data privacy in 2026: Hoe de naleving van GDPR verandert

Functioneel ontwerp

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

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