divs naast elkaar zetten
Ik was net een layout aan het maken, alles is gelukt zoals ik het wou alleen 1 dingetje zit niet goed en dat is het content gedeelte, waar ik eigenlijk 3 divs naast elkaar wil dus links, midden, rechts waarvan de middelsde div zo breed mogelijk moet zijn en de andere twee zouden links/rechts tegen het scherm moeten staan maar dat lukt mij niet kan iemand me hier mee helpen?
dit is het stukje met de divs:
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
<div id="divContentWrapper">
<div id="divContent">
<div id="divContentLeftColumn">
<div id="divMenuLeft">
<ul>
<li><a href="index.html">About</a></li>
<li><a href="Resume.html">Resume</a></li>
<li><a href="Portfolio.html">Portfolio</a></li>
<li><a href="contact.html">contact</a></li>
</ul>
</div>
</div>
<div id="divContentCenterColumn"></div>
<div id="divContentRightColumn"></div>
</div>
</div>
<div id="divContent">
<div id="divContentLeftColumn">
<div id="divMenuLeft">
<ul>
<li><a href="index.html">About</a></li>
<li><a href="Resume.html">Resume</a></li>
<li><a href="Portfolio.html">Portfolio</a></li>
<li><a href="contact.html">contact</a></li>
</ul>
</div>
</div>
<div id="divContentCenterColumn"></div>
<div id="divContentRightColumn"></div>
</div>
</div>
en hier is de css:
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
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
#divContentWrapper {
width: 100%;
background: #0F0;
min-width: 600px;
}
#divContent {
width: 1000px;
height: 600px;
margin: 0 auto;
}
#divContentLeftColumn {
float:left;
width: 200px;
background:#F00;
height: 600px;
}
#divContentCenterColumn {
float:left;
min-width: 600px;
margin: 0px auto;
background:#000;
height: 600px;
overflow:hidden;
}
#divContentRightColumn {
float:right;
width: 200px;
background:#F00;
height: 600px;
}
width: 100%;
background: #0F0;
min-width: 600px;
}
#divContent {
width: 1000px;
height: 600px;
margin: 0 auto;
}
#divContentLeftColumn {
float:left;
width: 200px;
background:#F00;
height: 600px;
}
#divContentCenterColumn {
float:left;
min-width: 600px;
margin: 0px auto;
background:#000;
height: 600px;
overflow:hidden;
}
#divContentRightColumn {
float:right;
width: 200px;
background:#F00;
height: 600px;
}
Ik heb mijn layout geupload zodat jullie weten hoe het er nu uit ziet: http://layout.site11.com/
Gewijzigd op 21/10/2012 01:24:53 door Andy V
#right -> float: right;
#content -> float: left;
En dan de eventuele achtergrond van de content meegeven aan de container/wrapper. Voorbeeld: http://jsbin.com/aqaqay/1/edit
Let wel dat ik de breedte van de dingen even liquid heb gemaakt (dwz: percentage met min-/max-width).
Misschien wel een leuk draadje: Hoe maak jij je content indeling.
Daarna pas een menu/left/right/aside etc.
Dat kan allemaal prima met position: absolute;, maar daar kleven heel wat nadelen aan.
Frank, je zou eventueel met absolute en relative posities kunnen werken: http://jsbin.com/aqaqay/6/edit
Dat is m helemaal. Volgens mij is dat ook wat Andy zoekt. Ik heb hem in mijn examples directory opgeslagen.
Altijd handig ;-)
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
50
51
52
53
54
55
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
50
51
52
53
54
55
<?php
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>test</title>
<style id="jsbin-css">
#wrapper {
min-width: 500px; /* geef altijd een minimale width mee */
height: 200px;
position: relative; /* om absolute te kunnen positioneren */
}
#left, #right, #content {
position: absolute;
height: 100%;
}
#left {
width: 100px;
background: #c33;
left: 0;
}
#right {
width: 100px;
background: #33c;
right: 0;
}
#content {
left: 100px;
right: 100px;
}
</style>
</head>
<body>
<div id=wrapper>
<div id=left>
<h3>Left</h3>
</div>
<div id=content>
<h2>Content</h2>
<p>Heel wat mooie content waar we een hele lange zin van maken.</p>
</div>
<div id=right>
<h3>Right</h3>
</div>
</div>
</body>
</html>
?>
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>test</title>
<style id="jsbin-css">
#wrapper {
min-width: 500px; /* geef altijd een minimale width mee */
height: 200px;
position: relative; /* om absolute te kunnen positioneren */
}
#left, #right, #content {
position: absolute;
height: 100%;
}
#left {
width: 100px;
background: #c33;
left: 0;
}
#right {
width: 100px;
background: #33c;
right: 0;
}
#content {
left: 100px;
right: 100px;
}
</style>
</head>
<body>
<div id=wrapper>
<div id=left>
<h3>Left</h3>
</div>
<div id=content>
<h2>Content</h2>
<p>Heel wat mooie content waar we een hele lange zin van maken.</p>
</div>
<div id=right>
<h3>Right</h3>
</div>
</div>
</body>
</html>
?>
Gewijzigd op 21/10/2012 13:58:56 door Frank Nietbelangrijk
Toevoeging op 21/10/2012 14:05:53:
Ik heb er toch nog een extra wrapper tussen de wrapper en de kolommen gelaten om de hoogte te regelen anders was 1 kolom hoog en dan had ik 2platte kolommen met 0px hoogte.
de html is dus niks aan veranderd,
en dan is dit de css:
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
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
/** Content **/
#divContentWrapper {
background: #333;
min-width: 1007px;
position: relative; /* om absolute te kunnen positioneren */
}
#divContentLeftColumn, #divContentCenterColumn, #divContentRightColumn {
position: absolute;
height: 100%;
}
#divContent {
min-height: 400px;
}
#divContentLeftColumn {
width: 200px;
left: 0;
background:#999;
}
#divContentCenterColumn {
left: 200px;
right: 200px;
background:#000;
}
#divContentRightColumn {
width: 200px;
right: 0;
background:#999;
}
#divContentWrapper {
background: #333;
min-width: 1007px;
position: relative; /* om absolute te kunnen positioneren */
}
#divContentLeftColumn, #divContentCenterColumn, #divContentRightColumn {
position: absolute;
height: 100%;
}
#divContent {
min-height: 400px;
}
#divContentLeftColumn {
width: 200px;
left: 0;
background:#999;
}
#divContentCenterColumn {
left: 200px;
right: 200px;
background:#000;
}
#divContentRightColumn {
width: 200px;
right: 0;
background:#999;
}
Wouter J op 21/10/2012 13:29:36:
Eddy, ik zie geen enkele reden om de content als eerst in de code te moeten plaatsen. Ik raad je zelfs aan om in de code dezelfde volgorde als je op het scherm ziet (van links naar rechts en boven naar onder) aan te houden.
Frank, je zou eventueel met absolute en relative posities kunnen werken: http://jsbin.com/aqaqay/6/edit
Frank, je zou eventueel met absolute en relative posities kunnen werken: http://jsbin.com/aqaqay/6/edit
Dit had te maken met SEO. Hoewel die wel het een en ander kunnen filteren.
Maar wat te denken aan schermlezers? Moeten die elke keer het menu voorlezen?
Gewijzigd op 21/10/2012 14:55:29 door Andy V
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
50
51
52
53
54
55
56
57
58
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
50
51
52
53
54
55
56
57
58
<body>
<div id="divContainer">
<!-- START:Header Content -->
<div id="divHeaderWrapper">
<div id="divHeader"><h1> </h1></div>
<div id="divLinks">
<div id="divNav">
<ul>
<li><a href="index.html">About</a></li>
<li><a href="Resume.html">Resume</a></li>
<li><a href="Portfolio.html">Portfolio</a></li>
<li><a href="contact.html">contact</a></li>
</ul>
</div>
<div id="divNavLine"></div>
</div>
<div id="divSubLinks">
<div id="divSubNav"></div>
<div class="divLine"></div>
</div>
</div>
<!-- END:Header Content -->
<!-- START:Body Content -->
<div id="divContentWrapper">
<div id="divContent">
<div id="divContentLeftColumn">
<div id="divMenuLeft">
<ul>
<li><a href="index.html">About</a></li>
<li><a href="Resume.html">Resume</a></li>
<li><a href="Portfolio.html">Portfolio</a></li>
<li><a href="contact.html">contact</a></li>
</ul>
</div>
</div>
<div id="divContentCenterColumn"></div>
<div id="divContentRightColumn"></div>
</div>
</div>
<!-- END:Body Content -->
<!-- START:Footer Content -->
<div id="divFooterWrapper">
<div id="divFooterCopyRight"><font color="#FFF"> © Andy V ∼ 2012</font></div>
<div id="divFooter"></div>
</div>
<!-- END:Footer Content -->
</div>
</body>
<div id="divContainer">
<!-- START:Header Content -->
<div id="divHeaderWrapper">
<div id="divHeader"><h1> </h1></div>
<div id="divLinks">
<div id="divNav">
<ul>
<li><a href="index.html">About</a></li>
<li><a href="Resume.html">Resume</a></li>
<li><a href="Portfolio.html">Portfolio</a></li>
<li><a href="contact.html">contact</a></li>
</ul>
</div>
<div id="divNavLine"></div>
</div>
<div id="divSubLinks">
<div id="divSubNav"></div>
<div class="divLine"></div>
</div>
</div>
<!-- END:Header Content -->
<!-- START:Body Content -->
<div id="divContentWrapper">
<div id="divContent">
<div id="divContentLeftColumn">
<div id="divMenuLeft">
<ul>
<li><a href="index.html">About</a></li>
<li><a href="Resume.html">Resume</a></li>
<li><a href="Portfolio.html">Portfolio</a></li>
<li><a href="contact.html">contact</a></li>
</ul>
</div>
</div>
<div id="divContentCenterColumn"></div>
<div id="divContentRightColumn"></div>
</div>
</div>
<!-- END:Body Content -->
<!-- START:Footer Content -->
<div id="divFooterWrapper">
<div id="divFooterCopyRight"><font color="#FFF"> © Andy V ∼ 2012</font></div>
<div id="divFooter"></div>
</div>
<!-- END:Footer Content -->
</div>
</body>
Toevoeging op 21/10/2012 15:37:54:
als ik de relative weghaal blijft de footer niet onderaan in de pagina maar dan krijg ik onder mijn footer nog een lege ruimte tenzij ik de minimum hoogte van de content hoger zet