<p> element schuift kolom naar beneden
Situatie: Een twee kolommen structuur met divjes. De linker kolom moet bevat het menu en de rechter de content. Deze staan via een float naast elkaar. Geen probleem totdat ik een paragraaf toevoeg in de rechter kolom. Deze bevat meer tekst dan 1 regel, waardoor de hele rechter kolom nu opeens onder de linker terecht komt. Met alle andere elementen (tables, forms, headings, etc etc) loopt het prima, alleen de paragraaf gooit alles in de war.
Iemand enig idee hoe ik dit op kan lossen?
relevante css:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#left_bar{
position: relative;
float: left;
width: 240px;
}
/* de rechter kolom met alle content */
#content {
float: left;
margin-left: 25px;
margin-right: 25px;
min-width: 670px;
width: auto;
}
#footer{
clear: both;
}
position: relative;
float: left;
width: 240px;
}
/* de rechter kolom met alle content */
#content {
float: left;
margin-left: 25px;
margin-right: 25px;
min-width: 670px;
width: auto;
}
#footer{
clear: both;
}
Op het p element zitten op dit moment geen css regels.
Code (php)
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
27
28
29
30
31
32
33
34
35
36
37
38
39
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
27
28
29
30
31
32
33
34
35
36
37
38
39
<html>
<head>
<style>
#left_bar{
position: relative;
float: left;
width: 240px;
}
/* de rechter kolom met alle content */
#content {
float: left;
margin-left: 25px;
margin-right: 25px;
min-width: 670px;
width: auto;
}
#footer{
clear: both;
}
</style>
</head>
<body>
<div id="left_bar">
<ul>
<li>menu 1</li>
<li>menu 2</li>
<li>menu 3</li>
</ul>
</div>
<div id="content">
<p>minder tekst</p>
<!--p>
Sed lacus. Donec lectus. Nullam pretium nibh ut turpis. Nam bibendum. In nulla tortor, elementum vel, tempor at, varius non, purus. Mauris vitae nisl nec consectetuer. Donec ipsum. Proin imperdiet est. Phasellus dapibus semper urna. Pellentesque ornare, orci in consectetuer hendrerit, urna elit eleifend nunc, ut consectetuer nisl felis ac diam. Etiam non felis. Donec ut ante. In id eros. Sed lacus. Donec lectus. Nullam pretium nibh ut turpis. Nam bibendum. In nulla tortor, elementum vel, tempor at, varius non, purus. Mauris vitae nisl nec consectetuer. Donec ipsum. Proin imperdiet est. Phasellus dapibus semper urna. Pellentesque ornare, orci in consectetuer hendrerit, urna elit eleifend nunc, ut consectetuer nisl felis ac diam. Etiam non felis. Donec ut ante. In id eros.
</p-->
</div>
</body>
<head>
<style>
#left_bar{
position: relative;
float: left;
width: 240px;
}
/* de rechter kolom met alle content */
#content {
float: left;
margin-left: 25px;
margin-right: 25px;
min-width: 670px;
width: auto;
}
#footer{
clear: both;
}
</style>
</head>
<body>
<div id="left_bar">
<ul>
<li>menu 1</li>
<li>menu 2</li>
<li>menu 3</li>
</ul>
</div>
<div id="content">
<p>minder tekst</p>
<!--p>
Sed lacus. Donec lectus. Nullam pretium nibh ut turpis. Nam bibendum. In nulla tortor, elementum vel, tempor at, varius non, purus. Mauris vitae nisl nec consectetuer. Donec ipsum. Proin imperdiet est. Phasellus dapibus semper urna. Pellentesque ornare, orci in consectetuer hendrerit, urna elit eleifend nunc, ut consectetuer nisl felis ac diam. Etiam non felis. Donec ut ante. In id eros. Sed lacus. Donec lectus. Nullam pretium nibh ut turpis. Nam bibendum. In nulla tortor, elementum vel, tempor at, varius non, purus. Mauris vitae nisl nec consectetuer. Donec ipsum. Proin imperdiet est. Phasellus dapibus semper urna. Pellentesque ornare, orci in consectetuer hendrerit, urna elit eleifend nunc, ut consectetuer nisl felis ac diam. Etiam non felis. Donec ut ante. In id eros.
</p-->
</div>
</body>
Ik denk dat dit is wat je wilt: http://jsbin.com/uqirex/1/watch
Toevoeging op 22/02/2013 11:30:21:
En wat je geeft Wouter is wel wat ik nodig heb. Nu alleen nog met een extra handicap...
Binnen de content heb ik ook nog floatende elementen (plaatjes in tekst bijvoorbeeld). Als ik dan aan een andere element in #content een "clear: both" meegeef, dan komt die onder het menu uit. Ook dat is natuurlijk weer niet wat ik wil. Hoe los ik dat dan weer op (binnen de probleemstelling van hierboven uiteraard).
Code (php)
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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<html>
<head>
<style>
#wrapper{
min-width:810px;
}
#left_bar{
float: left;
width: 240px;
_outline:1px solid red;
}
/* de rechter kolom met alle content */
#content {
margin-left:240px;
padding:0 25px;
_outline:1px solid blue;
}
form{ clear: both; }
</style>
</head>
<body>
<div id="wrapper">
<div id="left_bar">
<ul>
<li>menu 1</li>
<li>menu 2</li>
<li>menu 3</li>
</ul>
</div>
<div id="content">
<p>minder tekst</p>
<!--p>
Sed lacus. Donec lectus. Nullam pretium nibh ut turpis. Nam bibendum. In nulla tortor, elementum vel, tempor at, varius non, purus. Mauris vitae nisl nec consectetuer. Donec ipsum. Proin imperdiet est. Phasellus dapibus semper urna. Pellentesque ornare, orci in consectetuer hendrerit, urna elit eleifend nunc, ut consectetuer nisl felis ac diam. Etiam non felis. Donec ut ante. In id eros. Sed lacus. Donec lectus. Nullam pretium nibh ut turpis. Nam bibendum. In nulla tortor, elementum vel, tempor at, varius non, purus. Mauris vitae nisl nec consectetuer. Donec ipsum. Proin imperdiet est. Phasellus dapibus semper urna. Pellentesque ornare, orci in consectetuer hendrerit, urna elit eleifend nunc, ut consectetuer nisl felis ac diam. Etiam non felis. Donec ut ante. In id eros.
</p-->
<form>
<input type="text">
</form>
</div>
</div>
<div id="footer">Footer</div>
</body>
<html>
<head>
<style>
#wrapper{
min-width:810px;
}
#left_bar{
float: left;
width: 240px;
_outline:1px solid red;
}
/* de rechter kolom met alle content */
#content {
margin-left:240px;
padding:0 25px;
_outline:1px solid blue;
}
form{ clear: both; }
</style>
</head>
<body>
<div id="wrapper">
<div id="left_bar">
<ul>
<li>menu 1</li>
<li>menu 2</li>
<li>menu 3</li>
</ul>
</div>
<div id="content">
<p>minder tekst</p>
<!--p>
Sed lacus. Donec lectus. Nullam pretium nibh ut turpis. Nam bibendum. In nulla tortor, elementum vel, tempor at, varius non, purus. Mauris vitae nisl nec consectetuer. Donec ipsum. Proin imperdiet est. Phasellus dapibus semper urna. Pellentesque ornare, orci in consectetuer hendrerit, urna elit eleifend nunc, ut consectetuer nisl felis ac diam. Etiam non felis. Donec ut ante. In id eros. Sed lacus. Donec lectus. Nullam pretium nibh ut turpis. Nam bibendum. In nulla tortor, elementum vel, tempor at, varius non, purus. Mauris vitae nisl nec consectetuer. Donec ipsum. Proin imperdiet est. Phasellus dapibus semper urna. Pellentesque ornare, orci in consectetuer hendrerit, urna elit eleifend nunc, ut consectetuer nisl felis ac diam. Etiam non felis. Donec ut ante. In id eros.
</p-->
<form>
<input type="text">
</form>
</div>
</div>
<div id="footer">Footer</div>
</body>
Je ziet nu dat het form onder het menu terecht komt. Nog wel binnen de juiste kolom, maar zou het menu erg lang zijn dan drukt dat het form heel ver naar beneden.
P.S. ik weet dat in dit geval "clear: both" voor het form niet zoveel nut heeft, maar denk je in dat erboven een plaatje een float heeft in een paragraaf.
Gewijzigd op 22/02/2013 12:12:28 door Erwin H
Gewijzigd op 22/02/2013 13:44:15 door Wouter J