28172 sujets

CSS et mise en forme, CSS3

[Résolu] 4 div de largueur fluide

Bonjour à tous,

ayant effectué quelques recherches sur le forum et d'autre site et n'ayant pas trouvé la solution à mon problème, je me permet de vous demandez de l'aide.
Avant tous, je ne sais pas si se que je veux faire est possible ... mais je pense que vous allez vite me le dire Smiley lol .

Voici se que je cherche à développer : 4 div de taille variable mais identique (selon la largeur de la page) contenu dans une div qui fait 80% de la largeur de la page. Mieux que du blabla Smiley langue ... du code.


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Document sans nom</title>
<style type="text/css">
body {
	margin: 0;
	padding: 0;
	text-align:center;
}

.container {
	border:1px solid blue;
	width: 80%;
	max-width: 1260px;
	min-width: 780px;
	margin: 0 auto;
	overflow:hidden;
}

.block-1 {
	border:2px solid red;
	float: left;
}
.block-2 {
	border:2px solid red;
	float: left;
}
.block-3 {
	border:2px solid red;
	float: right;
}
.block-4 {
	border:2px solid red;
	float: right;
}

</style>
</head>

<body>

<div class="container">
    <div class="block-1">block 1</div>
    <div class="block-2">block 2</div>
    <div class="block-3">block 3</div>
    <div class="block-4">block 4</div>
</div>

</body>
</html>


Je voudrais que les 4 div "block-?" prenne toute la place de la div "container" en ayant les mêmes largeur.

J'espère que j'était assez clair et que vous pourrait m'aider.

Cordialement.
Modifié par Titanium (14 Mar 2013 - 12:04)
Bonjour,

Essayes le display table sur ton contenu et table-cell sur les 4 blocs.

Par contre, ça ne marchera que sur les navigateurs récents.
Merci de répondre aussi vite Smiley cligne .
Je viens d'essayer, mais cela ne fonctionne pas. J'ai fait quelque recherche sur le display:table; et fait quelque test, mais rien de concluant.
Aurait tu une autre idée stp ?

En se qui concerne les navigateurs récents, c'est pas un souci, je développe une petite interface web interne à une société et il n'ont droit qu'a utilisé IE9 (dans quelque semaine IE10).
J'ai trouvé ... comme d'habitude petite erreur d'interprétation.

faut retirer le float: left; de chaque block


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Document sans nom</title>
<style type="text/css">

body {
	margin: 0;
	padding: 0;
	text-align:center;
}

.container {
	border:1px solid blue;
	width: 80%;
	max-width: 1260px;
	min-width: 780px;
	margin: 0 auto;
	overflow:hidden;
	display:table;
}

.block-1 {
	display:table-cell;
	border:2px solid red;
}
.block-2 {
	display:table-cell;
	border:2px solid red;
}
.block-3 {
	display:table-cell;
	border:2px solid red;
}
.block-4 {
	display:table-cell;
	border:2px solid red;
}

</style>
</head>

<body>

<div class="container">
    <div class="block-1">block 1</div>
    <div class="block-2">block 2</div>
    <div class="block-3">block 3</div>
    <div class="block-4">block 4</div>
</div>

</body>
</html>

<div class="container">
    <div class="blocks block-1">block 1</div>
    <div class="blocks block-2">block 2</div>
    <div class="blocks block-3">block 3</div>
    <div class="blocks block-4">block 4</div>
</div>

.container {
	width: 80%;
}

.blocks{
display:inline-block;
width:25%;
}
polpaulin : pour moi ton code ne fonctionne pas (testé sous IE9 & 10, FF et Chrome). Seulement 3 div sont en ligne, la quatrième fait un retour à la ligne.

Pour ceux qui veulent, j'ai simplifier le code :


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Document sans nom</title>
<style type="text/css">

body {
	margin: 0;
	padding: 0;
	text-align:center;
}

.container {
	border: 1px solid blue;
	width: 80%;
	max-width: 1260px;
	min-width: 780px;
	margin: 0 auto;
	display: table;
}

.container div {
	border: 1px solid red;
	display: table-cell;
}

</style>
</head>
<body>
<div class="container">
    <div>block 1</div>
    <div>block 2</div>
    <div>block 3</div>
    <div>block 4</div>
</div>
</body>
</html>
Tu peux aussi faire .container > * au lieu de .container div pour rendre ton sélecteur indépendant de ton balisage (bon ok, c'est une micro-optimisation Smiley langue ).
jb_gfx a écrit :
Tu peux aussi faire .container > * au lieu de .container div pour rendre ton sélecteur indépendant de ton balisage (bon ok, c'est une micro-optimisation Smiley langue ).


Merci pour l'information, je ne connaissait pas, ça pourrait être utile Smiley cligne
Titanium a écrit :
polpaulin : pour moi ton code ne fonctionne pas (testé sous IE9 &amp; 10, FF et Chrome). Seulement 3 div sont en ligne, la quatrième fait un retour à la ligne.
Ca marche très bien il faut juste ajuster les largeurs, il est bien évident que si 4 div font chacun 25% et que tu rajoute une bordure il y aura un retour
il faut uniquement ajuster
polpaulin a écrit :
... il est bien évident que si 4 div font chacun 25% et que tu rajoute une bordure il y aura un retour. Il faut uniquement ajuster

Oui, sauf si l'élément est définit en " box-sizing: border-box " : les bordures sont alors prises en compte dans le calcul global de la taille de l'élément... et ça change la vie de l'intégrateur !
Modifié par Olivier C (15 Mar 2013 - 17:48)
Olivier C a écrit :

Oui, sauf si l'élément est définit en &quot; box-sizing: border-box &quot; : les bordures sont alors prises en compte dans le calcul global de la taille de l'élément... et ça change la vie de l'intégrateur !

oui il faut ajuster c'est tout et ça marche très bien 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" /> 
    <title>inline-block</title>
    <style>
        html {
            font-size: 62.5%;
            text-align:center;
        }
        body {
            font-size: 1.4rem;
            text-align:center;
            margin:auto;
    } 
    nav{
    	border:1px solid black;
    }  
    nav div{
	    display:inline-block;
	    width:24.4%;
	    margin:auto 0.2%;
	    border:10px solid red;
	    box-sizing: border-box;
	    -moz-box-sizing: border-box;
	    padding:10px;
    }
    nav div:first-child{
	    margin-left:0px;
    }
    nav div:last-child{
	    margin-right:0px;
    } 
    </style>
</head>
<body>
	<header>header</header>
	<nav>
		<div>#1</div>
		<div>#2</div>
		<div>#3</div>
		<div>#4</div>
	</nav>
	<section>content</section>
	<footer>footer</footer>
</body>
</html>

Modifié par polpaulin (16 Mar 2013 - 16:27)
lddsoft a écrit :
OK, mais uniquement à partir de IE8... Smiley smile

Si vous avez plus de 0.5% de IE7 à l'heure actuelle... faites-moi le savoir, ça m'intéresse.
Sujet clos
Aller à