css overschot vullen
Code (php)
1
2
3
4
5
6
2
3
4
5
6
<div id="header">header</div>
<div id="midden">
<div id="box1">box1</div>
<div id="box2">box2</div>
</div>
<div id="footer">footer</div>
<div id="midden">
<div id="box1">box1</div>
<div id="box2">box2</div>
</div>
<div id="footer">footer</div>
nu wil ik de header 100px hoog houden
de footer 40px hoog en box1 en box2 die naast elkaar staan de rest van de pagina vullen.
Het lukt ( de header en de footer ) maar box1 en box2 krijg ik niet juist ( al met max en min height gespeelt en met alles in % maar dat had niet het gewenste resultaat )
Als je Midden 1000px is, dan kan je die 1000px opsplitsen in 2 blokken. Blok 1 en 2 en die zijn allebij 500px. Wanneer je de code float:left; gebruikt, dan "drijft" je blok naar links zover als ie kan, en dat is precies die 500px;
http://waldio.110mb.com/css/fauxcolumn.html
Gewijzigd op 29/03/2013 00:10:35 door Wouter J
Eerst ging het wel zo: http://alistapart.com/article/fauxcolumns
Maar met CSS3 en HTML5 kan het zo: http://css-tricks.com/fluid-width-equal-height-columns/
Toevoeging op 29/03/2013 09:12:08:
Of eentje die wat meer inhoudelijk is zonder al te veel trammelant en narigheid: http://alistapart.com/article/multicolumnlayouts
Direct voorbeeld met HTML en CSS: http://d.alistapart.com/multicolumnlayouts/3ColLiquid.html
Gewijzigd op 29/03/2013 09:12:55 door Eddy E
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
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
body {
margin:0px;
width:100%;
height:100%;
}
#footer {
position:absolute;
bottom:0;
height:40px;
}
#box2 {
float:right;
background: #CC3;
width: 75%;
}
#box1 {
float:left;
background: #CC3;
width: 25%;
}
#header {
height:100px;
}
margin:0px;
width:100%;
height:100%;
}
#footer {
position:absolute;
bottom:0;
height:40px;
}
#box2 {
float:right;
background: #CC3;
width: 75%;
}
#box1 {
float:left;
background: #CC3;
width: 25%;
}
#header {
height:100px;
}
en die footer geeft dan problemen.
maar het is de bedoeling dat box1 en box2 de rest vullen tussen de header en de footer
Gewijzigd op 29/03/2013 13:50:42 door php knipper