[CSS] gefloate div laat content "ontsnappen"

vrijdag 2 april 2010 14:49

Acties:

0 Henk 'm!

Topicstarter

hey tweakers,

ik ben mij recent wat gaan verdiepen in CSS en probeer nu een 2 colum lay-out te maken, alles staat nu goed qua positie, maar mijn gefloate content div die rekt niet meer als er meer content in de div komt te staan, de background houd gewoon op, en de content loopt gewoon onder mijn footer door, terwijl die wel clear: both; heeft

plaatje:

Afbeeldingslocatie: http://i40.tinypic.com/2exvtza.png

de blauwe en oranje div's zijn gefloat, de rode footer heeft clear:both; wat mij vooral verbaasd is dat de blauwe div niet doortrekt en de content zo laat ontsnappen

code:
CSS:

code:

#wrapper {
    background: pink;
    width: 90%;
    min-width: 800px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    height: 100%;
  
}
#header {
    position: relative;
    width: 100%;
    height: 150px;
    background: green;
}
#navbar {
    position: relative;
    float: left;
    width: 150px;
    height: 100%;
    background: orange;
}
#content {
    
    position: relative;
    float: left;
    width: 650px;
    height: 100%;
    background: blue;
}
#footer {
    clear: both;
    position: relative;
    width: 800px;
    height: 75px;
    background: red;
}

HTML:

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="/avics/css/template.css" />
  </head>
  <body>
      <div id="wrapper">
      
      <div id="header">header</div>
      <div id="navbar">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.</div>
      <div id="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
                Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisLorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</div>
      <div id="footer">footer</div>
      </div>
  </body>
</html>

vrijdag 2 april 2010 14:51

Acties:

0 Henk 'm!

Arnold

min-height ipv height voor #content

vrijdag 2 april 2010 14:53

Acties:

0 Henk 'm!

!GN!T!ON

Topicstarter

GS2K1 schreef op vrijdag 02 april 2010 @ 14:51:
min-height ipv height voor #content

#@!$#@$ en daar zit ik dan 2 uur op te zoeken en te klooien

dank je voor je snelle antwoord

vrijdag 2 april 2010 15:27

Acties:

0 Henk 'm!

Bosmonster

*zucht*

Css

min-width: 800px;
max-width: 800px;

Daar kun je dan weer gewoon width van maken

Vergeet trouwens niet dat IE6 geen min-height ondersteunt en height behandelt als min-height.

vrijdag 2 april 2010 17:06

Acties:

0 Henk 'm!

!GN!T!ON

Topicstarter

Bosmonster schreef op vrijdag 02 april 2010 @ 15:27:
[...]

Daar kun je dan weer gewoon width van maken

Vergeet trouwens niet dat IE6 geen min-height ondersteunt en height behandelt als min-height.

ja, daar was ik al achter

ik maak alles in firefox/chrome, en dan open ik het in IE en dan BAM! teh ugly

kk browser

Onderwerpen