Welcome to WebmasterWorld Guest from

Forum Moderators: incrediBILL

Message Too Old, No Replies

Little DIV problem.

8:38 am on Nov 16, 2011 (gmt 0)

New User

joined:May 11, 2011
posts: 6
votes: 0

Hello, I made a layout with divs:

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]

5:14 pm on Nov 16, 2011 (gmt 0)

Senior Member from GB 

WebmasterWorld Senior Member 10+ Year Member

joined:Oct 2, 2003
posts: 948
votes: 4

Hi there TomVDJ,

your page has quite a few coding errors...

...so recoding it seemed appropriate. :)

<html lang="en">
<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">


<style type="text/css">
html,body {
#wrapper {
#header {
#menu {
margin:-160px 0 0;
#menu a,#menu a:visited {
display: block;
padding:5px 0 0 8px;
border-bottom:2px solid #fff;
#menu a:hover, #menu a:focus{
#content {
margin:-160px 15px 15px;


<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">
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.
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.
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.
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.
</div><!-- end #content -->

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


Personally, I would suggest that you did not use the iframe element for this project.

7:40 pm on Nov 16, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member penders is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:July 3, 2006
posts: 3123
votes: 0

Regarding your second question... if you are not using PHP (ie. PHP includes) then maybe Server Side Includes [webmasterworld.com] are more appropriate. As birdbrain suggests, I would avoid iframe elements for this.
8:13 pm on Nov 16, 2011 (gmt 0)

New User

joined:May 11, 2011
posts: 6
votes: 0

birdbrain, thanks a lot for the help! This is indeed what I was looking for. I'm not font of the iframe element either. I'll take a look at the server side includes penders is pointing to. Anyway, thanks for the help to both of you.
8:32 pm on Nov 16, 2011 (gmt 0)

Senior Member from GB 

WebmasterWorld Senior Member 10+ Year Member

joined:Oct 2, 2003
posts: 948
votes: 4

No problem, you're very welcome. ;)

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members