Aligner des éléments dans ma div

Version imprimable

31/03/2013, 19h10
Neewd

Aligner des éléments dans ma div

Ahoy !

Je ne sais pas si mon titre est vraiment explicite.
Je suis une quiche en CSS et je m'en rends compte de plus en plus. :(

Mon but serait de faire ce genre de choses (sans utiliser les absolute).

http://image.noelshack.com/fichiers/...untitled-1.png

Donc c'est un <ul> puis un <h1> puis un <input>.
J'ai tout mis dans une div.
Mais tous mes éléments se mettent les uns en dessous des autres, j'ai beau fixé une hauteur fixe pour mon élément j'aimerais que ça s'aligne comme sur mon image.

Je ne sais vraiment pas comment faire ...

Merci d'avance ! :ccool:
31/03/2013, 19h19
rodolphebrd
Bonjour,

Sans code je pourrais simplement vous dire:
Code:

1 2 3 4 nav, h1, input { float:left; }

Houlà, toutes mes excuses, je tombais en rade de batterie j'ai oublié de poster mon code HTML.

Code:

1
2
3
4
5
6
7
8
9
<div class="header">
	<ul>
		<li><a href="@">Blog</a></li>
		<li><a href="@">About</a></li>
		<li><a href="@">Contact</a></li>
	</ul>
	<h1>escape from reality</h1>
	<input type="text" id="search">
</div>

Une base de départ:

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
26
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>3 colonnes fluides</title>
<style>
li {
        display:inline;
}
ul, h1, input {
        float:left;
}
</style>
</head>
<body>
<div class="header">
			<ul>
				<li><a href="@">Blog</a></li>
				<li><a href="@">About</a></li>
				<li><a href="@">Contact</a></li>
			</ul>
			<h1>escape from reality</h1>
			<input type="text" id="search">
		</div>
</body>
</html>

Fuseau horaire GMT +2. Il est actuellement 19h46.