Toon posts:

[css] parent element verticaal uitrekken door child (float)

Pagina: 1
Acties:

donderdag 1 december 2005 11:22

Acties:

Verwijderd

Topicstarter
offtopic:
Kom weer even overwaaien van de buren - ben zo weer weg...


Ben druk bezig met diverse css box-tutorials maar ik heb nu een situatie waar ik niet uitkom. Ik verwacht dat de oplossing vrij simpel is, maar ik wil graag even de achterliggende gedachte juist uitgelegt krijgen zodat ik er daadwerkelijk iets van leer.

De situatie is als volgt;
Afbeeldingslocatie: http://www.streamingmediadesign.nl/got/gotfloat1.gif

Echter, als ik de inhoud van een #artikel dermate groot maak dat het artikelelement noodgedwongen naar onder verlengt moet worden, dan rekt #container niet mee;
Afbeeldingslocatie: http://www.streamingmediadesign.nl/got/gotfloat2.gif

Ik heb even gekeken wat de oorzaak is en dat was redelijk snel gevonden; het komt omdat de #artikel elementen de stijleigenschap "float:left;" meekrijgen. Echter, dit is noodzakelijk omdat de elementen elkaar horizontaal moeten opvolgen.

Kan iemand uitleggen wat ik verkeerd doe, maar eigenlijk, welke gedachte ik aan moet houden als ik op deze manier werk met boxes?

Gebruikte style;

code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

div.artikel {
width: 100px;
float: left;
border-width: 0px 0px 1px 0px;
border-style: solid;
border-color: #cecece;
padding-right: 24px;
color: #255080;
padding-bottom: 10px;
}

div.container {
clear: left;
width: 620px;
background-color: yellow;
}


Als het kan liggen aan eventuele parent-elementen, dit geheel bevindt zich namelijk weer in een x-aantal div's i.v.m. de layout van de website, dan moet het even gemeld worden. Ik zal dan extra relevante code posten.

donderdag 1 december 2005 11:31

Acties:
  • crisp
  • Registratie: Februari 2000
  • Laatst online: 00:22

crisp

Devver

Pixelated

bekend probleem; 2 mogelijke oplossingen - belangrijk is in ieder geval dat je #container geen vaste hoogte geeft:
1) zet een overflow: hidden of auto op je #container
2) zet na je laatste float een element met clear: both

hth

Intentionally left blank

donderdag 1 december 2005 11:35

Acties:

Verwijderd

Wat een toeval. Ik ben toevallig gisteravond tegen hetzelfde probleem aangelopen en was al op zoek naar een oplossing. In mijn geval gaat het om m'n website in wording, waar ik m'n hoofd content gecentreerd wil hebben. Die gecentreerde content-div wil ik opvullen met een hele berg divs om zo blokjes content te kunnen maken...

Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

#test
{
background-color: #F4BC10;
font-family: arial, sans-serif;
text-align:center;
color:#333333;
width:100%;
margin: 0px auto;
}

#main
{
width:750px;
margin:0px auto;
/*text-align:left;*/
background-color: #000000;
}

#mainbody
{
width:725px;
margin:0px;
background-color: #0FFFFF;
/*background-repeat:repeat-y;*/
/*float:left;*/
}

#bar2
{
float:left;
width:280px;
margin:0px;
background-color: #FFFF00;
}

#bar3
{
float:right;
width:420px;
margin:0px;
background-color: #FF00FF;
}


HTML:
1
2
3
4
5
6
7

<body>
<div id="test">
    <div id="main">
        <div id="mainbody">mies<div id="bar2">aap</div><div id="bar3">noot</div></div>
    </div>
</div>
</body>


In IE werkt het overigens wel 'goed'.

Edit: De tip met de 'overflow' werkt uitstekend!

[ Voor 14% gewijzigd door Verwijderd op 01-12-2005 11:37 ]

donderdag 1 december 2005 11:37

Acties:
  • crisp
  • Registratie: Februari 2000
  • Laatst online: 00:22

crisp

Devver

Pixelated

Ook in jouw geval geldt: zet een overflow: auto of hidden op je #mainbody
Wat IE doet druist tegen de specificaties in...

Intentionally left blank

donderdag 1 december 2005 11:55

Acties:

Verwijderd

Topicstarter
crisp schreef op donderdag 01 december 2005 @ 11:31:
bekend probleem; 2 mogelijke oplossingen - belangrijk is in ieder geval dat je #container geen vaste hoogte geeft:
1) zet een overflow: hidden of auto op je #container
2) zet na je laatste float een element met clear: both

hth
Bedankt Crisp, de tweede oplossing is tevens een goede en een logische die ik eigenlijk zelf ook wel had moeten kunnen bedenken... (makkelijk roepen als de oplossing reeds gemeld is natuurlijk, maar toch).

Ter informatie; als beide elementen (container en artikel) géén hoogte meekrijgen dan werkt het ook prima, zonder overflow- of clear oplossing. Als de artikel (child-) elementen wel een hoogte meekrijgen, dan moet je inderdaade een van jouw oplossingen gebruiken.

[ Voor 42% gewijzigd door Verwijderd op 01-12-2005 11:57 ]

donderdag 1 december 2005 12:04

Acties:
  • crisp
  • Registratie: Februari 2000
  • Laatst online: 00:22

crisp

Devver

Pixelated

Verwijderd schreef op donderdag 01 december 2005 @ 11:55:
[...]
Ter informatie; als beide elementen (container en artikel) géén hoogte meekrijgen dan werkt het ook prima, zonder overflow- of clear oplossing. Als de artikel (child-) elementen wel een hoogte meekrijgen, dan moet je inderdaade een van jouw oplossingen gebruiken.
In IE wellicht, maar dat is nou niet echt een goed referentiekader als het om CSS gaat...

Intentionally left blank

donderdag 1 december 2005 12:35

Acties:

Verwijderd

Topicstarter
crisp schreef op donderdag 01 december 2005 @ 12:04:
[...]

In IE wellicht, maar dat is nou niet echt een goed referentiekader als het om CSS gaat...
In Netscape 8.0 en Firefox 1.0.3 lijkt het ook te werken?

donderdag 1 december 2005 12:37

Acties:
  • crisp
  • Registratie: Februari 2000
  • Laatst online: 00:22

crisp

Devver

Pixelated

Verwijderd schreef op donderdag 01 december 2005 @ 12:35:
[...]


In Netscape 8.0 en Firefox 1.0.3 lijkt het ook te werken?
Antiek buggy spul :P

In Firefox 1.5 heb ik het net even getest en daar wordt de container toch echt niet automagisch uitgerekt zonder overflow: auto of hidden ;)

Intentionally left blank

donderdag 1 december 2005 13:09

Acties:

Verwijderd

Topicstarter
crisp schreef op donderdag 01 december 2005 @ 12:37:
[...]

Antiek buggy spul :P

In Firefox 1.5 heb ik het net even getest en daar wordt de container toch echt niet automagisch uitgerekt zonder overflow: auto of hidden ;)
Was al overtuigd van je oplossing, maar nu helemaal :P
Pagina: 1
Reageer