Höhen Probleme mit relativem Div

P

PhiRSl91

Grünschnabel
Hallo Leute,

ich habe ein kleines aber sehr hartnäckiges Problem, generell kenne ich mich gut mit CSS und HTML aus aber bei diesem Problem hänge ich schon seit Stunden fest und finde auch keine Lösung, ich hoffe ihr könnt mir helfen.

Zunächst einmal eine Beschreibung meiner Konstruktion der HTML-Seite

ich habe einen Wrapper, dieser ist das äußerste DIV (position: relativ), in dem Wrapper befindet sich ein Container, der meine Seite auf eine feste Breite von 1100px reduziert. (position: absolute)

In dem Container befinden sich 3 weitere divs, die alle position: relative sind. Zum einen der Header, der Content und der Footer. Mit Ausnahme des Headers, sind die DIV-Bereiche in der Höhe dynamisch. Womit wir auch schon beim Problem sind.

Das Content-Div wird mit weiteren Divs gefüllt, "ContentColumns" dieses haben eine relative position. Leider übernimmt der Content die Größe der ContentColumns nicht richtig.

Hier ist einmal der CSS-Code

Code: 
@charset "utf-8";
/* CSS Document */

/*------------------------
---------Defaults--------
-----------------------*/
body 
{         
  background: #feea8d;
  color: #000;
  font-family: Helvetica,Times,serif;
  margin: 0;
  padding: 0;
}

ul, ol, li, pre, form, html, p, blockquote, fieldset, input
{ 
  margin: 0; 
  padding: 0;
  list-style: none;
}

pre, code { font-size: 100%; }

img { border: 0; }

/*------------------------
-Primary Layout Elements-
-----------------------*/
#Wrapper
{
  left: 0px;
  position: relative;
  top: 0px;
  width: 100%;
}

#Container
{
  background: #FFF;
  left: 50%;
  margin-left: -550px;
  position: absolute;
  top: 0;
  width: 1100px;
}

#header { height: 500px; position: relative; width: 1100px; }

#content { position: relative; top: 10px; width: 1100px; }

#footer { padding-top: 20px; width: 1100px; position: relative; }

/*------------------------
-----Header Elements-----
-----------------------*/
.headerLogo
{
  top: 0px;
	left: 0px;
	position: absolute;
  	background-image: url(../images/Header.png);
	background-repeat: no-repeat;
	background-position: top;
	z-index: 2;
	overflow: visible;
	width: 1100px;
	height: 213px;
}

.headerSlider
{
  top: 100px;
	left: 0px;
	position: absolute;
	z-index: 1;
	width: 1100px;
	height: 400px;
}

/*------------------------
----Content Elements-----
-----------------------*/
.contentColumns { width: 330px; position: relative; float:left; }

.contentLeft { padding-top: 10px; padding-left: 25px; }

.contentMid { padding-top: 10px; padding-left: 20px; }

.contentRight { padding-top: 10px; padding-left: 20px; }

#content .contentBlockElement { padding-bottom: 10px; }

#content .contentBlockElement img 
{
 padding-top: 5px; 
 padding-bottom: 5px; 
 width: 330px; 
}

#content .contentBlockElement h1, h2, h3, h4, h5, h6, h7 {}

#content .contentBlockElement p
{
  line-height: 15px;
  width: 300px;
  padding-top: 5px;
  padding-bottom: 5px;
}

#content .contentBlockElement a
{
  left: 250px;
  position: relative;
  text-decoration: none;
}

#content .contentListElement
{
  padding-bottom: 20px;
  height: 110px;
  width: 330px;
  position: relative;
}

#content .contentListElement h1, h2, h3, h4, h5, h6, h7 { display: inline; }

#content .contentListElement img
{
  height: 110px;
  width: 110px;
  position: absolute;
}

#content .contentListElement object
{
  height: 110px;
  width: 110px;
  position: absolute;
}

#content .contentListElement p
{
  height: 100px;
  width: 200px;
  left: 130px;
  font-size: small;
  position: absolute;
}

#content .contentListElement a
{
  width: 80px;
  left: 250px;
  top:  80px;
  font-size: small;
  position: absolute;
  text-decoration: none;
}

/*------------------------
-----Footer Elements-----
-----------------------*/
#footer .footerColumn
{
  width: 150px;
  position: relative;
  padding-bottom: 20px;
  float: left;
  left: 25px;
}

#footer .footerColumn h1, h2, h3, h4, h5, h6, h7 { display: inline; }

#footer .footerColumn a { text-decoration: none; }
/*------------------------
----------Fonts----------
-----------------------*/
.blueFont {	color: #004c99; }

.blackFont { color: #222222; }

.continuousText { font-size: 13px; font-family: Arial, Times, Serif; }

.headLine
{
  display: inline;
  padding-top: 5px;
  font-size: 21px;
  font-family: Arial, Times, Serif;
}                                       

.footerHeadline { font-size: 12px; font-family: Arial, Times, Serif; }

.footerLinks { font-size: 11px; font-family: Arial, Times, Serif; }

und hier der HTML-Code:

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></title>
  <!--Layout-->	
  <link rel="stylesheet" type="text/css" href="css/layout.css">
</head>
<body>
  <div id="Wrapper">
      <div id="Container">  
          <div id="header">
            <a href="index.html" class="headerLogo"><div></div></a>
            <div class="headerSlider">
              	Hier wird der Slider sein
            </div>
          </div>
        <div id="content">
          <div class="contentColumns contentLeft">
            <div class="contentBlockElement">
              <img src="images/img3.png" />
              <h3 class="headLine blueFont">Denk dir was... bla</h3>
              <p class="continuousText blackFont">
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
                 sed diam voluptua. At vero eos et accusam et justo duo
              </p>
              <a class="continuousText blueFont" href="liesmehr.html">mehr lesen</a>
            </div>
            <div class="contentBlockElement">
              <img src="images/img3.png" />
              <h3 class="headLine blueFont">Denk dir was... bla</h3>
              <p class="continuousText blackFont">
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
                 sed diam voluptua. At vero eos et accusam et justo duo
              </p>
              <a class="continuousText blueFont" href="liesmehr.html">mehr lesen</a>
            </div>
          </div>
          <div class="contentColumns contentMid">
            <div class="contentBlockElement">
              <img src="images/img.png" />
              <h3 class="headLine blueFont">Denk dir was... bla</h3>
              <p class="continuousText blackFont">
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
                 sed diam voluptua. At vero eos et accusam et justo duo
              </p>
              <a class="continuousText blueFont" href="liesmehr.html">mehr lesen</a>
            </div>
            <div class="contentBlockElement">
              <img src="images/img.png" />
              <h3 class="headLine blueFont">Denk dir was... bla</h3>
              <p class="continuousText blackFont">
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
                 sed diam voluptua. At vero eos et accusam et justo duo
              </p>
              <a class="continuousText blueFont" href="liesmehr.html">mehr lesen</a>
            </div>
          </div>
          <div class="contentColumns contentRight">
            <h3 class="headLine blueFont">Bla bla bla denk dir was</h3>
            <div class="contentListElement">
              <img src="images/img2.png" />
              <p class="continuousText blackFont">
                Lorem ipsum dolor sit amet, con-<br>setetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut 
              </p>
              <a class="continuousText blueFont" href="liesmehr.html">mehr lesen</a>
            </div>
            <div class="contentListElement">
              <img src="images/img2.png" />
              <p class="continuousText blackFont">
                Lorem ipsum dolor sit amet, con-<br>setetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut 
              </p>
              <a class="continuousText blueFont" href="liesmehr.html">mehr lesen</a>
            </div>
          </div>
          <div class="contentOutsidePlaceHolder"></div>
        </div>
        <div style="clear:both;"></div>
       <div id="footer">
            <div class="footerColumn">
              <h3><a class="footerHeadline blueFont" href="">inhalt</a></h3>
              <li><a class="footerLinks blackFont" href="">inhalt</a></li>
              <li><a class="footerLinks blackFont" href="">inhalt</a></li>
              <li><a class="footerLinks blackFont" href="">inhalt</a></li>
              <li><a class="footerLinks blackFont" href="">inhalt</a></li>
              <li><a class="footerLinks blackFont" href="">inhalt</a></li>
              <li><a class="footerLinks blackFont" href="">inhalt</a></li>
            </div>  
            <div class="footerColumn">
              <h3><a class="footerHeadline blueFont" href="">inhalt</a></h3>
              <li><a class="footerLinks blackFont" href="">inhalt</a></li>
              <li><a class="footerLinks blackFont" href="">inhalt</a></li>
              <li><a class="footerLinks blackFont" href="">inhalt</a></li>
              <li><a class="footerLinks blackFont" href="">inhalt</a></li>
            </div>
            <div class="footerColumn">
                <h3><a class="footerHeadline blueFont" href="">inhalt</a></h3>
                <li><a class="footerLinks blackFont" href="">inhalt</a></li>
                <li><a class="footerLinks blackFont" href="">inhalt</a></li>
                <li><a class="footerLinks blackFont" href="">inhalt</a></li>
            </div>
            <div class="footerColumn">
                <h3><a class="footerHeadline blueFont" href="">inhalt</a></h3>
                <li><a class="footerLinks blackFont" href="">inhalt</a></li>
                <li><a class="footerLinks blackFont" href="">inhalt</a></li>
                <li><a class="footerLinks blackFont" href="">inhalt</a></li>
            </div>
            <div class="footerColumn">
                <h3><a class="footerHeadline blueFont" href="">inhalt</a></h3>
                <li><a class="footerLinks blackFont" href="">inhalt</a></li>
                <li><a class="footerLinks blackFont" href="">inhalt</a></li>
                <li><a class="footerLinks blackFont" href="">inhalt</a></li>
                <li><a class="footerLinks blackFont" href="">inhalt</a></li>
                <li><a class="footerLinks blackFont" href="">inhalt</a></li>
                <li><a class="footerLinks blackFont" href="">inhalt</a></li>
            </div>
        </div>
      </div>
  </div>
</body>
</html>

Ich hoffe ihr könnt mir bei dem Problem behilflich sein, denn ich verstehe nicht wo das Problem liegt, eine Erklärung zu der Lösung wäre perfekt.

Danke im Voraus.
 
Kann ich nicht reproduzieren. Im Grunde macht position relative oder absolute aber häufig (genau diese) Probleme, daher sollten sie vermieden werden. Das ist wie alle Fotos vom Urlaub auf den Boden legen und dann anfangen eines relativ zu verschieben. Der Rest wird nicht verschoben und Du merkst hoffentlich was für ein Korrekturaufwand dann an allen Ecken notwendig ist ;)

http://jsfiddle.net/4eFhj/
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück