[css]div breekt uit parent div - Softwareontwikkeling

donderdag 31 maart 2005 12:15

Acties:

Topicstarter

in het kort:

HTML:

<div>
  <div>
    <div id="table">
      <table>...</table>
    </div>
  </div>
</div>

De <div> met id="table" bevat een float:right;.
Probleem is dat deze div uit zijn parent breekt, klik!
de volledige code:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> voorbeeldje </TITLE>
<META NAME="Generator" CONTENT="">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style type="text/css">
html, body {
    height:100%;
    margin:0px;
    padding: 0px;
}
body {
    font-family: "Trebuchet MS", verdana, helvetica, arial, sans-serif; 
}
p {
    margin:0px;
    padding:0px;
}
#content {
    border-left:1px solid #666;
    border-right:1px solid #666;
    border-bottom:1px solid #666;
    background-color:#fff;
    padding:35px 80px 35px 35px;
    margin:0px;
    color:#333;
    font-size:12px;
    clear:both;
}
#contactInfoBox{
    border:1px solid #cc6600;
    float:right;
    margin-right:50px;
    padding-left:5px;
    padding-right:20px;
}
</style>
</HEAD>
<BODY>
<div id="content">
    <div style="padding-top:20px;">
        <div id="contactInfoBox">
            <table>
            <tr><td colspan="2">Blaat blaat </td></tr>
            <tr><td colspan="2">Blaat blaat </td></tr>
            <tr><td>Blaat blaat </td><td colspan="2">Blaat blaat </td></tr>
            <tr><td >Blaat blaat </td><td >Blaat blaat </td></tr>
            </table>
        </div>
    </div>
</div>
</BODY>
</HTML>

Ik vermoed dat het iets te maken heeft met de float:right;. Is er een mogelijkheid om child-div's altijd binnen parents te houden?

[ Voor 26% gewijzigd door mmedia op 31-03-2005 12:16 ]

donderdag 31 maart 2005 12:19

Acties:

Eskimootje

ja hoor de parent element meegeven : overflow: hidden; dan valt alles wat er overheen valt weg.

donderdag 31 maart 2005 12:21

Acties:

Rowanov

Kop eens wat anders...

edit:
Hier stonds wat doms

[ Voor 83% gewijzigd door Rowanov op 31-03-2005 12:21 ]

donderdag 31 maart 2005 12:27

Acties:

Verwijderd

da's idd een eigenschap van float, het element wordt dan uit de flow gehaald

de manier om dit op te lossen is je div om die table display: inline-block te geven en de breedte die je wenst en de div daar omheen text-align: right; te geven

dit werkt echter nergens, dus een andere oplossing is om na je float een <br style="clear: both"> op te nemen

donderdag 31 maart 2005 12:43

Acties:

Verwijderd

Verwijderd schreef op donderdag 31 maart 2005 @ 12:27:
da's idd een eigenschap van float, het element wordt dan uit de flow gehaald

de manier om dit op te lossen is je div om die table display: inline-block te geven en de breedte die je wenst en de div daar omheen text-align: right; te geven

dit werkt echter nergens, dus een andere oplossing is om na je float een <br style="clear: both"> op te nemen

Om even TS op gang te helpen: Eric Meyer legt in onderstaande link goed uit wat het gedrag van float is.

http://www.complexspiral.com/publications/containing-floats/

donderdag 31 maart 2005 13:07

Acties:

Verwijderd

w3c doet dat toch ook prima? waarom lezen mensen dat nooit?

http://www.w3.org/TR/CSS21/box.html
http://www.w3.org/TR/CSS21/visuren.html
http://www.w3.org/TR/CSS21/visudet.html

donderdag 31 maart 2005 13:08

Acties:

JHS

Splitting the thaum.

Een andere oplossing:

Cascading Stylesheet:

1	#content { overflow: auto; }

Zie hier.

DM!

donderdag 31 maart 2005 13:34

Acties:

Verwijderd

w3c doet dat toch ook prima? waarom lezen mensen dat nooit?

Omdat specificaties vooral bedoelt zijn voor diegene die ze implementeren in software, niet voor de gebruiker van de betreffende specificatie. Alhoewel het uiteraard wel het meest complete naslagwerk betreft van hetgeen geimplementeerd zou moeten zijn.

donderdag 31 maart 2005 19:29

Acties:

mmedia

Topicstarter

Verwijderd schreef op donderdag 31 maart 2005 @ 12:27:
dit werkt echter nergens, dus een andere oplossing is om na je float een <br style="clear: both"> op te nemen

Die br truuk werkt niet lekker in IE, met hr gaat het al beter. Nog netter is om het volgende toe te passen (als je pixel perfect probeert te ontwerpen):

Cascading Stylesheet:

div.clearer {
  clear:both;
  line-height: 0;
  height:0;
  padding:0;
  margin:0;
  visibility:hidden;
}

En een div toevoegen met deze klasse als laatste child.

donderdag 31 maart 2005 19:37

Acties:

Rowanov

Kop eens wat anders...

mmedia schreef op donderdag 31 maart 2005 @ 19:29:
[...]

Die br truuk werkt niet lekker in IE, met hr gaat het al beter. Nog netter is om het volgende toe te passen (als je pixel perfect probeert te ontwerpen):
Cascading Stylesheet:
1
2
3
4
5
6
7
8
div.clearer {
  clear:both;
  line-height: 0;
  height:0;
  padding:0;
  margin:0;
  visibility:hidden;
}
En een div toevoegen met deze klasse als laatste child.

In wat verschilt dit van alle bovengenoemde oplossingen en wat stelt die laatste div semantisch voor? Ik vind dit dus niet netter aangezien je een element gaat toevoegen, puur om je layout goed te krijgen. Als je die oplossing van Eric Meyer beter had gelezen had je gezien dat display: block; dit allemaal oplost.
Ik raad de TS aan de oplossing van Anne (dus uit de post van JHS) te gebruiken, aangezien die oplossing puur css is en er aan het eigenlijke document niets veranderd wordt.

[ Voor 3% gewijzigd door Rowanov op 31-03-2005 19:38 ]

vrijdag 1 april 2005 11:01

Acties:

mmedia

Topicstarter

Rowanov schreef op donderdag 31 maart 2005 @ 19:37:
[...]
Ik raad de TS aan de oplossing van Anne (dus uit de post van JHS) te gebruiken, aangezien die oplossing puur css is en er aan het eigenlijke document niets veranderd wordt.

Alleen moet je bij deze oplossing om het in IE te laten werken weer:

Cascading Stylesheet:

1	_height:1%;

toevoegen. Lijkt me ook een hack.

vrijdag 1 april 2005 12:07

Acties:

Verwijderd

So?