[html/css] div height firefox afhankelijk van content - Softwareontwikkeling

donderdag 2 juni 2005 23:03

Acties:

Verwijderd

Topicstarter

Sinds kort ben ik bezig sites te ontwikkelen waarbij de tabellen plaats moeten maken voor divs, gepositioneerd met css. Nu loop ik tegen een probleem aan met de height van een div in firefox. De omgeving die ik gebouwd heb werkt fijn in IE, in de huidige vorm. Firefox stribbelt echter tegen: die lijkt de height afhankelijk te maken aan de content die er in de div staat.

Wat is nu het probleem... Mijn pagina is een omgeving met een verschillende achtergrondkleur aan beide kanten, welke ik heb aangemaakt door middel van divs. Gecentreerd staat een site van 770px breed, verdeeld in een menu links, en een content gedeelte rechts. De content staat in een wit vlak, dat in principe 100% height moet hebben. Firefox geeft echter een height terug, zo groot als de content in de div [container].

code:

html, body, #holder { min-height: 100%; width: 100%; height: 100%;}
html>body, html>body #holder { height: auto;}
#holder { position: absolute; top: 0; left: 0;}

#leftcolor {
clear:both;
position:absolute;
top:0px;
left:0px;
height:100%;
width:50%;
background-color:#251E62;
border:0px;
margin:0px;
padding:0px;
box-sizing: border-box;
-moz-box-sizing: border-box;
}

#rightcolor {
clear:both;
position:absolute;
top:0px;
left:50%;
height:100%;
width:50%;
background-color:#92C83E;
border:0px;
margin:0px;
padding:0px;
box-sizing: border-box;
-moz-box-sizing: border-box;
}

.container {
clear:both;
position:relative;
top:0px;
left:50%;
height:100%;
width:770px;
background:#FFFFFF url('gfx/bg_menu.gif');
background-repeat:repeat-y;
border:0px;
margin:0px;
padding:0px;
margin-left:-385px;
margin-top:0px;
box-sizing: border-box;
-moz-box-sizing: border-box;
}

.logo {
position:absolute;
top:30px;
left:30px;
height:56px;
width:168px;
border:0px;
margin:0px;
padding:0px;
box-sizing: border-box;
-moz-box-sizing: border-box;
}

.deco_mid {
position:absolute;
top:0px;
left:158px;
height:322px;
width:137px;
border:0px;
margin:0px;
padding:0px;
background:url('gfx/deco_mid.gif');
background-repeat:no-repeat;
box-sizing: border-box;
-moz-box-sizing: border-box;
}

.deco_left {
position:absolute;
bottom:0px;
left:0px;
height:134px;
width:35px;
border:0px;
margin:0px;
padding:0px;
background:url('gfx/deco_left.gif');
background-repeat:no-repeat;
box-sizing: border-box;
-moz-box-sizing: border-box;
}

BODY {
background:#FFFFFF;
margin:0px;
padding:0px;
}

code:

<html>
<head>
<title>Body & Mind Nutrition</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>

<div id="holder">
    <div id="leftcolor">&nbsp;</div>
    <div id="rightcolor">&nbsp;</div>

    
    <div class="container">

        <div class="deco_mid">&nbsp;</div>
        <div class="deco_left">&nbsp;</div>

        <div class="logo">[img]"gfx/logo_nutrition.gif"[/img]</div>
    
    <br><br><br><br>

    </div>

</div>

</body>
</html>

Een online voorbeeld staat hier: http://www.man84.com/bandm/index.html

Mijn vraag is nu eigenlijk hoe ik de hoogte van div-container in Firefox gewoon 100% te krijgen, ongeacht wat de content van die div is. Zoals in IE dus wel goed wordt gerenderd, laat FF alles nog beetje buggy zien... (alhoewel, IE zal in dit geval wel buggy zijn, maargoed)

Ook na enkele search-resultaten met betrekking tot min-height, floats etc. te hebben gekeken kom ik er niet uit. Op dit moment nogal einde raad..

[ Voor 26% gewijzigd door Verwijderd op 02-06-2005 23:07 ]

donderdag 2 juni 2005 23:15

Acties:

Rowanov

Kop eens wat anders...

Wat jij zoekt heet Faux-Collumns, je wilt zo te zien je achtergrond door laten lopen. In het geval dat je echt 100% hoogte bedoelt; dat is hij nu in FF.

Toelichting: Faux Collumns faked kolommen en dat hij al 100% hoogte is kan je zien met de WebDeveloper toolbar van Firefox.

[ Voor 24% gewijzigd door Rowanov op 02-06-2005 23:15 ]

donderdag 2 juni 2005 23:26

Acties:

Verwijderd

Topicstarter

Dat artikel op ALA had ik ook al doorgenomen, maar is volgens mij niet van toepassing op mijn probleem, of ik zie/snap die toepassing in combinatie met mijn probleem niet.

Aangezien ik een background heb die ik al uit divs heb opgemaakt, en daar overheen nog iets soortgelijks heen moet komen, alleen met andere kleuren/images. Echter moet alles in totaal even hoog blijven (100%). Verschillende aanpassingen in de css zorgden er voor dat of de div-holder niet doorloopt, of de div-container niet doorloopt...

Faux-Collumns heeft het namelijk over een bg-figuur, het gaat er dus om dat de div waarin die bg moet worden aangeroepen de juiste hoogte heeft... of lul ik nu echt helemaal onzin

donderdag 2 juni 2005 23:37

Acties:

Rowanov

Kop eens wat anders...

Waarom zou je dat allemaal met div's oplossen als je de body ook een bg kunt geven?

edit:
Anywayz, feit blijft dat je div's genaamd leftcolor en rightcolor al een hoogte van 100% hebben.

[ Voor 42% gewijzigd door Rowanov op 02-06-2005 23:42 ]

donderdag 2 juni 2005 23:48

Acties:

Verwijderd

Topicstarter

Omdat de pagina in zijn geheel gecentreerd moet zijn, met aan beide kanten een verschillende achtergrondkleur welke ik mijns inziens dan niet kan ondervangen met een bg-image omdat je dan in verschillende resoluties problemen krijgt?

De divs leftcolor en rightcolor gedragen zich overigens prima, probleem zit hem in de div container die zich maar niet als 100% wil aanpassen...

vrijdag 3 juni 2005 09:07

Acties:

Verwijderd

Faux columns is your best bet. Je maakt de achtergrond plaat 2000px breed (covered de meeste resoluties) De rest van de plaatjes ga je daar overheen zetten.:
mijn faux voorbeeld

vrijdag 3 juni 2005 09:17

Acties:

Verwijderd

Topicstarter

@bakman, laat ik hier maar eens op doorborduren dan... Lijkt dus inderdaad wel zo te moeten gaan werken. Ongetwijfeld bedoelde rowanov dit ook, maar had ik de uitleg van ALA niet helemaal door