[css] div height in mozilla - Softwareontwikkeling

maandag 12 mei 2003 09:28

Acties:

Topicstarter

Ik heb het volgende probleem met mijn website. Ik heb het layout gedaan met CSS, daarvoor heb ik een div "Container" gemaak en daarin heb ik al mijn div gestopt onder ander "Content".
Op het index pagina heb ik een weblog die 7 entries laat zien. In explorer rekt "Container" en "Content" zich automatisch om zich aan te passen aan het inhoud.
Maar in Mozilla rekt alleen de "Content" met de inhoud mee, "Container" blijft het zelfde. Als tijdelijke oplossing heb ik "Content" overflow op hidden gezet en de div height groter gemaakt.

Hier een stuk van de css code:

Cascading Stylesheet:

body {
    margin:0px;
    padding:0px;
    font-family:verdana, arial, helvetica, sans-serif;
    color:#333;
    background-color:white;
    }
    
#Container {
       width:650px;
        height: 2500px;
        margin-right:auto;
        margin-left:auto;
        margin-top:0px;
        padding:0px;
        text-align:left;
        border:1px solid #333;
        background-color: #fff;
    }

#Content {
    margin: 5px 5px 5px 5px;
    padding:0px;
    width:450px;
    font:11px/20px verdana, arial, helvetica, sans-serif;
    text-align: left;
    float: right;
    height: 2300px;
    overflow: hidden;
}

Het pagina is hier te zien http://members.lycos.nl/redhyde
En het complete stylesheet hier http://members.lycos.nl/redhyde/style.css

Nou is mijn vraag: is er een css oplossing om de "Container" div ook in mozilla automatisch aan te laten passen aan de inhoud?

Ik gebruik XHTML 1.0 Transitional doctype, ik heb al zonder de doctype geprobeerd.

Met google kwam ik deze oplossingen tegen:
http://www.xs4all.nl/~ppk/css2tests/100percheight.html
http://www.pixy.cz/blogg/clanky/css-minheight-hack.html

Ik heb beide geprobeerd, geen resultaat. Op GoT ook een search gedaan, kwam zelfde vraag als mijne tegen maar geen oplossing ervoor.

MacBook Pro 2019 | Oppo Reno 2 | Panasonic Lumix TZ70

maandag 12 mei 2003 09:47

Acties:

MAZZA

Barbie is er weer!

min-height in die container moet het werk doen als ik je vraag goed begrepen heb. Ik kan helaas je probleem niet bekijken vanaf m'n werk

Geen Mozilla namelijk

[ Voor 9% gewijzigd door MAZZA op 12-05-2003 09:48 ]

maandag 12 mei 2003 09:55

Acties:

Ms_Hyde

Topicstarter

Ik heb min-height geprobeerd, werkt ook niet. Ik heb hem alleen geprobeerd en samen het height op 100% en ook alleen height op 100%. Geen van die combinaties werkt.

MacBook Pro 2019 | Oppo Reno 2 | Panasonic Lumix TZ70

maandag 12 mei 2003 10:29

Acties:

crisp

Devver

Pixelated

Een float zit niet in de 'normal flow' van je containerbox. Wat je kan doen is een divje met een clear: right; aan het eind van je content zetten:

HTML:

<html>
<head>
<title>div</title>
<style type="text/css">

* {
  -moz-box-sizing: border-box;
}

#container {
  width: 100%;
  border: 1px solid #000000;
  padding: 10px;
  position: relative;
}

#float {
  width: 200px;
  height: 200px;
  border: 1px solid #000000;
  float: right;
}
#placeholder {
  clear: right;
}

</style>
</head>
<body>
<div id="container">
  <div id="float">float</div>
en nu een textje en nu een textje en nu een textje en nu een textje en nu een textje en nu een textje en nu een textje en nu een textje <br />
en nu een textje<br />
en nu een textje<br />
en nu een textje<br />
en nu een textje<br />
en nu een textje<br />
  <div id="placeholder">force container to expand</div>
</div>
</body>
</html>

[ Voor 15% gewijzigd door crisp op 12-05-2003 10:35 ]

Intentionally left blank

maandag 12 mei 2003 10:30

Acties:

Verwijderd

Je hebt in div#content float:right staan. Daardoor krijg je dat probleem.
Een oplossing is om die float:right weg te halen.
Anders zou clear:all nog kunnen werken.

maandag 12 mei 2003 11:00

Acties:

Ms_Hyde

Topicstarter

Ok..... Martijn22 ik kan die float: right; niet weghalen anders schuift mijn content box naar links en haalt hij mijn Menu box weg. Ik heb wel ff geprobeerd als container zich aanpast aan de inhoud zonder die float: right; in de content, maar hielp ook niet.

Crisp.. ik heb jou methode geprobeerd.....ik heb placeholder div na mijn conten div geplaats maar hij hielp niet plus heeft hij mijn Menu box, naar bendeden gestuurd.

Het was wel het proberen waard

MacBook Pro 2019 | Oppo Reno 2 | Panasonic Lumix TZ70

maandag 12 mei 2003 11:26

Acties:

Verwijderd

Sorry, ik had je probleem niet goed begrepen. Hier is wat je moet doen:
Je moet die grote hoogtes in #container en #content weghalen.
En je moet een <br clear="all"> zetten net voor <div id="foot">
Dan zou die het moeten doen (hier getest)
Iemand van got heeft me ook ooit geholpen met dit floating probleem:
http://realworldstyle.com/thumb_float.html

maandag 12 mei 2003 11:33

Acties:

Ms_Hyde

Topicstarter

Bedank!!
Ik heb de hoogtes weggehaald en <br clear="all"> gedaan, en hij werkt. In explorer en mozilla!
Ik ga nu meteen de paginas aan passen en online zetten.

MacBook Pro 2019 | Oppo Reno 2 | Panasonic Lumix TZ70

maandag 12 mei 2003 11:36

Acties:

Clay

cookie erbij?

je kan je element in moz ook een display:table-cell; geven. dat snapt IE toch niet, en dan werkt het ook, zonder clears of extra elementen.

Instagram | Flickr | "Let my music become battle cries" - Frédéric Chopin

maandag 12 mei 2003 12:01

Acties:

Verwijderd

Verrek, dat werkt! In #container --> display:table-cell;
Alleen staat nu alles wel helemaal links ipv in het midden. Wat zou daar nog aan te doen zijn? Of moet eigenlijk de hele inhoud dan opgemaakt worden als tabel-elementen?

maandag 12 mei 2003 12:17

Acties:

Ms_Hyde

Topicstarter

Maar als je de hele inhoud opmaak als tabel element, haal dat dan niet het eenvoudigheid van de div float weg? Dus wat betreft dat er weinig html code nodig is.

Trouwens ik heb de oplossing van <br clear="all" /> toegepast. Het ziet er veel beter uit!

MacBook Pro 2019 | Oppo Reno 2 | Panasonic Lumix TZ70

maandag 12 mei 2003 13:15

Acties:

Verwijderd

Het principe van css is dat je zoveel mogelijk opmaak-gerelateerde dingen stopt in stylesheets. Zo'n br tag is duidelijk opmaak gerelateerd en moet dus eigenlijk gedropt worden en de oplossing voor je probleem moet dan eigenlijk in je stylesheet zitten.

Ik zou alleen niet weten hoe je dat moet oplossen moet in dit geval met: display:table; display:table-row; en display:table-cell; Ik ben bang dat er dan ook html code moet worden toegevoegd.

Ik denk dat er trouwens nog andere manieren zijn om hetzelfde te bereiken zonder float of display:table-cell;
En dat is:
Alle floats verwijderen
position:relative; voor #container
position:absolute; left:0px; top:90px; voor #menu
margin: 5px 5px 5px 200px; voor #content;
Dit zou ook een manier kunnen zijn.