Div Höhe automatisch "verlängern"

Philro · 30. Mai 2013

Überschrift ist vllt. nicht ganz richtig aber ich habe folgendes Problem:

Bin jetzt dabei mir nen eigenes Wordpress Theme zu basteln. Stoße aber schon auf das erste Problem:
hier der Teil der index.php:

PHP:

<body>
     <div id="header"></div>
     <div id="navigation"><a>Home,Unterkunft,Mietwagen,Info,Kontakt</a>
      <div id="test"><a>dfsdfkdsfsdfsd&ouml;lfsdlfsdflslf</a></div>
     </div>
     <div id="wrapper">
        <div id="main">
            <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
            <h2><?php the_title(); ?></h2>
            <div class="entry">
            <?php the_content(); ?>
            </div>
            <?php endwhile; endif; ?>
        </div>
        <div id="sidebar">
        <a>Testdfdf</a>
        </div>
     </div>
     <div id="footer"><p>Copyright usw. usf. und das soll einmal lnger gehen</p></div>

und hier die dazugeöhrige Style.css:

HTML:

/*
Theme Name: Test-Theme
Theme URI: www.brigitte-in-spanien.de
Description: Test Theme für meinen WordPress Blog
Author: ich
Author URI: http://a+b.de
*/

* {
margin: 0;
}

body {
color: #222;
background: #000000;
}
#header {
background-color: #00FF00;
padding: 70px;
}

#navigation{
height: 45px;
background: url(images/menubg.png) repeat-x;
padding: 15px;
}
#wrapper {
background-color: #f3e7d9;
width: 960px;
min-height: 700px;
margin: auto;


}
#main {
width: 600px;
padding: 10px;
background-color: #808000;
float: left;
}

#sidebar {
width: 300px;
background-color: #800080;
float: left;
padding: 10px;
}

#footer {
background-color: #00FFFF;
padding: 20px;
clear: both;
}
#navigation a {
font-family: Verdana;
margin-left: 450px;
color: white;
}

#test {
margin: auto;
height: 45px;
width: 980px;
background: url(images/blin.png);
z-index: 2;
margin-top: 5px;
}

Das Problem dabei ist,dass der Main-Div sich immer unten aus dem wrapper div schiebt:

der soll dich aber automatisch verlängern. Wie mach ich das?

Quaese · 5. Juni 2013

Hi,

du musst dafür sorgen, dass nach gefloateten Bereichen der normale Textfluss wieder hergestellt wird. Hierfür kannst du eine Hilfsklasse in deinem CSS notieren:

Code:

.clearfix:after {
    content: ".";
    display: block;
    height: 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 */

Die Klasse musst du noch im Element mit der ID wrapper einfügen.

Code:

<div id="wrapper" class="clearfix">

Ciao
Quaese

Div Höhe automatisch "verlängern"

Philro

Grünschnabel

Quaese

Moderator

Neue Beiträge