hoogte div in Firefox/Explorer

Status
Niet open voor verdere reacties.
F

Frenske123

Terugkerende gebruiker
Lid geworden
2 jul 2007
Berichten
1.260
hallo


Onderstaande code css;

de left en right div staan in de div main
als hiervan de hoogte wordt aangepast door het toevoegen van elementen
(in de div left en right) gaat deze in explorer mee, indien height gezet in de div main op 100%

echter in Firefox werkt dit niet ( height 100%) wel met een vaste waarde.


Is hier een oplossing voor, zou handig zijn als de div main zich in hoogte zou aanpassen aan de inhoud e,d ??!

o,a geprobeerd;
min-height: 100%; hier kom ik niet verder mee



Code: 
body{
    margin:6px;
    padding:0px;
    background:#333333 url(../img/bgr/grijswit.gif);

}

#main{
	margin:0px auto;
	width:780px;
	/*min-height: 100%; */ height:666px;
	background-color:#666;
	padding:0px;
	color:#EF8812;
	background:#696969 url(../img/bgr/grijswit-licht.gif);
	border-top-width: 3px;
	border-right-width: 3px;
	border-bottom-width: 3px;
	border-left-width: 3px;
	border-top-style: none;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-right-color: #000269;
	border-bottom-color: #000269;
	border-left-color: #000269;
	border-top-color: #000269;
	
}
#head{
    margin:0px auto;
    font:bold 12px Arial,Helvetica,sans-serif;
    padding:0px;
    color:#00C;
    width:780px;
    height:171px;
    background:#FFF url(../img/logo.jpg);
    border-width:3px 3px 0px;
    border-style:solid solid none;
    border-color:#000269 #000269;
}

#left{
    color:#000;
    background:#FFF;
    font:bold 11px/1.8em Arial,Helvetica,sans-serif;
    float:left;
    width:420px;
    border:solid #00C 2px;
    display:inline;
    margin:25px 0px 30px 25px;
    padding:8px;
}

#right{
    color:#000;
    background:#FFF;
    font:bold 11px/1.8em Arial,Helvetica,sans-serif;
    float:right;
    width:242px;
    border:solid #EF8812 2px;
    display:inline;
    margin-top:40px;
    margin-right:25px;
    margin-bottom:30px;
    padding:8px;
}

#footer{
	margin:0px auto;
    width:780px;
    height:44px;
    padding:10px 0px 0px 0px;
    border-width:3px 3px;
    border-style:none solid solid;
    border-color:#000269 #000269;
    background:#EF8812;
    font:small-caps bold 12px Arial,Helvetica,sans-serif;

    
}
 
Waarom zou je willen dat je div een hoogte heeft van 100%?

Ik kom het wel vaker tegen, maar het is echt nutteloos
 
dicabrio zei:
Waarom zou je willen dat je div een hoogte heeft van 100%?

Ik kom het wel vaker tegen, maar het is echt nutteloos
Klik om te vergroten...


Als ik de inhoud van de #left en #right verleng , zou de #main ook langer moeten worden,
tenminste dat probeer ik hiermee te bereiken!!
 
Frenske123 dit is niet het geval.

als een element float heeft het de eigenschap niet meer in de normale pagina flow te zitten.

Float zegt het al het drijft er boven. Het gaat dan als het ware niet meer een reactie aan met niet andere floatende elementen. (Ik hoop dat dit een beetje duidelijk is)

om een niet floatend element te laten samen werken met een floatend element kun je wel het een en ander doen.

HTML: 
<div id="nietfloat">
  <div class="welfloat"></div>
  <div class="welfloat"></div>
  <div class="clear"></div>
</div>

je ziet hier boven dat 2 elementen wel floaten maar de container niet. en het derde element heeft een clear. Hierdoor gaat ie een reactie aan met floatende elementen.

wat je even kunt doen is het volgende:
kopieer volgende code en haal de class"clear" eens weg en voeg het weer toe. Haal ook eens de <div class="clear"> helemaal weg . Je ziet dan het effect van wat clear doet met de floatende elementen en speel er even mee. Hierdoor krijg je een beetje een gevoel hoe het werkt:
HTML: 
<html>
	<head>
		<style>
			
			#nietfloat {
				border: 1px solid black;
				width: 300px;
			}
			
			.welfloat {
				border: 1px solid red;
				width:  148px;
				height: 100px;
				float: left;
			}
			
			.clear {
				border: 1px solid green;
				clear: both;
				background-color: #333;
			}
			
		
		</style>
	</head>
	<body>
		<div id="nietfloat">
			<div>tekst</div>
			<div class="welfloat">el1</div>
			<div class="welfloat">el2</div>
			<div class="clear">clear el</div>
		</div>
	</body>
</html>
 
float

Hallo Dicabrio,

Bedant vor de genomen moeite, :thumb:

Ik dacht wel dat het iets met float te maken had,
ik moet jou uitleg nog eens op mijn gemak bekijken.

Hou pas ik dit nou in mijn code toe, vul ik de linkse <div class="welfloat">

op met tekst, zodat deze verticaal langer wordt , wordt de div clear ook hoger??
 
wat je kunt doen is de
<div class="welfloat">el1</div>
te vullen met info... dus "el1" vervang je door tekst

bv:
<div class="welfloat">sfsfjdlskf sddfljl jflsd fdlsfj</div>

en je moet dan bijvoorbeeld de "height" property van de .welfloat uit de style halen, dan groeit het element mee met de inhoud van je tekst.
Als je dit dan opslaat en bekijkt in je browser zul je zien wat voor effect dat heeft.

De div clear zal altijd dezelfde hoogte behouden alleen zal onder de welfloat elementen blijven hangen. Hij komt dus lager op de pagina te staan.

Ik hoop dat ik je zo voldoende info heb gegeven. Tip: speel even een beetje met css properties weghalen om te zien wat het effect is. Wanneer je dit niet doet leer je niet wat een eigenschap is van een property ;)

Succes.
 
Bedankt

Dicabrio , bedankt voor de genomen moeite, hier kan ik wat mee experimenteren :thumb:
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan