Problemen met float:left

**Dieter V** · 29-04-2009, 11:51

HTML:

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>Untitled Document</title>
<link rel="STYLESHEET" href="beerventure.css" type="text/css"/>
</head>
<body>
<div id="holder">
  <div id="boven"> <img src="Logo.gif" width="458" height="114" alt="BeerVenture" />
    <div id="menuHolder">
      <ul id="menu">
        <li><img src="Home.gif" width="74" height="25" alt="Home" /></li>
        <li><img src="YourPage.gif" width="107" height="25" alt="Your Page" /></li>
        <li><img src="Reviews.gif" width="92" height="25" alt="Reviews" /></li>
        <li><img src="Beers.gif" width="73" height="25" alt="Beers" /></li>
        <li><img src="About.gif" width="58" height="25" alt="About" /></li>
      </ul>
      <div class="dummy"></div>
    </div>
  </div>
  <div id="content">
    <p>content </p>
    <p>d </p>
    <div id="miniBoxes">
      <div id="miniboxHolder">
        <div id="miniboxTop"></div>
        <div id="miniboxMiddle">
          <p>NEW USERS</p>
          <p>qsfdf</p>
          <p>qsdf</p>
          <p>dfdsf</p>
        </div>
        <div id="miniboxBottom"></div>
      </div>
      <div id="miniboxHolder" class="rechterMiniBox">
        <div id="miniboxTop"></div>
        <div id="miniboxMiddle">
          <p>NEW BEERS</p>
          <p>qsfdf</p>
          <p>qsdf</p>
          <p>dfdsf</p>
        </div>
        <div id="miniboxBottom"></div>
      </div>
      <div class="dummy"></div>
    </div>
    <div id="boxHolder">
      <div id="boxTop"></div>
      <div id="boxMiddle">
        <p>new reviews hier :D </p>
        <p>qsfdf</p>
        <p>qsdf</p>
        <p>dfdsf</p>
      </div>
      <div id="boxBottom"></div>
    </div>
  </div>
  <div id="footer">BEERWORLD</div>
</div>
</body>
</html>

CSS:

Code:

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

body {
  font-family: Tahoma;
  background-image:url(bg_body.png);
}
#content{
background:#FFFFFF;
border: 3px solid #000000;
padding-bottom:15px;
}
#menu{
    text-align:right;
}
#headerimg{
    text-align:left;
}
#footer{
    text-align:right;
}
#holder{
    margin-left:auto;
    margin-right:auto;
    width:900px;
    margin-top:-8px;
}
#boxHolder{
    width:842px;
    margin-left:auto;
    margin-right:auto;
    clear:both;
}
#boxMiddle{
    background-image: url(boxMidden.gif);
    margin-top:-16px;
    margin-bottom:-16px;
    padding-left:20px;
}
#boxTop{
    background-image: url(boxBoven.gif);
    height:20px;
}
#boxBottom{
    background-image: url(boxOnder.gif);
    height:20px;
}
#miniboxHolder{
    width:400px;
    margin-left:auto;
    margin-right:auto;
    float:left;
}
#miniboxTop{
    background-image: url(miniBoxBoven.gif);
    height:20px;
}
#miniboxBottom{
    background-image: url(miniBoxOnder.gif);
    height:20px;
}
#miniboxMiddle{
    background-image: url(miniBoxMidden.gif);
    margin-top:-16px;
    margin-bottom:-16px;
    padding-left:20px;
}
#miniBoxes{
padding-left:25px;
margin-bottom:20px;
}
.rechterMiniBox{
    padding-left:37px;
}
.dummy {
    clear: both; 
    height:  0px; 
    line-height: 0px;
}
#menu li{
display: block;
float:left;
}
#menuHolder{
border: 3px solid #000000;
float:left;
}

Probleem: Het menu moet normaal naast het logo komen te staan, iemand enig idee waarom hij dit niet doet?

**Joris M.** · 29-04-2009, 11:55

Al geprobeerd om de div menuHolder een breedte mee te geven in de css...

Dit kan je probleem misschien al verhelpen

**Dieter V** · 29-04-2009, 11:57

Ja dat heb ik al geprobeerd, maar blijft hetzelfde..

**gast2676** · 29-04-2009, 12:25

Als je het logo ook op float:left; zet moet het werken

**Dieter V** · 29-04-2009, 13:07

Bedankt, zo werkt het idd :), alleen ziet het er in Firefox en Internet Explorer niet helemaal hetzelfde uit :S

FF:
http://img186.imageshack.us/img186/1756/59092249.jpg

IE:
http://img521.imageshack.us/img521/11/10415150.jpg

HTML:

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>Untitled Document</title>
<link rel="STYLESHEET" href="beerventure.css" type="text/css"/>
</head>
<body>
<div id="holder">
  <div id="boven">
    <div id="logo"><img src="Logo.gif" width="458" height="114" alt="BeerVenture" /> </div>
    <div id="menuHolder">
      <ul id="menu">
        <li><img src="Home.gif" width="74" height="25" alt="Home" /></li>
        <li><img src="YourPage.gif" width="107" height="25" alt="Your Page" /></li>
        <li><img src="Reviews.gif" width="92" height="25" alt="Reviews" /></li>
        <li><img src="Beers.gif" width="73" height="25" alt="Beers" /></li>
        <li><img src="About.gif" width="58" height="25" alt="About" /></li>
      </ul>
    </div>
    <div class="dummy"></div>
  </div>
  <div id="content">
    <p>content </p>
    <p>d </p>
    <div id="miniBoxes">
      <div id="miniboxHolder">
        <div id="miniboxTop"></div>
        <div id="miniboxMiddle">
          <p>NEW USERS</p>
          <p>qsfdf</p>
          <p>qsdf</p>
          <p>dfdsf</p>
        </div>
        <div id="miniboxBottom"></div>
      </div>
      <div id="miniboxHolder" class="rechterMiniBox">
        <div id="miniboxTop"></div>
        <div id="miniboxMiddle">
          <p>NEW BEERS</p>
          <p>qsfdf</p>
          <p>qsdf</p>
          <p>dfdsf</p>
        </div>
        <div id="miniboxBottom"></div>
      </div>
      <div class="dummy"></div>
    </div>
    <div id="boxHolder">
      <div id="boxTop"></div>
      <div id="boxMiddle">
        <p>new reviews hier :D </p>
        <p>qsfdf</p>
        <p>qsdf</p>
        <p>dfdsf</p>
      </div>
      <div id="boxBottom"></div>
    </div>
  </div>
  <div id="footer">BEERWORLD</div>
</div>
</body>
</html>

CSS:

Code:

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

body {
  font-family: Tahoma;
  background-image:url(bg_body.png);
}
#content{
background:#FFFFFF;
border: 3px solid #000000;
padding-bottom:15px;
}
#menu{
    text-align:right;
}
#headerimg{
    text-align:left;
}
#footer{
    text-align:right;
}
#holder{
    margin-left:auto;
    margin-right:auto;
    width:900px;
    margin-top:-8px;
}
#boxHolder{
    width:838px;
    margin-left:auto;
    margin-right:auto;
    clear:both;
}
#boxMiddle{
    background-image: url(boxMidden.gif);
    margin-top:-16px;
    margin-bottom:-16px;
    padding-left:20px;
}
#boxTop{
    background-image: url(boxBoven.gif);
    height:20px;
}
#boxBottom{
    background-image: url(boxOnder.gif);
    height:20px;
}
#miniboxHolder{
    width:400px;
    margin-left:auto;
    margin-right:auto;
    float:left;
}
#miniboxTop{
    background-image: url(miniBoxBoven.gif);
    height:20px;
}
#miniboxBottom{
    background-image: url(miniBoxOnder.gif);
    height:20px;
}
#miniboxMiddle{
    background-image: url(miniBoxMidden.gif);
    margin-top:-16px;
    margin-bottom:-16px;
    padding-left:20px;
}
#miniBoxes{
padding-left:25px;
margin-bottom:20px;
}
.rechterMiniBox{
    padding-left:37px;
}
.dummy {
    clear: both; 
    height:  0px; 
    line-height: 0px;
}
#menu li{
display:inline;
}
#menuHolder{
float:left;
width:500px;
margin-top:73px;
height:25px;
}
#logo{
float:left;
width:390px;
}

**Tom Heek** · 29-04-2009, 13:12

dan maak je een aparte css aan voor internet en daar in zet je:
margin-top: aantal pixels;
Aanvullend bericht:
bij je header en menu

**yorrick hendrixen** · 02-05-2009, 17:44

zowizo altijd in px typen niet met 100 % of iets dergelijks want 10 % kan in IE weer wat anders zijn dan firefox, werkt altijd heel krom ;)

Problemen met float:left