wrapper/container mee laten groeien

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Meddiecap B

Meddiecap B

03/06/2010 16:21:08
Quote Anchor link
Hoi.

Ik heb een probleempje met een container div.

Dit is de CSS:

.container
{
width: 900px;
height: auto;
margin-left: auto;
margin-right: auto;
text-align: left;
/* Tot hier, om te centreren */
border: 1px solid #000;
}

.left {
float: left;
width: 200px;
height: 300px;
border: 1px solid #F00;
}

.middle {
float: left;
width: 494px;
height: 800px;
border: 1px solid #F00;
}

.right {
float: right;
width: 200px;
height: 300px;
border: 1px solid #F00;
}

Hoe zorg ik er nu voor dat de container div automatisch de hoogte krijgt van de grootste div die erin staat?
 
PHP hulp

PHP hulp

01/10/2020 15:26:53
 
Terence Hersbach

Terence Hersbach

03/06/2010 16:29:15
Quote Anchor link
Google even op clearfix
 
Meddiecap B

Meddiecap B

03/06/2010 16:45:52
Quote Anchor link
Opgelost. Bedankt voor de hulp.

Ik heb dit aan de .container toegevoegd:

content: ".";
display: inline-block;
 
Milo S

Milo S

03/06/2010 21:46:10
Quote Anchor link
.container
{
width: 900px;
height: auto;
margin-left: auto;
margin-right: auto;
text-align: left;
/* Tot hier, om te centreren */
border: 1px solid #000;
}

Je kan daar ook dit van maken :P

.container
{
width: 900px;
min-height: 500px;

margin: 0px auto;
overflow: hidden;
text-align: left;

border: 1px solid #000;
}
 
Terence Hersbach

Terence Hersbach

04/06/2010 07:16:51
Quote Anchor link
Meddiecap Bronneberg op 03/06/2010 16:45:52:
Opgelost. Bedankt voor de hulp.

Ik heb dit aan de .container toegevoegd:

content: ".";
display: inline-block;


Wat je beter kan doen is het volgende in je css bestand erbij zetten
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
 
.clearfix {
    display: inline-block;
}
 
html[xmlns] .clearfix {
    display: block;
}
 
* html .clearfix {
    height: 1%;
}

en in je html ipv:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
<div class="container"><div class="left"></div><div class="right"></div></div>


dit er van maakt:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
<div class="container clearfix"><div class="left"></div><div class="right"></div></div>
(letop de plek waar ik clearfix erbij heb gezet)

nu weet je zeker dat het in elke browser op dezelfde manier goed werkt.
 
Joakim Broden

Joakim Broden

04/06/2010 08:57:38
Quote Anchor link
Terence Hersbach, waarom gaan kloten met domme clearfix? Je kunt ook gewoon op de container een overflow:hidden; te doen, dit heeft het zelfde effect als een clearfixt
 
Terence Hersbach

Terence Hersbach

04/06/2010 13:31:29
Quote Anchor link
Oetzie en mijn achternaam op 04/06/2010 08:57:38:
Terence Hersbach, waarom gaan kloten met domme clearfix? Je kunt ook gewoon op de container een overflow:hidden; te doen, dit heeft het zelfde effect als een clearfixt

Ik zou even wat verder zoeken, overflow:hidden heeft namelijk nadelen, ondanks dat het lijkt dat hij hetzelfde doet.
Probeer nog maar eens bijvoorbeeld een element binnen de gefloate div net over de rand van je div te positioneren..
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.