Mise en page: 2 ou 4 colonnes ?

**hackiles** · 28/12/2008, 12h41

Bonjour,

J'essaie de réaliser une mise en page comme celle du site:
http://www.bulgarihotels.com/home.ht...am_id_lingua=6

C'est à dire avec 2 colonnes centrées de largeurs fixes et 2 marges de largeur flexibles de chaque côté.

Je pense que ca peut se faire en 2 colonnes mais je ne sais pas comment le faire. Pouvez-vous me donner une piste ? Faut-il que j'essaie plutôt de le faire en 4 colonnes (2 colonnes à largeur flexibles pour les marges et 2 colonnes à largeur fixe).

Merci

**hackiles** · 28/12/2008, 13h56

Pour l'instant, en utilisant 2 colonnes, j'arrive presque au résultat désiré mais je n'arrive pas à fixer la largeur de la première colonne.

Voici le code:

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
div#texte {
	width: 400px;
	background: orange;
	position:fixed;
	right:600px;
	left:0;
	margin-left: auto;
}
 
div#photo {
	width: 600px;
	background: red;
	position:fixed;
	left:400px;
	right:0;
	margin-right:auto;
}

**Macmillenium** · 28/12/2008, 18h23

Bonsoir,

Le plus simple c'est de faire une div global de largeur fixe centré classiquement avec les marges automatique et qui contient tes colonnes :

Code :

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

1
2
 
#global { width:1000px; margin:0 auto; }

et puis en html :

Code :

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

1
2
3
4
5
6
7
8
 
<!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" dir="ltr" lang="fr">
<head>
...
<div id="global">
    tes colonnes 
</div>

**hackiles** · 28/12/2008, 20h18

Merci beaucoup !
Voici mon code pour ceux qui auront le même problème:

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
div#center {
	background: blue;
	width: 910px;
	margin: 0 auto;
}
 
 
div#texte {
	width: 350px;
	background: white;
	float: left;
	padding-bottom: 30px;
	text-align: justify;
	padding-right: 20px;
}
 
div#photo {
	width: 540px;
	background: red;
	float: right;
}

Code :

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

1
2
3
4
5
6
7
8
<div id='center'>
	<div id='texte'>
		texte<br><br><br><br><br><br><br><br><br><br>
	</div>
	<div id='photo'>
		photo<br><br><br><br><br><br><br><br><br><br>
	</div>
</div>

Mise en page: 2 ou 4 colonnes ?

Tableau en CSS

Vue hybride

Discussions similaires

Partager

Partager