Organizing div elements using tables and floats
I have the following divs that are randomly generated, so I cannot make changes to a single div element. Here's an example http://jsfiddle.net/y638o46h/2/ . Here's what I need http://prntscr.com/5i5vz3 .
Html
<div class="relatedposts">
<div class="relatedthumb">
<img src="" >
<h3 class="justin-cover">Lets make this work</h3>
</div>
<div class="relatedthumb">
<img src="" >
<h3 class="justin-cover">Lets make this work</h3>
</div>
<div class="relatedthumb">
<img src="" >
<h3 class="justin-cover">Lets make this work</h3>
</div>
<div class="relatedthumb">
<img src="" >
<h3 class="justin-cover">Lets make this work</h3>
</div>
<div class="relatedthumb">
<img src="" >
<h3 class="justin-cover">Lets make this work</h3>
</div>
<div class="relatedthumb">
<img src="" >
<h3 class="justin-cover">This one clearly has too many lines that do not fit</h3>
</div>
CSS
*{
margin: 0;
padding: 0;
box-sizing: border-box;}
.relatedposts {
display:table;
width:1024px;font-size: 0;
/* fix inline gap */
margin: 0 auto;}
.relatedthumb {
float: left;
margin-left:5px;
position: relative;
margin-bottom:10px;
}
.relatedthumb img {
text-align:center;
}
.justin-cover {
color: #fff;
font-size: 30px;
font-weight: 500;
/* height: 30%; */
width: 100%;
position: absolute;
bottom: 0;
left:0;
background: rgba(0,0,0,0.5);
padding: 10px;
transition: all 0.5s;
}
+3
source to share
3 answers
To target the first div, you can use : first-child :
/*This one target the first div with class relatedthumb that is child div of an element with class relatedposts */
.relatedposts div.relatedthumb:first-child
To target the img of the first div:
.relatedposts div.relatedthumb:first-child img
+5
source to share
Perhaps you can do something like this, but the downfall is that you need a fixed height
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.relatedposts {
display:table;
width:1024px;
height: 256px;
font-size: 0;
/* fix inline gap */
margin: 0 auto;
}
.relatedthumb {
float: left;
position: relative;
text-align: center;
width: 23%;
height: 250px;
overflow: hidden;
margin: 10px 1%;
}
.relatedposts .relatedthumb:first-child{
width: 48%;
height: 520px;
}
.relatedthumb img{
display: block;
margin: 0 auto;
height: 100%;
width: auto;
}
.justin-cover {
color: #fff;
font-size: 30px;
font-weight: 500;
width: 100%;
position: absolute;
bottom: 0;
left:0;
background: rgba(0,0,0,0.5);
padding: 10px;
transition: all 0.5s;
text-align: left;
}
<div class="relatedposts">
<div class="relatedthumb">
<img src="http://placekitten.com/336/200" >
<h3 class="justin-cover">Lets make this work</h3>
</div>
<div class="relatedthumb">
<img src="http://placekitten.com/336/200" >
<h3 class="justin-cover">Lets make this work</h3>
</div>
<div class="relatedthumb">
<img src="http://placekitten.com/336/200" >
<h3 class="justin-cover">Lets make this work</h3>
</div>
<div class="relatedthumb">
<img src="http://placekitten.com/336/200" >
<h3 class="justin-cover">Lets make this work</h3>
</div>
<div class="relatedthumb">
<img src="http://placekitten.com/336/200" >
<h3 class="justin-cover">This one clearly has too many lines that do not fit</h3>
</div>
</div>
+1
source to share
I think this is what you are looking for: Click here
HTML:
<section class="page">
<div class="left"></div>
<div class="container">
<div class="obj"></div>
<div class="obj"></div>
<div class="obj"></div>
<div class="obj"></div>
</div>
</section>
CSS
*{box-sizing: border-box;}
body {
margin:20px
}
.left, .obj {
border: 2px solid gainsboro;
margin:2px;
}
.container {
float: left;
height: 300px;
width: 300px;
background: red;
margin:2px;
}
.left {
float:left;
height: 300px;
width: 300px;
}
.obj {
height: 146px;
width: 146px;
float: left;
}
0
source to share