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

Het Grote Vibe Code Topic

Ictscripters Chat

PWYL source gezocht

Help testers nodig voor android app Urgent

Partner Gezocht om meerdere NFT Collecties op Open Sea te Plaatsen

Afspraken systeem met planbeperking

Developer Gezocht

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

370 Nieuwe Domeinnamen April 2026

Snel een website nodig?

Sicarras.com - Moderne Mafia Text-Based RPG

content variabel maken

Participate now!

Datalek bij leverancier Canvas - Universiteit van Amsterdam

Data privacy in 2026: Hoe de naleving van GDPR verandert

Tech.eu - Europees Start-up, Financiering en Technologienieuws

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