aan alle goede dingen komt een eind, webmasterplein.net 2003 - 2013
wij danken jullie voor al mooie momenten die dankzij dit forum ontstonden - Derk, Rutger en Stef

Table zorgt voor sluiten div

Het echte opmaakwerk, alles vragen over HTMLen, CSSen en Javascripten.

Table zorgt voor sluiten div

Berichtdoor Johan » 14 jan 2011 14:42

Hai,


Ik ben bezig met een simpele pagina op te bouwen. Het idee is als volgt:

(header)
Introtekst
Tabellen (2 naast elkaar)
(footer)


De header, footer en introtekst zijn geen probleem. De tabellen in principe ook niet, totdat ik ze naast elkaar wil hebben met float: left; aan beide tables toe te voegen in de CSS. De div (#page) wordt dat gesloten waardoor de border die om die div heen zit opeens boven de tabellen al sluit. Als ik onder de tables nog tekst typ dan gaat die naast de tables verder en verschuift de border ook weer. Hierbij even de opzet:

Code: Selecteer alles
<body>
   <div id="header">
      <div id="logo">
      </div>
      <div id="note">
         <strong>Let op:</strong> ...
      </div>
   </div>
   <div id="page">
      <div id="intro">
         ...
      </div>
      <div id="payment">
         <div id="paypal">
         <table>
         ...
         </table>
         </div>
         
         <div id="wallie">
         ...
         </table>
         </div>
         
      </div>
      
   </div>
</body>


Code: Selecteer alles
body {
   background-image: url('bg.png');
   background-repeat: repeat-x;
   font-family: Arial, Calibri, Verdana, sans-serif;
}

#logo {
   background-image: url('header.png');
   background-repeat: no-repeat;
   height: 152px;
}

#note {
   margin-top: 50px;
   border: 2px solid #990000;
   color: #990000;
   max-width: 950px;
   margin-left: auto;
   margin-right: auto;
   font-size: 12px;
   padding: 2px;
}

#page {
   width: 900px;
   margin: auto;
   margin-top: 10px;
   border: 1px solid #000000;
   border-spacing: 3px;
}

#intro {
   margin-left: 3px;
   font-size: 13px;
}

#payment {
   margin-left: auto;
   margin-right: auto;
}

#paypal {
   float: left;
}

#wallie {
   float: left;
   margin-left: 100px;
}
Avatar gebruiker
Johan
wmpr
 
Berichten: 676
Geregistreerd: 07 jan 2008 15:42

Re: Table zorgt voor sluiten div

Berichtdoor Remi » 14 jan 2011 17:40

De div naar de payment div moet een clear: left; krijgen. Die heft zeg maar de float op.
Avatar gebruiker
Remi
wmpr
 
Berichten: 3010
Geregistreerd: 04 apr 2006 15:22

Re: Table zorgt voor sluiten div

Berichtdoor Johan » 15 jan 2011 12:12

Aah danku, het werkt :}
Avatar gebruiker
Johan
wmpr
 
Berichten: 676
Geregistreerd: 07 jan 2008 15:42

Re: Table zorgt voor sluiten div

Berichtdoor Remi » 15 jan 2011 17:44

Graag gedaan!
Avatar gebruiker
Remi
wmpr
 
Berichten: 3010
Geregistreerd: 04 apr 2006 15:22


Keer terug naar HTML, CSS, Javascript



cron