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

Version imprimable

16/01/2013, 01h17
tydoo34

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

Bonjour à tous !

Déja bonne année :D 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 ;)
16/01/2013, 10h28
Kaamo

Citation:

Merci de vos réponses

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

voir Mise en page CSS
16/01/2013, 11h27
tydoo34
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:

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

http://www.monbahu.com/moi.png
16/01/2013, 12h38
Kaamo

Citation:

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 :ccool:

Comment as tu défini la classe CSS fleft ?

Citation:

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 ?
16/01/2013, 13h24
tydoo34

La class fleft n'est composée que du float left.
16/01/2013, 13h33
tydoo34
Voila le code que j'ai fait, mais la div 2 ne fait que la longueur de la lettre
Code:

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
16/01/2013, 13h53
Muchos

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

Utiliser FLOAT. Je suis sûr que vous trouverez comment ;)
16/01/2013, 13h55
tydoo34

Donc il faut que je vire le inline block ?

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

Voici une solution possible à son problème :

Code:

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>