nicht angemeldet
Bitte um Hilfe
Hallo,
ich zerbreche mir seit einiger Zeit den Kopf über folgendes Problem. Wahrscheinlich nur eine Kleinigkeit.
Ich möchte in einer Box zwei weitere Bereiche (Boxes) ansordnen. Diese sollen nebeneinander liegen und die Höhe sollte automatisch größer werden. Der "Footer" wird dementsprechend nach unten weggeschoben. Es soll letztendlich eine Seite wie z.B. Focus.de entstehen. Oben das Menu und ein header, links-body ein textbereich und rechts-body für Zusatzmenü. Drunter dann einen Footer.
Ich hoffe ich konnte mich verständlich ausdrücken.
Hier noch mal als HTML/CSS.
Danke, tomtomtom
<html>
<head>
<style type="text/css">
<!--
body,html{
font: 10px Verdana, Arial, Helvetica, sans-serif;
color: #666666;
background: #fff;
height: 100%;
padding: 0;
margin: 0;
background-image: url(../gfx/body_bg.jpg);
background-position: top center;
background-repeat: repeat-y;
}
#page{
width: 800px;
padding: 0;
margin-top: 0;
margin-right: auto;
margin-bottom: 110px;
margin-left: auto;
position: relative;
top: 0;
min-height: 100%; /* For Modern Browsers */
height: auto !important; /* For Modern Browsers */
height: 100%; /* For IE */
border: 1px solid silver;
}
#content {
width: 780px;
padding-bottom: 80px;
border: 0;
margin-top: 7px;
margin-left: 9px;
font: normal 10px verdana, arial;
color:#666666;
height:auto !important;
}
#box_left {
position:relative;
height: auto;
min-height: 300px;
border: 1px solid silver;
text-align: left;
padding-left: 10px;
margin-bottom: 10px;
width: 459px;
z-index: 20;
}
#box_right {
position: relative;
heigth: auto;
min-height: 300px;
border: 1px solid silver;
text-align: left;
margin-left: 479px;
margin-bottom: 10px;
width: 300px;
z-index: 10;
}
#footer{
clear: both;
width: 100%;
margin: 0;
padding: 0;
position: absolute;
bottom: 0 !important;
bottom: -1px;
height: 80px;
text-align: center;
font: normal 10px verdana, arial;
border: 1px solid silver;
}
-->
</style>
<title>Das ist die Seite :: etieS eid tsi saD</title>
<meta content="Evrsoft First Page" name="GENERATOR">
</head>
<body>
<div id="page">
<div id="content">
<div id="box_left">
<p>hallo</p>
<p>hallo</p>
<p>hallo</p>
<p>hallo</p>
<p>hallo</p>
<p>hallo</p>
<p>hallo</p>
<p>hallo</p>
<p>hallo</p>
<p>hallo</p>
<p>hallo</p>
v
v
<p>hallo</p>
<p>hallo</p>
<p>hallo</p></div>
<div id="box_right"></div>
</div>
<div id="footer">Ich bin ein Footer</div>
</div>
</body>
</html>
-
hi,
da gibt es mehrere moeglichkeiten, musst du halt googlen, dann findest du viele 'wege', nur halt leider die alle beisbiele, die die man im netz finden kann nicht immer auf allen browsern gut sind.
Eine moeglichkeit waer ja:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html>
<head>
<title>3 columns, fixed width, content tallest</title>
<style type="text/css">
#container{
background-color:#9cc;
float:left;
width:500px;
border-left:150px solid #cf9; /* The width and color of the left rail */
border-right:200px solid #c33; /* The width and color of the right rail */
}
#leftRail{
float:left;
width:150px;
margin-left:-150px;
position:relative;
}
#center{
float:left;
width:500px;
margin-right:-500px;
}
#rightRail{
float:right;
width:200px;
margin-right:-200px;
position:relative;
}
</style>
</head>
<body>
<p>source: http://alistapart.com/articles/multicolumnlayouts</p>
<div style="width:850px;margin:0 auto">
<div id="container">
<div id="center">CENTER<br />COLUMN CONTENT</div>
<div id="leftRail"><p>LEFT RAIL</p><p>LEFT RAIL</p><p>LEFT RAIL</p><p>LEFT RAIL</p></div>
<div id="rightRail">
<p>RIGHT RAIL</p>
</div>
</div>
</div>
</body>
</html>