2 objecten naast elkaar
Ik wil naast een sidebar (aside) een wrapper (recentbox) hebben met laatste projecten.
Deze zijn niet gefloat maar komen wel naast elkaar te staan. Wanneer de tekst bij de sidebar ophoud (hoogte staat op auto;) dan gaan de projectboxen zich verbreden en gaan ze van 2 kolommen naar 3 kolommen. Ik maak gebruik van een grid.
Waar kan dit aan liggen?
Wat ik dus precies wil is, dat onafhankelijk van hoeveel tekst in sidebar staat de project items altijd in 2 kolommen onder elkaar komen te staan.
Hierbij de code:
HTML
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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<div class="row">
<aside class="col sidebar">
<h3><strong>Recent Work</strong></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis ante eros. Aliquam in eros mauris, sed adipiscing neque.
Donec tristique bibendum vulputate. Vivamus aliquam semper sapien, quis aliquet purus rutrum id.
<br>
<br>
Vestibulum tincidunt gravida lacinia. Nulla facilisi. Suspendisse ullamcorper, est eget dignissim tempor, eros magna lacinia risus,
fermentum aliquam ante ipsum ut purus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis ante eros. Aliquam in eros mauris, sed adipiscing neque.
Donec tristique bibendum vulputate. Vivamus aliquam semper sapien, quis aliquet purus rutrum id.
<br>
<br>
Vestibulum tincidunt gravida lacinia. Nulla facilisi. Suspendisse ullamcorper, est eget dignissim tempor, eros magna lacinia risus,
fermentum aliquam ante ipsum ut purus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis ante eros. Aliquam in eros mauris, sed adipiscing neque.
Donec tristique bibendum vulputate. Vivamus aliquam semper sapien, quis aliquet purus rutrum id.
<br>
<br>
Vestibulum tincidunt gravida lacinia. Nulla facilisi. Suspendisse ullamcorper, est eget dignissim tempor, eros magna lacinia risus,
fermentum aliquam ante ipsum ut purus.
</p>
</aside><!-- End aside.col sidebar -->
<ul class="recentbox">
<li class="col projectbox">
<a href="#">
<div class="thumbnails">
<img src="images/portfolio/thumbnails/thumbnail.png" alt="Thumbnail">
</div><!-- End .thumbnails -->
<div class="description">
<h3><strong>Title Project</strong></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis ante eros.
</p>
</div><!-- End .description -->
<div class="tags">
Tags: Photoshop, Illustrator, Graphic design
</div><!-- End .tags -->
</a>
</li><!-- End li.col projectbox -->
<li class="col projectbox">
<div class="thumbnails">
<img src="images/portfolio/thumbnails/thumbnail.png" alt="Thumbnail">
</div><!-- End .thumbnails -->
<div class="description">
<h3><strong>Title Project</strong></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis ante eros.
</p>
</div><!-- End .description -->
<div class="tags">
Tags: Photoshop, Illustrator, Graphic design
</div><!-- End .tags -->
</li><!-- End li.col projectbox -->
<li class="col projectbox">
<div class="thumbnails">
<img src="images/portfolio/thumbnails/thumbnail.png" alt="Thumbnail">
</div><!-- End .thumbnails -->
<div class="description">
<h3><strong>Title Project</strong></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis ante eros.
</p>
</div><!-- End .description -->
<div class="tags">
Tags: Photoshop, Illustrator, Graphic design
</div><!-- End .tags -->
</li><!-- End li.col projectbox -->
<li class="col projectbox">
<div class="thumbnails">
<img src="images/portfolio/thumbnails/thumbnail.png" alt="Thumbnail">
</div><!-- End .thumbnails -->
<div class="description">
<h3><strong>Title Project</strong></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis ante eros.
</p>
</div><!-- End .description -->
<div class="tags">
Tags: Photoshop, Illustrator, Graphic design
</div><!-- End .tags -->
</li><!-- End li.col projectbox -->
<li class="col projectbox">
<div class="thumbnails">
<img src="images/portfolio/thumbnails/thumbnail.png" alt="Thumbnail">
</div><!-- End .thumbnails -->
<div class="description">
<h3><strong>Title Project</strong></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis ante eros.
</p>
</div><!-- End .description -->
<div class="tags">
Tags: Photoshop, Illustrator, Graphic design
</div><!-- End .tags -->
</li><!-- End li.col projectbox -->
<li class="col projectbox">
<div class="thumbnails">
<img src="images/portfolio/thumbnails/thumbnail.png" alt="Thumbnail">
</div><!-- End .thumbnails -->
<div class="description">
<h3><strong>Title Project</strong></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis ante eros.
</p>
</div><!-- End .description -->
<div class="tags">
Tags: Photoshop, Illustrator, Graphic design
</div><!-- End .tags -->
</li><!-- End li.col projectbox -->
</ul><!-- End ul.recentbox -->
</div><!-- End .row -->
<aside class="col sidebar">
<h3><strong>Recent Work</strong></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis ante eros. Aliquam in eros mauris, sed adipiscing neque.
Donec tristique bibendum vulputate. Vivamus aliquam semper sapien, quis aliquet purus rutrum id.
<br>
<br>
Vestibulum tincidunt gravida lacinia. Nulla facilisi. Suspendisse ullamcorper, est eget dignissim tempor, eros magna lacinia risus,
fermentum aliquam ante ipsum ut purus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis ante eros. Aliquam in eros mauris, sed adipiscing neque.
Donec tristique bibendum vulputate. Vivamus aliquam semper sapien, quis aliquet purus rutrum id.
<br>
<br>
Vestibulum tincidunt gravida lacinia. Nulla facilisi. Suspendisse ullamcorper, est eget dignissim tempor, eros magna lacinia risus,
fermentum aliquam ante ipsum ut purus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis ante eros. Aliquam in eros mauris, sed adipiscing neque.
Donec tristique bibendum vulputate. Vivamus aliquam semper sapien, quis aliquet purus rutrum id.
<br>
<br>
Vestibulum tincidunt gravida lacinia. Nulla facilisi. Suspendisse ullamcorper, est eget dignissim tempor, eros magna lacinia risus,
fermentum aliquam ante ipsum ut purus.
</p>
</aside><!-- End aside.col sidebar -->
<ul class="recentbox">
<li class="col projectbox">
<a href="#">
<div class="thumbnails">
<img src="images/portfolio/thumbnails/thumbnail.png" alt="Thumbnail">
</div><!-- End .thumbnails -->
<div class="description">
<h3><strong>Title Project</strong></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis ante eros.
</p>
</div><!-- End .description -->
<div class="tags">
Tags: Photoshop, Illustrator, Graphic design
</div><!-- End .tags -->
</a>
</li><!-- End li.col projectbox -->
<li class="col projectbox">
<div class="thumbnails">
<img src="images/portfolio/thumbnails/thumbnail.png" alt="Thumbnail">
</div><!-- End .thumbnails -->
<div class="description">
<h3><strong>Title Project</strong></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis ante eros.
</p>
</div><!-- End .description -->
<div class="tags">
Tags: Photoshop, Illustrator, Graphic design
</div><!-- End .tags -->
</li><!-- End li.col projectbox -->
<li class="col projectbox">
<div class="thumbnails">
<img src="images/portfolio/thumbnails/thumbnail.png" alt="Thumbnail">
</div><!-- End .thumbnails -->
<div class="description">
<h3><strong>Title Project</strong></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis ante eros.
</p>
</div><!-- End .description -->
<div class="tags">
Tags: Photoshop, Illustrator, Graphic design
</div><!-- End .tags -->
</li><!-- End li.col projectbox -->
<li class="col projectbox">
<div class="thumbnails">
<img src="images/portfolio/thumbnails/thumbnail.png" alt="Thumbnail">
</div><!-- End .thumbnails -->
<div class="description">
<h3><strong>Title Project</strong></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis ante eros.
</p>
</div><!-- End .description -->
<div class="tags">
Tags: Photoshop, Illustrator, Graphic design
</div><!-- End .tags -->
</li><!-- End li.col projectbox -->
<li class="col projectbox">
<div class="thumbnails">
<img src="images/portfolio/thumbnails/thumbnail.png" alt="Thumbnail">
</div><!-- End .thumbnails -->
<div class="description">
<h3><strong>Title Project</strong></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis ante eros.
</p>
</div><!-- End .description -->
<div class="tags">
Tags: Photoshop, Illustrator, Graphic design
</div><!-- End .tags -->
</li><!-- End li.col projectbox -->
<li class="col projectbox">
<div class="thumbnails">
<img src="images/portfolio/thumbnails/thumbnail.png" alt="Thumbnail">
</div><!-- End .thumbnails -->
<div class="description">
<h3><strong>Title Project</strong></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis ante eros.
</p>
</div><!-- End .description -->
<div class="tags">
Tags: Photoshop, Illustrator, Graphic design
</div><!-- End .tags -->
</li><!-- End li.col projectbox -->
</ul><!-- End ul.recentbox -->
</div><!-- End .row -->
en de CSS van grid
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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
ul, ol {
margin: 0;
padding: 0;
list-style: none;
}
/* Reusable column setup */
.col {
border: 0px solid rgba(0,0,0,0);
float: left;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-moz-background-clip: padding-box !important;
-webkit-background-clip: padding-box !important;
background-clip: padding-box !important;
}
/* 1. 3 Column Grid 0px - 939px
-----------------------------------------------------------------------------
Span 1: 33.3333333333%
Span 2: 66.6666666667%
Span 3: 100%
----------------------------------------------------------------------------- */
/* Setup rows */
.row {
width: 940px; /* Width of #container */
margin: 0 auto;
padding: 20px 0 0 0;
float: left;
border-bottom: 1px solid #EFEFEF;
}
.row:last-child {
margin: 0 0 40px 0;
border-bottom: none;
}
/* Unordered lists */
ul.featuredbox {
height: auto;
margin-left: -30px;
padding: 0;
}
ul.recentbox {
height: auto;
margin-left: -30px;
padding: 0;
}
.col {
border-left-width: 30px;
margin: 0 auto 20px auto;
padding: 0;
}
.col .projectbox {
border-left-width: 30px;
}
/*
Add your semantic classnames in alongside their corresponding spans here. e.g.
.span_3,
.my_semantic_class_name {
...
}
*/
.span_1,
.featured,
.sidebar,
.projectbox {
width:33.3333333333%;
}
.span_2 {
width:66.6666666667%;
}
.span_3 {
width:50%;
}
.span_4 {
margin-left:0;
width:100%;
}
/* Text padding GridPak */
.featured, .sidebar {
padding: 0 10px;
}
Gewijzigd op 23/06/2012 18:14:47 door Casper B
Er zijn nog geen reacties op dit bericht.