Overflow of wrapper and div - html

Being a newbie i'm struggling with the CSS of a site.
I've made an site with a couple of DIV's and wrappers but i can't get the overflow of the inner DIV to stretch the outer DIV (wrapper). I've seen http://www.sitepoint.com/examples/clearing_floats/example2.php but i'm not able to see my mistake.
Thanks in advance!
body {
text-align: center;
background: url(http://www.keenfuel.nl/v2/wb/templates/keenfuel/images/background.jpg)
}
#wrapper {
text-align: left;
width: 1250px;
padding: 0px;
margin: 0 auto;
height: 100%;
overflow:auto;
}
#logo {
position: absolute;
top: 50px;
right: 10px;
}
#header {
text-align:left;
width: 100%;
height: 155px;
position: relative;
background: url(http://www.keenfuel.nl/v2/wb/templates/keenfuel/images/body2_bg.fw_r1_c2.jpg);
padding-left: 4px;
z-index:9;
}
#menu {
text-align: left;
position: absolute;
bottom: 6px;
padding-left: 4px;
}
#headerimage {
text-align: left;
width: 100%;
height: 268px;
background: url(http://www.keenfuel.nl/v2/wb/templates/keenfuel/images/keenfuel_r2_c2.jpg);
}
#mainwrapper {
text-align:left;
width: 100%;
height: 488px;
background: url(http://www.keenfuel.nl/v2/wb/templates/keenfuel/images/body2_bg.fw_r 3_c2.jpg);
background-repeat: no-repeat;
}
#maincontent{
width: 800px;
height: 488px;
float: left;
padding-left: 15px;
font-family:Verdana, Geneva, sans-serif;
color: #000000;
}
#newscontent{
width: 360px;
heigth: 200px;
float: right;
margin-top: 20px;
background: url(http://www.keenfuel.nl/v2/wb/templates/keenfuel/images/news_background.fw.png);
overflow:hidden;
color: #000000;
padding-left: 15px;
font-family: Verdana, Geneva, sans-serif;
font-size: 11px;
}
#footer {
height: 56px;
background: url(http://www.keenfuel.nl/v2/wb/templates/keenfuel/images/body2_bg.fw_r6_c2.jpg);
text-align: center;
font-family: Verdana, Geneva, sans-serif;
clear:both;
}
<div id="wrapper">
<div id=header><div id="logo"></div>
<div id="menu">
<?php show_menu2(0, SM2_ROOT, SM2_START, SM2_ALL, '<font color="#FFFFFF"> | [ac][menu_title]</a>', '', '', '', '[ac][menu_title]</a></font>'); ?>
</div>
</div>
<div id="headerimage"></div>
<div id="mainwrapper">
<div id="maincontent"><?php page_content(1); ?><br style="clear:both"/></div>
<div id="newscontent">
<?php
// customized cwsoft-anynews function call
$config = array(
'group_id_type' => 'section_id',
'display_mode' => 4,
'max_news_length' => 20,
);
echo getNewsItems($config);
?>
<br style="clear:both"/>
</div>
</div>
<div id="footer"><br /></div>


if you strictly follow the link you gave, your newscontent div must become part of the main content div and also your main content must have width=100%. Like this:
<html>
<head>
<style>
body {
text-align: center;
background: url (http://www.keenfuel.nl/v2/wb/templates/keenfuel/images/background.jpg)
}
#wrapper {
text-align: left;
width: 1250px;
padding: 0px;
margin: 0 auto;
height: 100%;
overflow:auto;
}
#logo{
position: absolute;
top: 50px;
right: 10px;
}
#header {
text-align:left;
width: 100%;
height: 155px;
position: relative;
background: url(http://www.keenfuel.nl/v2/wb/templates/keenfuel/images/body2_bg.fw_r1_c2.jpg);
padding-left: 4px;
z-index:9;
}
#menu{
text-align: left;
position: absolute;
bottom: 6px;
padding-left: 4px;
}
#headerimage{
text-align: left;
width: 100%;
height: 268px;
background: url(http://www.keenfuel.nl/v2/wb/templates/keenfuel/images/keenfuel_r2_c2.jpg);
}
#mainwrapper{
text-align:left;
width: 100%;
height: 488px;
background:url(http://www.keenfuel.nl/v2/wb/templates/keenfuel/images/body2_bg.fw_r 3_c2.jpg);
background-repeat: no-repeat;
}
#maincontent{
width: 100%;
height: 488px;
float: left;
padding-left: 15px;
font-family:Verdana, Geneva, sans-serif;
color: #000000;
}
#newscontent{
width: 360px;
heigth: 200px;
float: right;
margin-top: 20px;
background: url(http://www.keenfuel.nl/v2/wb/templates/keenfuel/images/news_background.fw.png);
overflow:hidden;
color: #000000;
padding-left: 15px;
font-family: Verdana, Geneva, sans-serif;
font-size: 11px;
}
#footer{
height: 56px;
background: url(http://www.keenfuel.nl/v2/wb/templates/keenfuel/images/body2_bg.fw_r6_c2.jpg);
text-align: center;
font-family: Verdana, Geneva, sans-serif;
clear:both;
}
</style>
</head>
<body>
<div id="wrapper">
<div id=header> <div id="logo"> </div>
<div id="menu"> <?php show_menu2(0, SM2_ROOT, SM2_START, SM2_ALL, '<font color="#FFFFFF"> | [ac][menu_title]</a>', '', '', '', '[ac][menu_title]</a></font>'); ?> </div> </div>
<div id="headerimage"></div>
<div id="mainwrapper">
<div id="maincontent"><?php page_content(1); ?> <br style="clear:both"/>
<div id="newscontent">
<?php
// customized cwsoft-anynews function call
$config = array(
'group_id_type' => 'section_id',
'display_mode' => 4,
'max_news_length' => 20,
);
echo getNewsItems($config);
?>
<br style="clear:both"/>
</div>
</div>
</div>
<div id="footer"><br />
</div>
</body>
</html>
However if your newscontent div must become part of the main content div are meant to become a sort of table like view and your newscontent should fill up free space at the end - this could be achieved that way:
<html>
<head>
<style>
body {
text-align: center;
background: url (http://www.keenfuel.nl/v2/wb/templates/keenfuel/images/background.jpg);
}
#wrapper {
text-align: left;
width: 1250px;
padding: 0px;
margin: 0 auto;
height: 100%;
overflow-x:hidden;
}
#logo{
position: absolute;
top: 50px;
right: 10px;
}
#header {
text-align:left;
width: 100%;
height: 155px;
position: relative;
background: url(http://www.keenfuel.nl/v2/wb/templates/keenfuel/images/body2_bg.fw_r1_c2.jpg);
padding-left: 4px;
z-index:9;
}
#menu{
text-align: left;
position: absolute;
bottom: 6px;
padding-left: 4px;
}
#headerimage{
text-align: left;
width: 100%;
height: 268px;
background: url(http://www.keenfuel.nl/v2/wb/templates/keenfuel/images/keenfuel_r2_c2.jpg);
}
#mainwrapper{
text-align:left;
width: 100%;
height: 488px;
background:url(http://www.keenfuel.nl/v2/wb/templates/keenfuel/images/body2_bg.fw_r 3_c2.jpg);
background-repeat: no-repeat;
position:relative;
}
#maincontent{
width: 800px;
height: 488px;
display:inline-block;
padding-left: 15px;
font-family:Verdana, Geneva, sans-serif;
color: #000000;
overflow-x:hidden;
}
#newscontent{
left:800px;
heigth: 200px;
right:1px;
display:inline-block;
margin-top: 20px;
color: #000000;
padding-left: 15px;
font-family: Verdana, Geneva, sans-serif;
font-size: 11px;
background-color:#770000;
overflow-x:hidden;
}
#footer{
height: 56px;
background: url(http://www.keenfuel.nl/v2/wb/templates/keenfuel/images/body2_bg.fw_r6_c2.jpg);
text-align: center;
font-family: Verdana, Geneva, sans-serif;
clear:both;
}
</style>
</head>
<body>
<div id="wrapper">
<div id=header> <div id="logo"> </div>
<div id="menu"> <?php show_menu2(0, SM2_ROOT, SM2_START, SM2_ALL, '<font color="#FFFFFF"> | [ac][menu_title]</a>', '', '', '', '[ac][menu_title]</a></font>'); ?> </div> </div>
<div id="headerimage"></div>
<div id="mainwrapper">
<div id="maincontent"><?php page_content(1); ?> <br style="clear:both"/> </div>
<div id="newscontent">
<?php
// customized cwsoft-anynews function call
$config = array(
'group_id_type' => 'section_id',
'display_mode' => 4,
'max_news_length' => 20,
);
echo getNewsItems($config);
?>
<br style="clear:both"/>
</div>
</div>
<div id="footer"><br />
</div>
</body>
</html>

Related

White area at the bottom of my webpage when i try to create a responsive design

I'm trying to make my webpage responsive to fit on an ipad and mobile, as i adjust my media query, i noticed this white area at the bottom, the body element when highlighted, it doesnt reach that area, so i dont know where it came from, anyhelp would be appreaciated. thanksenter image description here
enter image description here
body{
font-family: Verdana, Geneva, Tahoma, sans-serif;
max-width: 100%;
}
.content {
max-width: 100%;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
}
div.logo {
width: 100%;
height: 200px;
background-color: rgb(147, 235, 238);
}
div.navi {
background-color: rgb(228, 226, 217);
width: 100%;
height: 50px;
margin-top: 15px;
text-align: center;
font-size: 19px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
padding-top: 1px;
margin-bottom: 1px;
}
p {
color: rgb(97, 87, 226);
}
.para2{
color: black;
}
p.nav {
position: relative;
bottom: 5px;
border-style: solid;
}
a:link {
text-decoration: none;
color: rgb(97, 87, 226);
}
img {
margin-left: 20px;
width: 400px;
}
/* inner body styling */
div.inner-body {
background-image: url(image/book2.png);
margin-bottom: 20px;
margin-right: 0px;
max-width: 100%;
border-style: solid;
margin-top: 20px;
height: 1200px;
position: relative;
}
.header {
width: 700px;
position: relative;
left:1000px;
left: 338px;
font-size: 30px;
}
.para {
width: 800px;
position: relative;
left:345px;
top:74px;
background-color: rgb(206, 200, 180);
font-size: 25px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
border-radius: 20px;
padding: 5px;
}
form {
padding: 20px;
border-radius: 20px;
width: fit-content;
font-family: Verdana, Geneva, Tahoma, sans-serif;
position: relative;
left:350px;
top:100px;
background-color: rgb(240, 239, 228);
}
.error {
color: red;
font-size: 15px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.error1 {
color: red;
font-size: 15px;
font-family:Verdana, Geneva, Tahoma, sans-serif;
}
.navi2 {
width: fit-content;
width: 300px;
height: 600px;
position:absolute;
bottom: 600px;
background-color: cadetblue;
font-size: 20px;
border-radius: 20px;
top:300px;
}
.user-links {
position: relative;
left:20px;
bottom:30px;
}
.user-links:link{
color: brown;
}
.userlogo {
width: 200px;
border-radius: 100px;
position: relative;
left: 30px;
bottom: 100px;
}
.btn {
width: 100px;
border-radius: 5px;
margin-top: 10px;
}
/* footer styling */
.emaillogo, .telelogo {
width: 20px;
}
div.foot {
background-color: brown;
}
footer{
background-color: rgb(126, 226, 230);
height: 200px;
}
.footimage {
width: 400px;
height: fit-content;
margin: 0;
}
div.contact{
width: fit-content;
height: 200px;
height: fit-content;
position: relative;
left: 400px;
bottom: 185px;
font-size: 12px;
}
.usefullinks {
width: fit-content;
font-size: 12px;
position: relative;
left:750px;
bottom:280px;
height: fit-content;
}
.connect {
width: fit-content;
position: relative;
left: 1000px ;
bottom: 400px;
font-size: 12px;
height: fit-content;
}
.fb, .tw, .yt, .ln {
width: 50px;
border-radius: 10px;
}
/* Media Queries */
#media screen and (max-width:915px) {
div.logo {
width: 100%;
height: 200px;
background-color: rgb(147, 235, 238);
}
.content{
width: 100%;
margin: 10px;
padding: 0;
}
div.inner-body {
background-image: url(image/book2.png);
border-style: solid;
margin-top: 15px;
margin-bottom: 15px;
width: 100%;
position: relative;
}
div.navi {
width: 980px;
font-size: 30px;
padding-bottom: 90px;
}
.inner-body {
width: 100%;
}
.header{
left:50px;
}
.para{
width: 700px;
display: block;
left: 25px;
font-size: 35px;
padding:30px;
top:20px;
}
form {
width: 600px;
left: 60px;
font-size: 20px;
}
.navi2 {
display: none;
}
.usefullinks{
display: inline-block;
}
.connect{
display: none;
}
.contact {
display: block;
}
}
#media screen and (max-width:415px) {
.content{
width: 100%;
margin: 0;
padding: 0;
}
body {
margin: 0;
}
.inner-body {
width: 100%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="log-it-reports.css">
<script src="log-it-reports.js"></script>
<title>Document</title>
</head>
<body>
<div class= "content">
<div class="logo">
<img src="image/logo1.png" alt="Academy Logo" >
</div>
<div class="navi">
<p id="nav">
Home |
Academics |
Services |
Covid-19 |
Students & Parents |
Transcripts |
Staff |
Career |
Events |
Student Account |
</p>
</div>
<div class="inner-body">
<div class = "header" >
<h1>Steps For IT-Issues Logging:</h1>
</div>
<div class="para">
<p class="para2">Please read the following instructions before submitting a report:</p>
<ol>
<li>Fill out all of the fields.</li>
<li>Use a valid email.</li>
<li>Select a problem type.</li>
<li>Be as detailed as possible so that the IT staff could address the issue properly (100 characters minumum).</li>
<li>Normally most issues get addressed within 2 hours, please be patient.</li>
</ol>
</div>
<div class="form1">
<form method="GET" onsubmit=" return formValidations() " action="log-it-reports.html"><br>
<div class="error1" id= "errorMsg"></div>
<div>
<label for="subject"><b>Subject:</label>
<input id="subject" type="text" placeholder="Subject Title" >
</div><br>
<div class="error" id= "errorMsg2"></div>
<div>
<label for="email"><b>Email:</label>
<input id="email" type="email" placeholder="staff#wearview.com">
</div><br>
<div class="error" id= "errorMsg3"></div>
<div>
<select name="techtype" id="problemtypes">
<option value="">Problem Type</option>
<option value="Hardware">Hardware</option>
<option value="Software">Software</option>
<option value="Other">Other</option>
</select>
</div><br>
<div class="error" id= "errorMsg4"></div>
<div>
<textarea id="description" placeholder="Description goes here" name="descript" rows="15" cols="50"></textarea>
</div>
<div>
<button type="submit" class="btn">Submit</button>
<input type="checkbox" id="notify" name="notify" value="">
<label for="notify">Inform me by email when issue is resolved.</label>
</div>
</form>
</div>
<div class="navi2">
<div class="userimage">
<img class="userlogo" src="image/userlogo.png" alt="User Image">
</div>
<div class="user-links">
<navi>
<a class="staffname" href="staffname.html" title=" Staff Name">Staff Name</a> <br><br>
Inbox <br><br>
Notifications <br><br>
Files <br><br>
Settings <br><br>
Help <br><br>
QR For Mobile <br><br>
Log Out
</navi>
</div>
</div>
</div>
<div class="foot">
<footer id = "footy">
<div>
<img class="footimage" src="image/logo1.png" alt="Academy Logo" width="400px">
</div>
<div class="contact">
<h3>Contact Us</h3>
<p><img class="emaillogo" src="image/email (2).png" alt="emaillogo"> :wearview_academy#wearview.com</p>
<p><img class="telelogo" src="image/tele.png" alt="telelogo"> :+2499100000000</p>
</div>
<div class="usefullinks">
<h3>Useful Links</h3>
<ul>
<li>Career</li>
<li>Report A Website Issue</li>
<li>About Us</li>
<li>Covid-19</li>
<li>Events</li>
</ul>
</div>
<div class="connect">
<h3>Connect With Us </h3><br>
<img class="fb" src="image/fb.png" alt = "Facebook" />
<img class="tw" src="image/tw.jpg" alt = "Twitter" />
<img class="yt" src="image/you.png" alt = "Youtube" />
<img class="ln" src="image/linkd.png" alt = "LinkedIn" />
</div>
</footer>
</div>
</div>
</body>
</html>

Because of the default browser stylesheet, the body has a margin set. You can remove it with the following CSS reset:
body {
margin: 0;
}
Also, your .content has a margin set to 10px, which adds space to the bottom, remove it when you don't want it or only apply it to the top, right and left using:
margin: 10px 10px 0 10px
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="log-it-reports.css">
<script src="log-it-reports.js"></script>
<title>Document</title>
<style>
body {
font-family: Verdana, Geneva, Tahoma, sans-serif;
max-width: 100%;
margin: 0
}
.content {
max-width: 100%;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
}
div.logo {
width: 100%;
height: 200px;
background-color: rgb(147, 235, 238);
}
div.navi {
background-color: rgb(228, 226, 217);
width: 100%;
height: 50px;
margin-top: 15px;
text-align: center;
font-size: 19px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
padding-top: 1px;
margin-bottom: 1px;
}
p {
color: rgb(97, 87, 226);
}
.para2 {
color: black;
}
p.nav {
position: relative;
bottom: 5px;
border-style: solid;
}
a:link {
text-decoration: none;
color: rgb(97, 87, 226);
}
img {
margin-left: 20px;
width: 400px;
}
/* inner body styling */
div.inner-body {
background-image: url(image/book2.png);
margin-bottom: 20px;
margin-right: 0px;
max-width: 100%;
border-style: solid;
margin-top: 20px;
height: 1200px;
position: relative;
}
.header {
width: 700px;
position: relative;
left: 1000px;
left: 338px;
font-size: 30px;
}
.para {
width: 800px;
position: relative;
left: 345px;
top: 74px;
background-color: rgb(206, 200, 180);
font-size: 25px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
border-radius: 20px;
padding: 5px;
}
form {
padding: 20px;
border-radius: 20px;
width: fit-content;
font-family: Verdana, Geneva, Tahoma, sans-serif;
position: relative;
left: 350px;
top: 100px;
background-color: rgb(240, 239, 228);
}
.error {
color: red;
font-size: 15px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.error1 {
color: red;
font-size: 15px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.navi2 {
width: fit-content;
width: 300px;
height: 600px;
position: absolute;
bottom: 600px;
background-color: cadetblue;
font-size: 20px;
border-radius: 20px;
top: 300px;
}
.user-links {
position: relative;
left: 20px;
bottom: 30px;
}
.user-links:link {
color: brown;
}
.userlogo {
width: 200px;
border-radius: 100px;
position: relative;
left: 30px;
bottom: 100px;
}
.btn {
width: 100px;
border-radius: 5px;
margin-top: 10px;
}
/* footer styling */
.emaillogo,
.telelogo {
width: 20px;
}
div.foot {
background-color: brown;
}
footer {
background-color: rgb(126, 226, 230);
/* height: 200px; */
}
.footimage {
width: 400px;
height: fit-content;
margin: 0;
}
div.contact {
width: fit-content;
height: 200px;
height: fit-content;
position: relative;
left: 400px;
bottom: 185px;
font-size: 12px;
}
.usefullinks {
width: fit-content;
font-size: 12px;
position: relative;
left: 750px;
bottom: 280px;
height: fit-content;
}
.connect {
width: fit-content;
position: relative;
left: 1000px;
bottom: 400px;
font-size: 12px;
height: fit-content;
}
.fb,
.tw,
.yt,
.ln {
width: 50px;
border-radius: 10px;
}
/* Media Queries */
#media screen and (max-width:915px) {
div.logo {
width: 100%;
height: 200px;
background-color: rgb(147, 235, 238);
}
.content {
width: 100%;
/* margin: 10px; */
padding: 0;
}
div.inner-body {
background-image: url(image/book2.png);
border-style: solid;
margin-top: 15px;
margin-bottom: 15px;
width: 100%;
position: relative;
}
div.navi {
width: 980px;
font-size: 30px;
padding-bottom: 90px;
}
.inner-body {
width: 100%;
}
.header {
left: 50px;
}
.para {
width: 700px;
display: block;
left: 25px;
font-size: 35px;
padding: 30px;
top: 20px;
}
form {
width: 600px;
left: 60px;
font-size: 20px;
}
.navi2 {
display: none;
}
.usefullinks {
display: inline-block;
}
.connect {
display: none;
}
.contact {
display: block;
}
}
#media screen and (max-width:415px) {
.content {
width: 100%;
margin: 0;
padding: 0;
}
body {
margin: 0;
}
.inner-body {
width: 100%;
}
}
</style>
</head>
<body>
<div class="content">
<div class="logo">
<img src="image/logo1.png" alt="Academy Logo">
</div>
<div class="navi">
<p id="nav">
Home |
Academics |
Services |
Covid-19 |
Students & Parents |
Transcripts |
Staff |
Career |
Events |
Student Account |
</p>
</div>
<div class="inner-body">
<div class="header">
<h1>Steps For IT-Issues Logging:</h1>
</div>
<div class="para">
<p class="para2">Please read the following instructions before submitting a report:</p>
<ol>
<li>Fill out all of the fields.</li>
<li>Use a valid email.</li>
<li>Select a problem type.</li>
<li>Be as detailed as possible so that the IT staff could address the issue properly (100 characters
minumum).</li>
<li>Normally most issues get addressed within 2 hours, please be patient.</li>
</ol>
</div>
<div class="form1">
<form method="GET" onsubmit=" return formValidations() " action="log-it-reports.html"><br>
<div class="error1" id="errorMsg"></div>
<div>
<label for="subject"><b>Subject:</label>
<input id="subject" type="text" placeholder="Subject Title">
</div><br>
<div class="error" id="errorMsg2"></div>
<div>
<label for="email"><b>Email:</label>
<input id="email" type="email" placeholder="staff#wearview.com">
</div><br>
<div class="error" id="errorMsg3"></div>
<div>
<select name="techtype" id="problemtypes">
<option value="">Problem Type</option>
<option value="Hardware">Hardware</option>
<option value="Software">Software</option>
<option value="Other">Other</option>
</select>
</div><br>
<div class="error" id="errorMsg4"></div>
<div>
<textarea id="description" placeholder="Description goes here" name="descript" rows="15"
cols="50"></textarea>
</div>
<div>
<button type="submit" class="btn">Submit</button>
<input type="checkbox" id="notify" name="notify" value="">
<label for="notify">Inform me by email when issue is resolved.</label>
</div>
</form>
</div>
<div class="navi2">
<div class="userimage">
<img class="userlogo" src="image/userlogo.png" alt="User Image">
</div>
<div class="user-links">
<navi>
<a class="staffname" href="staffname.html" title=" Staff Name">Staff Name</a> <br><br>
Inbox <br><br>
Notifications <br><br>
Files <br><br>
Settings <br><br>
Help <br><br>
QR For Mobile <br><br>
Log Out
</navi>
</div>
</div>
</div>
<div class="foot">
<footer id="footy">
<div>
<img class="footimage" src="image/logo1.png" alt="Academy Logo" width="400px">
</div>
<div class="contact">
<h3>Contact Us</h3>
<p><img class="emaillogo" src="image/email (2).png" alt="emaillogo"> :wearview_academy#wearview.com
</p>
<p><img class="telelogo" src="image/tele.png" alt="telelogo"> :+2499100000000</p>
</div>
<div class="usefullinks">
<h3>Useful Links</h3>
<ul>
<li>Career</li>
<li>Report A Website Issue</li>
<li>About Us</li>
<li>Covid-19</li>
<li>Events</li>
</ul>
</div>
<div class="connect">
<h3>Connect With Us </h3><br>
<a href="https://www.facebook.com" title="facebook"><img class="fb" src="image/fb.png"
alt="Facebook" /></a>
<a href="https://www.twitter.com" title="twitter"><img class="tw" src="image/tw.jpg"
alt="Twitter" /></a>
<a href="https://www.youtube.com" title="youtube"><img class="yt" src="image/you.png"
alt="Youtube" /></a>
<a href="https://www.linkedin.com" title="linkedin"><img class="ln" src="image/linkd.png"
alt="LinkedIn" /></a>
</div>
</footer>
</div>
</div>
</body>
</html>
Note that I also removed the height of the footer in the example above, since it causes some spacing as well.

small little line at bottom of page

I can't get rid of a small white line in my HTML page at the bottom:
.text {
width: 90%;
}
.divfloatleft {
float: left;
margin-left: 35%;
width: 15%;
text-align: left;
background: linear-gradient(#036, #0FF);
height: 70%;
margin-top: 6%;
}
.divpaginalogin {
height: 100%;
}
.divfloatright {
float: right;
margin-right: 35%;
width: 15%;
text-align: right;
background: linear-gradient(#0FF, #036);
height: 70%;
margin-top: 6%;
}
.div-container {
background-image: url(../Images/pellicola.png);
background-repeat: no-repeat;
background-size: 100% 100%;
height: 88%;
overflow: hidden;
}
.div-child {
height: 50%;
border: 1px solid;
width: 100%;
position: relative;
}
.div-child a {
text-decoration: none;
font-weight: bold;
color: black;
font-family: helvetica, arial, sans-serif;
}
.div-child:hover {
background-size: 100% 100%;
}
a:hover {
color: #00C;
}
.div-login {
background: linear-gradient(#003, #00F);
color: white;
font-family: helvetica, arial, sans-serif;
font-weight: normal;
font-size: 12px;
border-bottom: 1px solid black;
overflow: auto;
}
.div-footer {
min-height: 5%;
text-align: center;
color: white;
background: linear-gradient(#00F, #003);
border-top: 1px solid black;
}
.table-login {
margin-left: auto;
margin-right: 0px;
}
.loginbutton {
color: white;
background-color: #0066ff;
border-radius: 4px;
border-color: black;
border-width: 1px;
box-shadow: 2px 2px 4px 0px #333333;
font-weight: bold;
font-size: 14px;
width: 65px;
cursor: pointer;
}
This is my Razor page:
<div class="divpaginalogin">
<div class="div-login">
#using (Html.BeginForm())
{
#Html.ValidationSummary(true)
#Html.AntiForgeryToken()
<table class="table-login">
<tr>
<td>#Html.LabelFor(a => a.Username)</td>
<td>#Html.LabelFor(a => a.Password)</td>
</tr>
<tr>
<td>#Html.TextBoxFor(a => a.Username, new { #class = "text" })</td>
<td>#Html.PasswordFor(a => a.Password, new { #class = "text" })</td>
<td>
<input type="submit" value="Login" class="loginbutton" /></td>
</tr>
<tr>
<td>#Html.ValidationMessageFor(a => a.Password)</td>
<td>#Html.ValidationMessageFor(a => a.Username)</td>
</tr>
</table>
}
</div>
<div class="div-container">
<div class="divfloatleft">
<div class="div-child" onmouseover="Show(this, 'Contatti.png')" onmouseout="Hide(this)">
#Html.ActionLink("Contatti", "Contatti", null, new { #style = "position: absolute; top: 0px; left: 0px;" })
</div>
<div class="div-child" onmouseover="Show(this, 'Mappa.png')" onmouseout="Hide(this)">
#Html.ActionLink("Dove Siamo", "DoveSiamo", null, new { #style = "position: absolute; bottom: 0px; left: 0px;" })
</div>
</div>
<div class="divfloatright">
<div class="div-child" onmouseover="Show(this, 'Informazioni.png')" onmouseout="Hide(this)">
#Html.ActionLink("Informazioni", "Informazioni", null, new { #style = "position: absolute; top: 0px; right: 0px;" })
</div>
<div class="div-child" onmouseover="Show(this, 'Chi-siamo.png')" onmouseout="Hide(this)">
#Html.ActionLink("Chi Siamo", "ChiSiamo", null, new { #style = "position: absolute; bottom: 0px; right: 0px;" })
</div>
</div>
</div>
<div id="footer" class="div-footer">
<p>Videoteca online P.IVA: 00000000000</p>
</div>
</div>
at the bottom appear a line which is about 0.3% height, it seems I can't cover the full HTML page if I add 1% to the footer instead the scrollbar appears, I also use this CSS:
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
I was thinking to set footer height from 5% to 5.3% but I don't know if that's the correcty way since I may be have something wrong in my HTML..
Thanks to all!

Just tested your page, and with this minor modification in your .div-footer class the white line at the bottom seems to be gone. I've tested in several resolutions including mobile.
.div-footer {
min-height: 5%;
text-align: center;
color: white;
background: linear-gradient(#00F, #003);
border-top: 1px solid black;
/* changes added to fix footer at bottom */
position:absolute;
bottom:0;
width:100%;
}
Here's an edited Punkler

How do I put one <div> element below another <div>

I just finished doing HTML/CSS with Codecademy. One of the "projects" there is to make your own resume. I took the HTML/CSS from that project, and I'm tweaking it to make the resume look better. I'm currently trying to put one div - the part of the resume where text about my career objective will go - under another div, the header. It is, however, not working. The div for the "objective" is currently behind the div for the header. How on earth do I get that second div for the objective to go underneath the first div?
I read something about how I should float the header div to the left and then put clear:both; in the div for the objective, but that's not working.
HTML
<div id="header">
<p id="name">My Name</p>
<p id="email">myemail#email.com</p>
</div>
<div id="objective"></div>
<div class="left"></div>
<div class="right"></div>
<div id="footer">
<p>1234 Anywhere Street, Brooklyn NY 11216 | Tel: (123) 456-7890</p>
</div>
CSS
div {
border-radius: 5px;
}
#header {
z-index:1;
position: fixed;
width: 98%;
margin-top: -20px;
height: 60px;
background-color: #668284;
margin-bottom: 10px;
float:left;
}
#name {
float:left;
margin-left: 5px;
padding-top: 5px;
font-size: 16px;
font-family: Verdana, sans-serif;
color: #ffffff;
}
#email{
float:right;
margin-right: 5px;
padding-top: 5px;
font-size: 16px;
font-family: Verdana, sans-serif;
color: #ffffff;
}
.right p {
margin-left: 5px;
margin-right: 5px;
margin-top: -10px;
font-family: Garamond, serif;
color: #000000;
}
a:hover {
font-weight: bold;
}
#objective {
height: 50px;
background-color: #668284;
font-family: Verdana, sans-serif;
font-size: 14px;
text-align: center;
clear:both;
color: #ffffff;
}
.left {
position: relative;
float: left;
margin-top: 50px;
width: 49%;
height: 400px;
background-color: #B9D7D9;
margin-bottom: 10px;
}
.right {
position: relative;
float: right;
margin-top: 50px;
width: 49%;
height: 400px;
background-color: #F4EBC3;
margin-bottom: 10px;
}
#footer {
position: relative;
height: 50px;
background-color: #668284;
clear: both;
font-family: Verdana, sans-serif;
font-size: 14px;
text-align: center;
color: #ffffff;
}
#footer p {
position: relative;
padding-top: 15px;
}

For example:
<div class="div1">KSD;JSFAJ;SSD;</div>
<div class="div2">KSD;JSFAJ;SSdfaD;</div>
Css with float:
.div1 {
float: none;
}
.div2 {
float: none;
}
Css with display:
.div1 {
display: inline;
}
.div2 {
display: inline;
}

Here is the updated HTML :
<div id="header">
<p id="name">My Name</p>
<p id="email">myemail#email.com</p>
</div>
<div style="height:50px;width:98%;">
</div>
<div id="objective">Objective goes here</div>
<div class="left"></div>
<div class="right"></div>
<div id="footer">
<p>1234 Anywhere Street, Brooklyn NY 11216 | Tel: (123) 456-7890</p>
</div>
This will show the objective div underneath header div.
Also this is a link for your reference.

Here is update CSS, This show the responsive your html
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
div {
border-radius: 5px;
}
#header {
width: 98%;
margin: 0 auto;
height: 60px;
background-color: #668284;
margin-bottom: 10px;
}
#name {
float:left;
margin-left: 5px;
padding-top: 5px;
font-size: 16px;
font-family: Verdana, sans-serif;
color: #ffffff;
}
#email{
float:right;
margin-right: 5px;
padding-top: 5px;
font-size: 16px;
font-family: Verdana, sans-serif;
color: #ffffff;
}
.right p {
margin-left: 5px;
margin-right: 5px;
margin-top: -10px;
font-family: Garamond, serif;
color: #000000;
}
a:hover {
font-weight: bold;
}
#objective {
height: 50px;
background-color: #668284;
font-family: Verdana, sans-serif;
font-size: 14px;
text-align: center;
clear:both;
color: #ffffff;
}
.left {
position: relative;
float: left;
margin-top: 50px;
width: 49%;
height: 400px;
background-color: #B9D7D9;
margin-bottom: 10px;
}
.right {
position: relative;
float: right;
margin-top: 50px;
width: 49%;
height: 400px;
background-color: #F4EBC3;
margin-bottom: 10px;
}
#footer {
position: relative;
height: 50px;
background-color: #668284;
clear: both;
font-family: Verdana, sans-serif;
font-size: 14px;
text-align: center;
color: #ffffff;
}
#footer p {
position: relative;
padding-top: 15px;
}
Don't ever forget to add this code
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
So that you won't have empty space on your div
DEMO

I think its easier using bootstrap, here is the link http://getbootstrap.com/css/
What bootstrap does is that it creates containers that wrap the content of your site. It divides the site in rows. To do that you need and . With this bootstrap you can divide your rows in 12 cells.
Here is an example of how I divided my portfolio in 3 columns of 4 spaces
<div class="row">
<div class="col-md-12">
<hr>
</div>
</div>
<div class="row text-center">
<div class="col-md-4">
<h3 class="text-body"><u>Block vs Inline</u>
</h3>
<p class="p-text"><span>Block Elements</span> are those who take the complete line and full width of the page creating a "box".<br>
<span>Inline Elements</span> are those who doesn´t affect the layout, just the element inside the tag.
</p>
</div>
<div class="col-md-4">
<h3 class="text-body"><u>Selectors</u></h3>
<p class="p-text"><span>Class selectors</span> are used to target elements with specific attributes<br>On the other hand, <span>id selectors</span> are just for unique elements.</p>
</div>
<div class="col-md-4">
<h3 class="text-body"><u>Responsive Layout</u></h3>
<p class="p-text"><span>Responsive Layout</span> is the combination of html and css design to make the website look good in terms of enlargement, shrink and width in any screen (<em>computers, laptops, netbooks, tablets, phones</em>). </p>
</div>
</div>

How do I stop my slideshow from affecting other elements on the page

My slideshow div is paced above my header nav in HTML to create a fullscreen slideshow but all the elements on my page are fading with my slideshow, how do I prevent that?
Thank you
I'm new at this, so I'm not sure if the layout is correct or not.
enter code here
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link href="main.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
"use strict";
var scroll_start = 0;
var startchange = $('#about');
var offset = startchange.offset();
$(document).scroll(function() {
scroll_start = $(this).scrollTop();
if(scroll_start > offset.top) {
$('#header').css('background-color', '#3A3939');
} else {
$('#header').css('background-color', 'transparent');
}
});
});
var currentBackground = 0;
var backgrounds = [];
backgrounds[0] = 'images/pic3.png';
backgrounds[1] = 'images/pic2.png';
backgrounds[2] = 'images/pic1.png';
backgrounds[3] = 'images/pic4.png';
function changeBackground() {
currentBackground++;
if(currentBackground > 3) currentBackground = 0;
$('.slideshow').fadeOut(900,function() {
$('.slideshow').css({
'background-image' : "url('" + backgrounds[currentBackground] + "')"
});
$('.slideshow').fadeIn(1000);
});
setTimeout(changeBackground, 3500);
}
$(document).ready(function() {
setTimeout(changeBackground, 3500);
});
</script>
</head>
<body>
<div id="home">
<div class="slideshow">
<div id="header">
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</ul>
<div id="styledimg"></div>
</nav>
</div>
<div id="head-soc">
<div id="linkedin-icon">Linkedin</div>
<div id="youtube-icon">Youtube</div>
<div id="facebook-icon">Facebook</div>
</div>
<div class="content">
<p>Create, Collaborate, Innovate</p>
</div>
</div>
</div>
<div id="about">
<div class="wrapper">
<h4>Titus Jackson</h4>
<p>Film Maker ~ Screen Writer ~ Editor</p>
</div>
<img src="images/Titus-Jackson1.jpg" alt="Titus Jackson" width="425" height="365" border="0" />
<div id="section2">
<p>For over 15 years <span>Cinemuze</span> has had the honor of working with some of the most talented creative collaborators tulsa has to offer. We love working on a variety of projects. As it is our goal to be a well rounded company with our fingers in a lot of pies.</p>
<p>Our paramount value is to approach the material with excellence, and an original point of view to tell a unique and compelling story. It is our belief that life is what you make of it, and the saddest lost is not to explore all your potential in the short time you've been given.</p>
<p>We've had the opportunity to work on multiple feature films and national television shows ranging from christian television to TLC television. We've created multiple award winning music vidoes, short films and even a feature film. Feel free to take a look around the site, and drop us an email, we look forward to hearing from you.</p>
<img src="images/email1.png" alt="email" width="26" height="26" />
</div>
</div>
<div id="projects">
<h5>View our current projects:</h5>
<div class="wrapper1">
<iframe width="265" height="200" src="https://www.youtube.com/embed/8CZJzUk7fFM" frameborder="0" allowfullscreen></iframe>
<p>Eugene Gregory Promo</p>
</div>
<div id="wrapper2">
<iframe width="265" height="200" src="https://www.youtube.com/embed/cLm3Vh4_Ruc" frameborder="0" allowfullscreen></iframe>
<p>Family Cup Promo</p>
</div>
<div class="wrapper3">
<iframe width="265" height="200" src="https://www.youtube.com/embed/2t9-vVNgF7c" frameborder="0" allowfullscreen></iframe>
<p>This Generation</p>
</div>
</div>
<div id="contact">
<section3>
<h3>To connect with Us:</h3>
<p><span>Cinemuze</span> is based in Tulsa, Oklahoma and travels widely for a variety of projects.</p>
<p>If your interested in our work, you can connect with us via email or phone.</p>
</section3>
<div class="section4">
<img src="images/email1.png" alt="email" width="26" height="26" />
<a href="mailto:titusjackson#mac.com">
<p>titusjackson#mac.com</p>
</a><img src="images/phone.png" alt="phone" width="24" height="24" />
<p>+1 (918) 671-3340</p>
</div>
</div>
<footer>
</footer>
</body>
</html>
#charset "UTF-8";
/* CSS Document */
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background-color: #42413C;
margin: 0;
padding: 0;
color: #000;
}
#header {
width: 100%;
margin-top: -15px;
position: fixed;
background-color: transparent;
transition-duration: 1s;
}
div#header nav {
width: 1425;
height: 110px;
}
div#header ul {
list-style: none;
margin-left: 100px;
float: left;
}
div#header li {
float: left;
margin-left: 64px;
margin-top: 10px;
}
div#header a {
color: white;
text-decoration: none;
line-height: 45px;
font-size: .9em;
text-transform: capitalize;
}
div#header a:hover {
color: rgba(249,0,3,1.00);
}
div#styledimg {
background-image: url(images/logo.png);
background-repeat: no-repeat; width: 224px;
height: 85px;
float: right;
margin-right: 150px;
margin-top: 10px;
z-index: 1003;
}
/*page-specific header styles*/
#header {
background-color: rgba(60,59,59,1.00);
width: 1425;
height: 110px;
}
/* layout styles*/
/*home page*/
.slideshow {
background-image:url(images/pic3.png);
background-size: cover;
background-repeat: no-repeat;
background-position: 500px 0px 0px;
background-attachment: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 900px;
line-height: 0px;
margin-top: -330px;
padding-top: -15px;
}
#header {
background-color: transparent;
}
#head-soc {
width: 129;
height: 86;
margin: 10px;
padding: 0px;
float: right;
margin-right: 40px;
margin-top: 255px;
right: 25px;
position: fixed;
z-index: 2;
}
#head-soc a {
margin-top: 10px;
margin-right: 20px;
}
#linkedin-icon a {
text-indent: -9999px;
font-size: 0;
line-height: 0;
overflow: hidden;
height: 43px;
width: 43px;
border: 0;
background-image: url(images/socialsprites_white.png);
display: block;
float: right;
background-position: 0px 0px;
}
#linkedin-icon a:hover {
background-image: url(images/socialsprites_white.png);
background-position: 0px -43px;
}
#youtube-icon a {
text-indent: -9999px;
font-size: 0;
line-height: 0;
overflow: hidden;
height: 43px;
width: 43px;
border: 0;
background-image: url(images/socialsprites_white.png);
display: block;
float: right;
margin-left: 20px;
background-position: -43px 0px;
}
#youtube-icon a:hover {
background-image: url(images/socialsprites_white.png);
background-position: -43px -43px;
}
#facebook-icon a {
text-indent: -9999px;
font-size: 0;
line-height: 0;
overflow: hidden;
height: 43px;
width: 43px;
border: 0;
background-image: url(images/socialsprites_white.png);
display: block;
float: right;
background-position: -86px -85px;
}
#facebook-icon a:hover {
background-image: url(images/socialsprites_white.png);
background-position: -86px -128px;
}
.content p {
font-family: BlairMdITC TT-Medium;
font-size: 44px;
line-height: 120%;
width: 550px;
text-align: center;
padding-top: 360px;
margin-top: 330px;
margin-left: 575px;
color: rgba(248,241,241,1.00);
}
/* about page*/
div#about {
background-color:rgba(188,184,184,1.00);
height: 550px;
margin-top: -35px;
padding-top: 100px;
}
.wrapper h4 {
font-famiy: Geneva;
font-size: 25px;
padding-left: 224px;
color: rgba(249,0,3,1.00);
margin-bottom: -20px;
}
.wrapper p {
font-family: Geneva;
font-size: 12px;
margin-left: 226px;
margin-top: 20px;
margin-bottom: 15px;
color: rgba(134,133,133,1.00);
}
h6 {
padding-left: 225px;
margin-top: -20px;
margin-bottom: 10px;
color: rgba(60,59,59,1.00);
}
img {
float: left;
margin-left: 225px;
margin-right: 15px;
}
#section2 {
font-family: Helvetica;
font-size: 16px;
color: rgba(60,59,59,1.00);
width: 1280px;
padding-top: -80px;
height: 300px;
}
#section2 p {
color: rgba(60,59,59,1.00);
}
#section2 img {
margin-left: 2px;
}
span {
color: rgba(249,0,3,1.00);
}
/* projects page */
div#projects {
background-color: #3A3939;
background-position: 25px;
height: 450px;
margin: 0px;
line-height: 0;
padding-top: 25px;
}
.wrapper1 {
float: left;
width: 265;
height: 200px;
margin-left: 200px;
padding-top: 50px;
}
#wrapper2 {
float: right;
width: 265;
height: 200px;
margin-right: 200px;
padding-top: 50px;
}
.wrapper3 {
float: left;
margin-left: 175px;
padding-top: 50px;
width: 265;
height: 200px;
}
.wrapper1 p {
margin-left: 42px;
font-family: BlairMdITC TT-Medium;
font-size: 20px;
color: rgba(249,0,3,1.00);
margin-top: 20px;
}
#wrapper2 p {
margin-left: 65px;
font-family: BlairMdITC TT-Medium;
font-size: 20px;
color: rgba(249,0,3,1.00);
margin-top: 20px;
}
.wrapper3 p {
margin-left: 70px;
font-family: BlairMdITC TT-Medium;
font-size: 20px;
color: rgba(249,0,3,1.00);
margin-top: 20px;
}
div#projects h5 {
margin-left: 650px;
font-size: 20px;
font-family: Helvetica, Arial, sans-serif;
color:rgba(179,178,178,1.00);
padding-bottom: 45px;
margin-bottom: -15px;
}
p {
font-size: 16px;
margin-left: 195px;
color: rgba(249,247,247,1.00);
}
/* contact page */
div#contact {
background-image:url(images/studio4.png);
background-size: cover;
background-attachment: fixed;
padding-top: 35px;
padding-bottom: 100px;
}
section3 h3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 22px;
color: rgba(249,0,3,1.00);
margin-left: 660px;
margin-top: 75px;
}
section3 p {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
color: rgba(255,255,255,1.00);
width: 650px;
padding-left: 85px;
margin-left: 385px;
}
.section4 {
font-family: Helvetica, sans-serif;
font-size: 16px;
color: rgba(255,255,255,1.00);
margin-left: 440px;
margin-top: 50px;
}
.section4 a {
text-decoration: none;
}
.section4 a p:hover {
color: rgba(249,0,3,1.00);
}
/* ~~ The footer ~~ */
/*HTML 5 support - Sets new HTML 5 tags to display:block so browsers know how to render the tags properly. */
header, section, footer, aside, article, figure {
display: block;
}

You've placed all of your HTML inside of the div with the slideshow class:
<div class="slideshow"> //this is left open
//other divs are closed later on like this one:
<div id="styledimg"></div>
//but all the divs below slideshow are inside of the slideshow div
So whatever animations you're doing to the slideshow div, will affect all of its children.

Auto expanding borders, div, page

I'm trying to create a square centered page at min. 600px height. The page should expand together with the text. (Ofc.)
The page also have some picture based borders, which should follow the page. (Obviously.)
I've tried a million combinations by now, I think. The problem seems to be that the div-borders cannot auto adjust if the outer div doesn't have a fixed height. And the outer div cannot have a fixed height, due to expanding text.
It seems simple enough. And there're a lot of suggestions. (That doesn't work.) Have I done something fundamentally wrong?
Here's the page: http://bymosegaard-hillerod.dk/info.aspx
(Notice that the borders doesn't reach the bottom.)
For future reference. Here's the code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>...</title>
<link href="..." rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
<div id="topborder"></div>
<div id="leftborder"></div>
<div id="page">
<div id="pageheadtext">...</div>
<div style="float: right; margin-top: 30px;"><img src="/media/banner.jpg"></div>
<div id="menubar" style="margin-top: 210px;">
...
</div>
<div id="sideNavigation"></div>
<div id="bodyText" style="margin-top: 20px;">
...
</div>
</div>
<div id="rightborder"></div>
<div id="bottomborder"></div>
<div id="footer">...</div>
</div>
</body>
</html>
And the stylesheet:
BODY
{
background-color: rgb(248, 248, 243);
background-image: url(/media/bodyBg.gif);
background-repeat: repeat-x;
color: rgb(102, 102, 102);
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 10px;
height: 95%;
}
H1
{
font-family: Verdana, Arial;
font-size: 14px;
color: #333;
font-weight:normal;
}
#pageheadtext
{
margin-top: 40px;
margin-left: 35px;
font-family: Verdana, Arial;
font-size: 14px;
color: #333;
text-align: left;
}
#container
{
margin: 0 auto 0 auto;
width: 786px;
overflow: hidden;
min-height: 600px;
}
#topborder
{
background-image: url(/media/frameTopBg.png);
background-repeat: no-repeat;
display: block;
height: 8px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
overflow-x: hidden;
overflow-y: hidden;
width: 100%;
}
#leftborder
{
float: left;
background-image: url(/media/frameLeftMiddleBg.png);
background-repeat: repeat-y;
width: 13px;
min-height: 600px;
height: auto;
}
#page
{
background-color: white;
display: block;
float: left;
height: 100%;
margin-left: 0px;
text-align: left;
width: 760px;
}
#rightborder
{
float: right;
background-image: url(/media/frameRightMiddleBg.png);
background-repeat: repeat-y;
width: 13px;
min-height: 600px;
height: 100%;
}
#bottomborder
{
background-image: url(/media/frameBottomBg.png);
background-repeat: no-repeat;
clear: both;
display: block;
height: 13px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
overflow-x: hidden;
overflow-y: hidden;
width: 100%;
}
#menubar
{
background-image: url(/media/menubar.jpg);
background-repeat: no-repeat;
display: block;
height: 27px;
width: 760px;
}
#topmenuitem
{
color: rgb(102, 102, 102);
cursor: auto;
line-height: 24px;
outline-color: rgb(102, 102, 102);
outline-style: none;
outline-width: 0px;
padding-bottom: 0px;
padding-left: 3px;
padding-right: 3px;
padding-top: 0px;
text-decoration: none;
}
#sideNavigation
{
float: left;
font-family: Arial, Verdana, Helvetica, sans-serif;
margin-left: 35px;
margin-top: 32px;
}
#bodyText
{
float: right;
margin-right: 194px;
width: 400px;
height: 100%;
}
#footer
{
text-align: center;
}
#doctable
{
font-size: 10px;
}
Btw, the page is CMS driven, so I cannot just hack the one offending page. And I would really like to solve this in general.

Your CSS is over complicated, the HTML structure also, not to talk that the design is oldish and the font is hardly readable. And over all that you spiced it using inline styles... This will only lead to to fix a fix of a fix, and not to answer a client call to do just a simple edit / modification.
Hardly maintainable. Keep it simple.
Believe it or not this is all you need:
jsBin demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My page</title>
</head>
<body>
<div id="container">
<h1>Bymosegård i Hillerød</h1>
<img src="http://bymosegaard-hillerod.dk/media/banner.jpg">
<nav>
<ul>
<li>Forside</li>
<li>Info</li>
<li>Regnskaber</li>
<li>Referater</li>
<li>Kontakt</li>
</ul>
</nav>
<div id="content">
<h2>Foretningsorden, relementer mm.</h2>
<p>Foretningsorden, relementer, vedtægter mm.</p>
<p> </p>
<h3>Vedtægter</h3>
................. etc
</div>
</div>
<div id="footer">Bymosegårds Alle 3-9, 3400 Hillerød</div>
</body>
</html>
CSS:
*{ margin:0; padding:0; } /* Global reset */
body{
background:#EEEDE4;
font: 10px/1.4 Helvetica, Arial, Verdana, sans-serif;
color: #666;
}
h1, h2, h3, p, ul, ol{
margin: 7px 30px;
font-weight:200;
}
h1{
color:#333;
font-size:1.5em;
padding:25px 0
}
ul, ol { padding-left:1.4em; }
nav { background: #E9E9E9; }
nav li { display:inline-block; }
nav li a{ display:inline-block; padding:5px 15px; }
#container > img{ width:100%; }
#container{
position:relative;
margin: 15px auto;
width: 786px;
background: #fff;
padding:10px;
box-shadow: 0 0 4px rgba(0,0,0,0.3);
}
#content{ margin:30px 100px; }
#footer{ text-align:center; }