IE reageert anders.

**Mischa van Gelder** · 19-02-2009, 10:03

Hoi

Ik ben een website aan het maken voor een collega.
Dat moet een vak in het midden zijn, en links en rechts moet er een afbeelding staan (gebruik nu eventjes gewoon een background kleurtje)

Maar nu ontstaat er een probleem in IE, althans op mijn beeldscherm.
IE7 heb ik, daarin gooit hij het rechtervak, de #right onder de #left
en niet naast de subcontainer.
Zulke kunstjes doet IE ook als iets te breed is, en het dus niet pas.
maar 25+25+50 is bij mij nog altijd 100.
Maak ik van de right 24% dan past ie prima.
Maar dat is niet de oplossing, hij moet t gewoon doen met 25+25+50 nietwaar?

Als ik het in IEtester doe, laat ie het overigens wel gewoon goed zien, alleen in mijn browser gooit ie m dus naar beneden.

In Safari en Firefox doet ie het prima

Dat probeer ik zo op te lossen:

css:

body {
margin: 0;
padding: 0;
}

#container {
width: 100%;
height: 100%;
position: absolute;
}

#left {
width: 25%;
height: 100%;
position: relative;
float: left;
background-color: #000000;
}

#subcontainer {
width: 50%;
height: 100%;
position: relative;
float: left;
background-color: #FFFFFF;
}

#right {
width: 25%;
height: 100%;
position: relative;
float: left;
background-color: #000000;
}

html:

<div id="container">
<div id="left"></div>
<div id="subcontainer"></div>
<div id="right"></div>
</div>

**Edwin P.** · 19-02-2009, 10:42

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head><style type="text/css">
body,html {
margin: 0;
padding: 0;
height: 100%;
}
#container {
width: 100%;
height: 100%;
min-height: 100%;
}
#left {
width: 25%;
height: 100%;
float: left;
background-color: #000000;
}
#right {
width: 25%;
height: 100%;
float: right;
background-color: #ccc;
}
</style></head>
<body>
<div id="container">
<div id="left"></div>
<div id="right"></div>
</div>

logisch redeneren helpt niet in IE,
de middencontainer hoeft geen 50% dan is het opgelost ( in mijn oplossing heb ik hem helemaal weggelaten ) IE heeft iets tegen 100%
Doctype toevoegen is belangrijk omdat IE dan anders interpreteert, right div float: right; meegeven,
verder heb ik een hoop overbodige positioneringen weggelaten
Let op : dit is enkel getest in IE6

**Mischa van Gelder** · 19-02-2009, 11:04

Bedankt!

Waarom laat je alle positions weg?
Zijn die niet belangrijk?

doctype etc heb ik wel in het originele bestand, maar had alleen de dingen hier neergezet die voor jullie belangrijk waren.

**Edwin P.** · 19-02-2009, 11:11

position (relative,fixed,absolute) zonder een positie toe te kennen ( top: **px; left: **%; enz. ) heeft weinig nut
De midden container kan je behouden als je maar geen breedte toekent, 100%- 2* 25% is ook 50%, alleen IE heeft moeite met een exacte opvulling...je kan ook bijvoorbeeld de 25% breedte rechts laten vallen natuurlijk en de 50% in het midden behouden..

**Mischa van Gelder** · 19-02-2009, 16:09

Dus ik kan die position eigenlijk altijd wel weglaten als ik niet gebruik maak van top: 50% of left: 50% en margin-left: -25% etc.

En wat nu als ik de container dit heb:

#container {
width: 800px
height: 400px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -400px;
margin-top: -200px;
}

Wat voor position moeten dan die items daarna hebben?
Dus bijvoorbeeld in de container zit de header:

#header {
width: 800px;
height: 100px;
}

Moet die dan altijd een position: relative mee hebben?

**Merijn V** · 20-02-2009, 12:32

position weglaten geeft altijd terug: position static, dus al laat je het weg, je krijgt toch een position mee. Ik zou gewoon position: relative mee geven.. En het is onzin, je hoeft gepositioneerde elementen NIET VERPLICHT een breedte mee geven.. Divs zijn namelijk block elementen, en gaan dus gewoon mee in de flow..

Als je position: absolute gebruikt echter, is het wel beter om een top en een left te definieren. Dat is voor de semantische opmaak een stukje netter.

ps. je container kun je ook gewoon relative doen, en dan margin: 0px auto;
hierdoor wordt het altijd gecentreerd. Ook als je je beeld verkleint, dan krijg je niet dat je slechts de helft van de pagina kunt lezen omdat de rest verdwijnt.

**Mischa van Gelder** · 24-02-2009, 10:26

Oke super!

IE reageert anders.