Little DIV problem.

Hello, I made a layout with divs:
<snip>

I want to accomplish that the outer div resizes to the size of the content div. If you scroll down now, you'll notice that the wrapper div stops at 100% of the viewer port, but I want it to include the complete content div. I used absolute positioning for the top image to go under the content div and the menu.

A second question: I don't want to create each page with the menu inside. I'd like to use a "iframe-like" method, so I have the content in seperate files, and the index page as frame to hold the layout of the site and the menu. What would be the most user-friendly way to do this?

[edited by: incrediBILL at 5:00 am (utc) on Nov 17, 2011]
[edit reason] no links please [/edit]


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<base href="http://www.ktprojects.be/newtest/">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">

<title></title>

<style type="text/css">
html,body {
  height:100%;
  margin:0;
  padding:0;
  background-color:#fff;
  font-family:arial,helvetica,sans-serif;
  font-size:11pt; 
 }
#wrapper {
  width:750px;
  min-height:100%;
  margin:auto;
  background-image:url('bg.gif');
  overflow:hidden;
 }
#header {
  height:300px;
  background-image:url('header.gif');
 }
#menu {
  float:left;
  width:170px;
  padding:0;
  margin:-160px 0 0;
  list-style-type:none;
 }
#menu a,#menu a:visited {
  display: block;
  width:147px;
  padding:5px 0 0 8px;
  border-bottom:2px solid #fff;
  font-weight:bold;
  color:#fff;
  text-decoration:none;
 }
#menu a:hover, #menu a:focus{
  border-color:#005014;
 }
#content {
  float:left;
  width:510px;
  padding:20px;
  margin:-160px 15px 15px;
  background-color:#9cb8c9; 
  color:#000;
  border-radius:14px;
 }
</style>

</head>
<body>

<div id="wrapper">

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

<ul id="menu">
 <li><a href="home.htm">Home</a><li>
 <li><a href="wiezijnwe.htm">Wie zijn we?</a><li>
 <li><a href="projecten.htm">Projecten</a><li>
 <li><a href="activiteiten.htm">Activiteiten</a><li>
 <li><a href="media.htm">In de media</a><li>
 <li><a href="info.htm">Info</a><li>
 <li><a href="links.htm">Links</a><li>
 <li><a href="contact.htm">Contact</a><li>
</ul><!-- end #menu -->

<div id="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam hendrerit 
suscipit malesuada. Cras tortor ligula, vehicula nec porta a, condimentum 
sit amet nulla. Integer semper mollis elit, eu vestibulum erat accumsan et. 
Proin vestibulum est eget dui sagittis id porttitor tellus rutrum. Nam 
cursus orci eu felis lacinia porta laoreet erat faucibus. Aenean turpis 
urna, tempor et venenatis semper, varius nec odio. Etiam vel magna massa.
</p><p>
Vestibulum elementum vehicula purus, vel auctor arcu adipiscing quis. Duis 
vestibulum tellus vitae nisl volutpat egestas sit amet non dui. Nullam 
aliquet tempus elementum. Curabitur porttitor tortor nec elit mollis eget 
dapibus nulla euismod. Donec eleifend, arcu quis blandit auctor, lorem velit 
ullamcorper est, id varius magna magna at justo. Sed sodales velit ac diam 
rhoncus et commodo nulla pulvinar. Cras eu nibh vitae velit sagittis 
scelerisque. In et dolor sagittis massa imperdiet euismod. Aenean euismod, 
mauris vel iaculis lacinia, dui diam vehicula felis, nec venenatis velit 
libero in ligula. Vestibulum sed arcu massa, vel auctor nulla. Quisque 
consectetur viverra venenatis. Donec vehicula purus ut lectus tempor 
bibendum. Aliquam a est auctor eros laoreet dictum a sit amet nisl. Aliquam 
erat volutpat. Praesent venenatis nisi in mi aliquam suscipit. Mauris dictum 
enim et enim faucibus volutpat.
</p><p>
Nulla vel dolor nec diam tincidunt laoreet. Phasellus viverra, massa ac 
sollicitudin egestas, metus leo scelerisque augue, vel molestie mi arcu nec 
leo. Vivamus at ligula sed augue faucibus pellentesque. Aliquam rhoncus ligula 
vel velit ultricies lacinia non id neque. In suscipit imperdiet mi, a tempus 
nunc facilisis ut. Curabitur quis nibh in turpis cursus suscipit. Mauris tempor 
rutrum enim eu rhoncus. Integer luctus nisl ut ipsum sagittis posuere. Praesent 
accumsan consequat porta. Suspendisse magna quam, sodales ac cursus quis, 
placerat ac nisi. Fusce egestas imperdiet nunc ac sagittis. Curabitur pharetra 
purus tempus odio bibendum vitae iaculis est posuere. Donec vitae consequat sem. 
Fusce non volutpat turpis.
</p><p>
Vivamus ac ante et quam posuere elementum. Nulla facilisi. Curabitur lacinia, 
mi non aliquam blandit, augue dolor fringilla purus, sit amet ultrices augue mi 
a lacus. Vestibulum sagittis commodo venenatis. Vestibulum nec ligula eu justo 
eleifend aliquet sollicitudin ut elit. Donec quis consequat odio. Quisque tortor 
lacus, elementum et laoreet id, tincidunt fringilla orci. Morbi blandit lacus a 
ipsum ornare commodo. Praesent luctus posuere elit eu commodo. Mauris non gravida 
arcu. Integer iaculis tempus ornare. Maecenas sagittis tempus augue, ac 
ullamcorper augue suscipit ultricies. Mauris et nunc ante. Pellentesque quis 
magna eu justo sagittis molestie vel eu odio.
</p>
</div><!-- end #content -->

</div><!-- end #container -->

</body>
</html>

Little DIV problem.

TomVDJ

birdbrain

penders

TomVDJ

birdbrain

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week