The_Invisible
2009-01-10, 19:17:53
Hallo,
zuerst einmal der Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Prototyp</title>
<style type="text/css">
<!--
#main {
padding: 5px;
}
#main #main_frame {
background-color: #EFEFEF;
width: 1000px;
margin-right: auto;
margin-left: auto;
padding: 5px;
border: 1px dashed #999;
}
#main #main_frame #main_menu {
width: 150px;
background-color: #FEC;
display: block;
padding: 5px;
float: left;
}
#main #main_frame #main_content {
background-color: #E8FFEF;
display: block;
padding: 5px;
margin-left: 170px;
width: 650px;
}
#main #main_frame #main_extra {
float: right;
width: 150px;
background-color: #FFC4C4;
padding: 5px;
}
#main #main_frame #main_footer {
background-color: #C1D1FF;
padding: 5px;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
-->
</style>
</head>
<body id="main">
<div id="main_frame">
<div id="main_menu">
<p>Menu</p>
<p> </p>
</div>
<div id="main_extra">
<p>Extra</p>
<p> </p>
</div>
<div id="main_content">
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
<div id="main_footer">
Footer
</div>
</div>
</body>
</html>
Problem: Wenn der Inhalt von Menu oder Extra größer ist als von Content, wächst das jeweilige DIV über den Footer hinaus. Es sollte aber so sein wie bei Content, das sich der Footer dann automatisch weiter nach unten schiebt bzw das "main_frame" DIV mitwächst.
Habe sowas ähnliches schon mal gemacht wo es ohne Probleme funktioniert, leider konnte ich da eigentlich keine Unterschiede finden bzw wär das jetzige Beispiel sauberer. Das war aber schon immer ein bisschen Trickserei für mich.
mfg
zuerst einmal der Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Prototyp</title>
<style type="text/css">
<!--
#main {
padding: 5px;
}
#main #main_frame {
background-color: #EFEFEF;
width: 1000px;
margin-right: auto;
margin-left: auto;
padding: 5px;
border: 1px dashed #999;
}
#main #main_frame #main_menu {
width: 150px;
background-color: #FEC;
display: block;
padding: 5px;
float: left;
}
#main #main_frame #main_content {
background-color: #E8FFEF;
display: block;
padding: 5px;
margin-left: 170px;
width: 650px;
}
#main #main_frame #main_extra {
float: right;
width: 150px;
background-color: #FFC4C4;
padding: 5px;
}
#main #main_frame #main_footer {
background-color: #C1D1FF;
padding: 5px;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
-->
</style>
</head>
<body id="main">
<div id="main_frame">
<div id="main_menu">
<p>Menu</p>
<p> </p>
</div>
<div id="main_extra">
<p>Extra</p>
<p> </p>
</div>
<div id="main_content">
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
<div id="main_footer">
Footer
</div>
</div>
</body>
</html>
Problem: Wenn der Inhalt von Menu oder Extra größer ist als von Content, wächst das jeweilige DIV über den Footer hinaus. Es sollte aber so sein wie bei Content, das sich der Footer dann automatisch weiter nach unten schiebt bzw das "main_frame" DIV mitwächst.
Habe sowas ähnliches schon mal gemacht wo es ohne Probleme funktioniert, leider konnte ich da eigentlich keine Unterschiede finden bzw wär das jetzige Beispiel sauberer. Das war aber schon immer ein bisschen Trickserei für mich.
mfg