✔ div content soll sich automatisch vergrössern wie bei Tabellen

M

mrbong

Mitglied
Hallo,

habe da leider ein kleines Problem, habe hier einen Seiten-Div per position:absolute (test 1,2,3) eingebaut, jedoch vergrössert sich der Content - Layer nicht. Welchen Fehler hab ich da gemacht , bzw wie könnte man das lösen ?

Vielen Dank im Voraus !

HTML: 
<!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=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<style>
body,td,th {
	font-family: Geneva, Arial, Helvetica, sans-serif;
}

html, body {height: 100%;}

* {
    margin: 0;
    padding: 0;
}

.header_in_left{
float:left;
width:200px;
height:99px;
background-color:#ff0000;
text-align:center;
}

.header_in_right{
float:left;
width:200px;
height:99px;
background-color:#00ff00;
text-align:center;
}

.header_in_middle{
float:left;
width:600px;
height:99px;
background-color:#0000ff;
text-align:center;
}

.wrapper{
position:absolute; 
width:1000px;
left:50%; 
margin-left:-500px; 
background-color:#FF00FF;
}

.clear {clear:both;}

.header{
width:1000px;
background-color:#eee;
height:110px;
}

.contentwrapper{
width:1000px;
background-color:#00ff00;
}

.footer{
width:1000px;
background-color:#ff0000;
height:30px;
}

.menue{
width:1000px;
height:78px;
background-color:#FFFF00;
}

.content{
background-color:#000000;
color:#fff;
height:1000px;
}

.content_header{
width:690px;
height:20px;
background-color:#FF00FF;
margin-top:10px;
float:left;
}

.content_text{
width:690px;
min-height:100px;
background-color:#000FFF;
margin-top:10px;
float:left;
}

.content_header_doppelt{
width:340px;
height:20px;
background-color:#FF00FF;
margin-top:10px;
float:left;
}

.content_text_doppelt{
width:340px;
min-height:100px;
background-color:#000FFF;
margin-top:10px;
float:left;
}


.ads_header{
width:300px;
height:20px;
background-color:#FF00FF;
margin-top:10px;
}

.ads{
width:300px;
min-height:200px;
background-color:#00FFFF;
margin-top:10px;
}

.content_ads
{
position:absolute;
top:188px;
left:700px;
float:right;
width:300px;
min-height:1000px;
background-color:#CC0000;
}

</style>


</head>

<body>
<div class="wrapper">
<div class="header">
<div class="header_in_left">LOGO</div>
<div class="header_in_middle">Banner 1</div>
<div class="header_in_right">Banner 2</div>
</div>
<div class="contentwrapper">
<div class="menue">Menu</div>
<div class="content">
	<div class="content_leibnitz">
		<div class="content_header">Überschrift</div>
		<div class="content_text">text</div>
		<div class="content_header_doppelt">Überschrift</div>
		<div class="content_header_doppelt" style="margin-left:10px;">Überschrift</div>
		<div class="clear"></div>
		<div class="content_text_doppelt">text1</div>
		<div class="content_text_doppelt" style="margin-left:10px;">text2</div>
		<div class="clear"></div>
		<div class="content_header_doppelt">Überschrift</div>
		<div class="content_header_doppelt" style="margin-left:10px;">Überschrift</div>
		<div class="clear"></div>
		<div class="content_text_doppelt">text1</div>
		<div class="content_text_doppelt" style="margin-left:10px;">text2</div>
		<div class="clear"></div>
		<div class="content_header">Überschrift</div>
		<div class="content_text">text</div>
		<div class="content_header">Überschrift</div>
		<div class="content_text">text</div>
		<div class="content_header">Überschrift</div>
		<div class="content_text">textis</div>
		
	</div>

	<div class="content_ads">
		<div class="ads_header">test 1</div>
		<div class="ads">banner 1</div>
		<div class="ads">banner 2</div>
		<div class="ads">banner 3</div>
		<div class="ads_header">test 2</div>
		<div class="ads">banner 1</div>
		<div class="ads_header">test 3</div>
		<div class="ads">banner 1</div>
	</div>
</div> <!-- content -->
</div> <!-- contentwrapper -->
<div class="footer">footer</div>
</div>
</body>
</html>

Vorschau auf Host
 
Hi,

ich hab hier mal die absolute Positionierung des Blocks .content_ads aufgehoben, die für dein Vorhaben hinderlich ist, indem der linke Spaltenblock .content_leibnitz mit einer float:left-Deklaration aus dem normalen Textfluß genommen wird, sowie die absolute Höhenangabe für .content in eine Mindesthöhe umgewandelt:
HTML: 
<!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=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<style>
body,td,th {
        font-family: Geneva, Arial, Helvetica, sans-serif;
}

html, body {height: 100%;}

* {
    margin: 0;
    padding: 0;
}

.header_in_left{
float:left;
width:200px;
height:99px;
background-color:#ff0000;
text-align:center;
}

.header_in_right{
float:left;
width:200px;
height:99px;
background-color:#00ff00;
text-align:center;
}

.header_in_middle{
float:left;
width:600px;
height:99px;
background-color:#0000ff;
text-align:center;
}

.wrapper{
position:absolute;
width:1000px;
left:50%;
margin-left:-500px;
background-color:#FF00FF;
}

.clear {clear:both;}

.header{
width:1000px;
background-color:#eee;
height:110px;
}

.contentwrapper{
width:1000px;
background-color:#00ff00;
}

.footer{
width:1000px;
background-color:#ff0000;
height:30px;
}

.menue{
width:1000px;
height:78px;
background-color:#FFFF00;
}

.content{
background-color:#000000;
color:#fff;
min-height:1000px;
}

.content_leibnitz {
float:left;
width:700px;
}

.content_header{
width:690px;
height:20px;
background-color:#FF00FF;
margin-top:10px;
float:left;
}

.content_text{
width:690px;
min-height:100px;
background-color:#000FFF;
margin-top:10px;
float:left;
}

.content_header_doppelt{
width:340px;
height:20px;
background-color:#FF00FF;
margin-top:10px;
float:left;
}

.content_text_doppelt{
width:340px;
min-height:100px;
background-color:#000FFF;
margin-top:10px;
float:left;
}

.ads_header{
width:300px;
height:20px;
background-color:#FF00FF;
margin-top:10px;
}

.ads{
width:300px;
min-height:200px;
background-color:#00FFFF;
margin-top:10px;
}

.content_ads{
float:right;
width:300px;
min-height:1000px;
background-color:#CC0000;
}


.clearfix:after {
content:".";
display:block;
height:0;
font-size:0;
clear:both;
visibility:hidden;
}
.clearfix {display:inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height:1%;}
.clearfix {display:block;}
/* End hide from IE-mac */
</style>


</head>

<body>
<div class="wrapper">
<div class="header">
<div class="header_in_left">LOGO</div>
<div class="header_in_middle">Banner 1</div>
<div class="header_in_right">Banner 2</div>
</div>
<div class="contentwrapper">
<div class="menue">Menu</div>
<div class="content clearfix">
        <div class="content_leibnitz">
                <div class="content_header">Überschrift</div>
                <div class="content_text">text</div>
                <div class="content_header_doppelt">Überschrift</div>
                <div class="content_header_doppelt" style="margin-left:10px;">Überschrift</div>
                <div class="clear"></div>
                <div class="content_text_doppelt">text1</div>
                <div class="content_text_doppelt" style="margin-left:10px;">text2</div>
                <div class="clear"></div>
                <div class="content_header_doppelt">Überschrift</div>
                <div class="content_header_doppelt" style="margin-left:10px;">Überschrift</div>
                <div class="clear"></div>
                <div class="content_text_doppelt">text1</div>
                <div class="content_text_doppelt" style="margin-left:10px;">text2</div>
                <div class="clear"></div>
                <div class="content_header">Überschrift</div>
                <div class="content_text">text</div>
                <div class="content_header">Überschrift</div>
                <div class="content_text">text</div>
                <div class="content_header">Überschrift</div>
                <div class="content_text">textis</div>

        </div>

        <div class="content_ads">
                <div class="ads_header">test 1</div>
                <div class="ads">banner 1</div>
                <div class="ads">banner 2</div>
                <div class="ads">banner 3</div>
                <div class="ads_header">test 2</div>
                <div class="ads">banner 1</div>
                <div class="ads_header">test 3</div>
                <div class="ads">banner 1</div>
        </div>
</div> <!-- content -->
</div> <!-- contentwrapper -->
<div class="footer">footer</div>
</div>
</body>
</html>


mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück