2 Div a la suite avec 1 en PX et l'autre en %

**tydoo34** · 16/01/2013, 01h17

Bonjour à tous !

Déja bonne année

J'éspére que cette année serras bonne en dev pour vous

Donc me voici ici pour une ptite question.

J'aimerais mettre deux div a la suite dans un page web en faisans que les deux div fasse la largeur de la page.

Tout ca en prenant en compte que la premiére div serra de 200px et la deuxiemme devra comblé le reste (en px ou en pourcentage).

Et les deux div auront un height de 100%

Merci de vos réponses

**Kaamo** · 16/01/2013, 10h28

Merci de vos réponses

Quelle est la question ou quelles sont les questions ? Tu coinces où ?

voir Mise en page CSS

**tydoo34** · 16/01/2013, 11h27

Enfaite la question c'est quel est le code pour que ca marche.

Car j'ai déja essauer plein de choses avec plein de position différente, et rien ne marche.

en gros :

fleft => float left

Code :

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

1
2
3
 
<div class="fleft"></div>
<div class="fleft"></div>

Ca c'est mon code de base.

Mon but c'est de faire ca.

Le div 1 fait 200px et le div 2 fait le reste

Et les deux div vont jusqu'en bas

**Kaamo** · 16/01/2013, 12h38

Enfaite la question c'est quel est le code pour que ca marche.

Celui que tu vas concevoir

Le forum est là pour compléter l'aide fournie par les nombreuses ressources disponibles (FAQ, tutoriel, sujets similaires déjà traités). Cela doit être le dernier recours, pas le premier

Comment as tu défini la classe CSS fleft ?

Le div 1 fait 200px et le div 2 fait le reste

Tu dis clairement qu'il faut deux div différentes donc pourquoi ne faire qu'une classe CSS ?

**tydoo34** · 16/01/2013, 13h24

La class fleft n'est composée que du float left.

**tydoo34** · 16/01/2013, 13h33

Voila le code que j'ai fait, mais la div 2 ne fait que la longueur de la lettre

Code :

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

1
2
<div class="fleft" style="width:200px;background:red;display:inline-block;">TEST1</div>
<div class="fleft" style="background:blue;display:inline-block;">TEST2</div>

Et j'ai oublié de dire, mais il faut que les deux div sois cote a cote

**Muchos** · 16/01/2013, 13h53

Nommer sa classe "float left" mais utiliser INLINE-BLOCK, vous trouvez pas ça étrange?

Utiliser FLOAT. Je suis sûr que vous trouverez comment

**tydoo34** · 16/01/2013, 13h55

Donc il faut que je vire le inline block ?

**Muchos** · 16/01/2013, 21h04

@tydoo34 n'a visiblement pas compris le principe d'un forum -_-

Voici une solution possible à son problème :

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
 
<!doctype html>
<html lang="fr-FR">
<head>
	<meta charset="UTF-8" />
	<title>Blocs float left</title>
	<style type="text/css">
.fleft {
        min-height: 200px;
}
.first {
        float: left;
        width: 200px;
        background:red;
}
.last {
        background: blue;
}
        </style>
</head>
<body>
	<div class="fleft first">TEST1</div>
	<div class="fleft last">TEST2</div>
</body>
</html>

2 Div a la suite avec 1 en PX et l'autre en %

HTML

Discussions similaires

Partager

Partager