✔ Div sollen sich anpassen (100%)

Status
Nicht offen für weitere Antworten.
I

Identität

Erfahrenes Mitglied
Ich habe ein Bild, weil ich das nicht beschreiben kann. Die Boxen sollen aufjedenfall mit nach unten wandern. Ob das überhaupt möglich ist?

Hier das Bild: http://saved.im/nja0owrvymy/bild.jpg

index
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>
 <link rel="stylesheet" type="text/css" href="style.css">
 <title>Titel</title>

</head>
<body>
<div id="full" class="clearfix">
        <div id="header"><img src="files/header.gif" alt="Header" width="800" height="132" /></div>
        <div id="left"><img src="files/navicell.gif" alt="mehr als nur bauen" width="35" height="468" align="bottom" /></div>
        <div id="navi">
            <ul class="navi">
                          <li><p class="navigation_headline">Navi</ul>
        </div>
  <div id="content">
            <div class="content">
                     INHALT
            </div>
  </div>
</div>
<div class="copyright">&copy; 2007</div>
</body>
</html>


style.css
Code: 
#full{
    background-color:#fff;
    width:800px;
    height:auto;
    border:1px solid #e0dfdf;
    padding:0;
    margin:0 auto;
    text-align:left;
}

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


#header{
    width:800px;
}

#left{
    background-image:url(files/navicellbg.gif);
    width:35px;
    float:left;
    height: 300px;
}

#navi{
    width:129px;
    float:left;
    background-color:#faf7f7;
    border-left:1px solid #e0dfdf;
    height:480px;
}

#content{
    float:left;
    width:624px;
    padding:5px;
    background-color:#fff;
    border-left:1px solid #e0dfdf;
    border-top:1px solid #e0dfdf;

}

A.navi:link,A.navi:visited,A.navi:hover
{
display:block;
line-height: 16px;
font-size:12px;
font-family:arial, Helvetica, sans-serif;
width: 129px;
text-decoration:none;
text-align:left;
border-top:#FAF7F7 1px solid;
border-bottom:#FAF7F7 1px solid;
}

A.navi:link,A.navi:visited
{
color:#000;
}

A.navi:hover
{
color:#fff;
background-color:#ff0000;
border-top:1px solid #000;
border-bottom:1px solid #000;
text-align:right;
}
ul.navi {
margin:0;
padding:0;
list-style-type:none;
}

.content {
empty-cells:show;
vertical-align:top;
font-size:13px;
font-family:arial, Helvetica, sans-serif;
text-align:left;
}
.content:link {
empty-cells:show;
vertical-align:top;
font-size:13px;
font-family:arial, Helvetica, sans-serif;
text-align:left;
text-decoration:underline;
color:#000;
}
.content:hover {
text-decoration:none;
}
.topic {
padding-left:4px;
background: #ff0000;
height:17px;
font-size:12px;
text-align:left;
color:#fff;
font-weight:bold;
font-family:arial, Helvetica, sans-serif;
}

.copyright {
padding-top:3px;
empty-cells:show;
vertical-align:top;
font-size:12px;
font-family:arial, Helvetica, sans-serif;
text-align:center;
}

.contab{
background-color:#faf7f7;
padding:6px;
}

.hauskata{
margin-top:5px;
margin-bottom:10px;
padding-left:3px;
background-color:#be0000;
color:#efefef;
font-weight:bold;
font-size:12px;
}

.navigation_headline{
margin:0 0 5px 0;
font-size:12px;
height: 15px;
font-family:arial, Helvetica, sans-serif;
width: 129px;
text-align:left;
border-top:#ccc 1px solid;
border-bottom:#ccc 1px solid;
background-color:#efefef;
text-align:center;
}

Vielen Dank für eure Hilfe!
 
Hey Maik,
geht das nicht einfacher? Die reden dort ja von einem Hintergrundbild. Finde ich jetzt nicht die beste Lösung. Kennt ihr vielleicht noch einen anderen Weg?
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück