[css] colums in IE vs Firefox - Softwareontwikkeling

zaterdag 23 september 2006 04:07

Acties:

Verwijderd

Topicstarter

Ik probeer een website te maken met 2 kolomen welke binnen een main area komen, maar ik blijf prutsen en kom er niet uit. Ik heb een test bestandje gemaakt om mezelf alleen op dit probleem te concentreren. De html en css zoals ze in IE6 wel werken:

<body>
<div ID="main">
<div ID="pagetitle">title</div>
<div ID="block_1"> test block1 </div>
<div ID="block_2"> text block2 </div>
</div>
</body>

body {
padding: 0px
margin: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-align: center;
color: #000000;
}
#main {
width: 800px;
border: 1px solid black;
padding: 0px;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
text-align: left;
}
#pagetitle {
background-color:blue;
}
#block_1 {
float:left;
width: 50%;
background-color:red;
}
#block_2 {
float:left;
width: 50%;
background-color:brown;
}

In firefox 1.5.0.6 echter vallen staan block_1 en block_2 nu echter buiten de main div.
Dit heb ik kunnen oplossen door de css file te veranderen in dit:

#block_1 {
float:right;
width: 50%;
background-color:red;
}
#block_2 {
width: 50%;
background-color:brown;
}

Maar dan gaat het in IE weer niet goed. Nu wordt de width van block_2 gehalveerd. (behalve dat nu de kolomen van plaats wisselen, maar dat is natuurlijk makkelijk genoeg op te lossen) Wanneer ik de width 50% vervang door een pixel formaat komen in IE de kolomen niet meer naast elkaar te staan, of er zit een leeg stukje tussen de kolommen als ik ze maar smal genoeg maak dat ze wel naast elkaar komen. Indien ik 100% kies voor block2, is er nog steeds een wit stukje in IE en gaat kolom2 verder onder kolom1 in Firefox....
wie kan mij vertellen wat ik verkeerd doe en hoe ik op nette manier wel kan zorgen dat de kolommen naast elkaar komen en binnen de main div blijven staan ?

[ Voor 12% gewijzigd door Verwijderd op 23-09-2006 04:24 ]

zaterdag 23 september 2006 09:10

Acties:

Rowanov

Kop eens wat anders...

De float clearen met een overflow: hidden; of overflow: auto; op je parent element (#main)

(Dan wel je eerste oplossing met floats gebruiken.)

[ Voor 23% gewijzigd door Rowanov op 23-09-2006 09:11 ]

zaterdag 23 september 2006 09:21

Acties:

marko77

je eerste oplossing werkt hier gewoon.

Geef de main maar eens een hoogte van b.v. 200px, dan zie je dat de kolommen er echt wel in zitten.

Volgens mij denk je dat ze er buiten vallen omdat de floated divjes de hoogte van de main niet correct beïnvloeden. Dat komt doordat je de floats niet cleared.
voeg onderstaande toe na block_2 en dan werkt het goed.

<div style="clear:both;"></div>

inline styles is niet zo mooi, maar het gaat ff om het idee

Mijn rig

zaterdag 23 september 2006 09:51

Acties:

Rowanov

Kop eens wat anders...

marko77 schreef op zaterdag 23 september 2006 @ 09:21:
Volgens mij denk je dat ze er buiten vallen omdat de floated divjes de hoogte van de main niet correct beïnvloeden. Dat komt doordat je de floats niet cleared.
voeg onderstaande toe na block_2 en dan werkt het goed.

<div style="clear:both;"></div>

inline styles is niet zo mooi, maar het gaat ff om het idee

Je hebt gelijk dat het een float probleem is (zoals ik al aangaf), maar waarom zou je een float clearen met een extra element als het ook met 1 css property kan en zonder extra elementen?

zaterdag 23 september 2006 15:38

Acties:

Verwijderd

Topicstarter

Bedankt, aangezien ik ook graag weet wat ik precies aan het doen ben zal ik nog wel even gaan googlen wat dan clearen precies betekend en doet (yep, ik ben compleet css noob), maar dat gaat wel lukken.