Overflow et multi div

**Décibel** · 08/05/2013, 20h12

Bonjour,

Je souhaite faire une chose assez simple, mais rien ne marche...
Je veux mettre des div les uns à coté des autres et si cela dépasse l'écran qu'il y ait un overflow...
Voici le bout de code de ma page...

le css

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
.video {
	position:absolute;
	top:450px;
	width:100%;
	overflow : auto; 
	height : 480px; 
	display:inline;
}

le html

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<div class="video " align="center">
    <div id="mix" style="width:400px;height:450px;background-image:url(../../photos/22.jpg);float:left">
        	Titre video 1<br />
	<div style="width:300px;text-align:justify">bla bla</div>
    	</div>
    </div>

Le div "mix" se répète dans le div "video" autant qu'il y a de données.
Les div se mettent bien à coté les uns des autres, sauf que l'overflow est vertical et moi je le souhaite horizontal...

la valeur 480px n'est pas respectée...

**rodolphebrd** · 08/05/2013, 20h31

Bonjour,

vu ce que vous postez, je ne suis pas en mesure de bien situer votre problème.

Peut-être avec plus de code ou une page en ligne.

**Décibel** · 08/05/2013, 20h39

Merci pour votre réponse, je vais essayer de donner plus de code...

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div class="video " align="center">
  <div id="mix" style="width:400px;height:450px;background-image:url(../../photos/22.jpg);float:left">
  Titre video 1<br />
  <div style="width:300px;text-align:justify">bla bla</div>
  </div>
 
  <div id="mix" style="width:400px;height:450px;background-image:url(../../photos/22.jpg);float:left">
  Titre video 1<br />
  <div style="width:300px;text-align:justify">bla bla</div>
  </div>
 
  <div id="mix" style="width:400px;height:450px;background-image:url(../../photos/22.jpg);float:left">
  Titre video 1<br />
  <div style="width:300px;text-align:justify">bla bla</div>
  </div>
 
  <div id="mix" style="width:400px;height:450px;background-image:url(../../photos/22.jpg);float:left">
  Titre video 1<br />
  <div style="width:300px;text-align:justify">bla bla</div>
  </div>
</div>

Le div mix se répète...
Une fois que tout cela dépasse de l'écran, l'overflow est vertical et moi j'aimerais qu'il soit horizontal...
C'est à dire que j'aimerais que les div mix ne passent pas à la ligne et restent sur la même ligne...

**rodolphebrd** · 08/05/2013, 22h33

Voici une solution avec table-cell et en fixant un min-width aux classes .mix (et non ID):

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Document sans nom</title>
<style type="text/css">
 
.video {
        overflow : hidden;
        height : 480px;
        display:table;
}
.mix{
        display: table-cell;
        min-width:400px;
}
</style>
</head>
 
<body>
 
<div class="video " align="center">
    <div class="mix" style="width:400px;height:450px;background-image:url(http://lorempixel.com/200/200/food);">
        	Titre video 1<br />
	<div style="width:300px;text-align:justify">bla bla</div>
    	</div>
         <div class="mix" style="width:400px;height:450px;background-image:url(http://lorempixel.com/200/200/sports);">
        	Titre video 1<br />
	<div style="width:300px;text-align:justify">bla bla</div>
    	</div>
         <div class="mix" style="width:400px;height:450px;background-image:url(http://lorempixel.com/200/200/cats);">
        	Titre video 1<br />
	<div style="width:300px;text-align:justify">bla bla</div>
    	</div>
    </div>
</body>
</html>

**Décibel** · 08/05/2013, 22h40

Yes, les div se mettent bien sur une seule ligne, super !
Mais le scroll est en bas de page, pas sous les div...
J'ai essayé avec overflow:auto; mais cela ne change rien...

**rodolphebrd** · 08/05/2013, 22h56

En créant un DIV wrapper le problème semble résolu:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Document sans nom</title>
<style type="text/css">
#wrapper{
	max-width: 1000px;
	height:480px;
	overflow: hidden;
}
.video {
	display: table;
}
.mix {
	display: table-cell;
    min-width:400px;
	width:400px;
	height: 450px;
 
}
</style>
</head>
 
<body>
<div id="wrapper">
<div class="video " align="center">
  <div class="mix" style="background-image:url(http://lorempixel.com/200/200/food);"> </div>
  <div class="mix" style="background-image:url(http://lorempixel.com/200/200/sports);"> </div>
  <div class="mix" style="background-image:url(http://lorempixel.com/200/200/cats);"> </div>
  <div class="mix" style="background-image:url(http://lorempixel.com/200/200/food);"> </div>
</div>
</div>
</body>
</html>

**Décibel** · 08/05/2013, 22h57

Pardon, on a posté en même temps...
Je vais essayer !!

Merci !

Overflow et multi div

CSS

Vue hybride

Discussions similaires

Partager

Partager