I'm trying to get 2 divs on the same line, but alligned differently. Here is a pic of what I have right now and what I want:
[pic removed by poster]
and here is the code I've got:
<div class="newsdiv">
<div class="picdiv" style="background-image: url('[...]');"></div>
<div class="titlediv">
<a href="#"><font size="4">', $row['title'], '</font></a>
</div>
<div class="textdiv">
<font size="1">This is some dummy text</font>
</div>
<div class="linksdiv">
<a href="#">[Read More...]</a>
<div class="statsdiv">
<a href="#">Views: 0 , Comments: 0</a>
</div>
</div>
</div>
and the stylesheet:
.newsdiv{
overflow: hidden;
height: 126px;
width: 100%;
padding: 5px;
border: 2px solid black;
display: inline-block;
margin-bottom: 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.picdiv{
width: 220px;
height: 110px;
border: 1px solid #444;
background-repeat: no-repeat;
background-position: center;
background-size: 382px 120px;
float: left;
}
.titlediv{
height: 20px;
text-align: center;
}
.textdiv{
overflow: hidden;
margin-top: 8px;
height: 70px;
text-align: center;
}
.linksdiv{
font-size: 8pt;
text-align: center;
height: 10px;
}
.statsdiv{
font-size: 7pt;
text-align: right;
display: inline-block;
height: 10px;
}
Any ideas of how to do this? Thanks!
You need float here
.statsdiv {
font-size: 7pt;
text-align: right;
display: inline-block;
height: 10px;
float: right; /* Add this */
}
May be there will be more cleaner solution but you can try this for now
.linksdiv > a{
margin-left:12%;
}
You can use the position: absolute; on your .statsdiv and position:relative; on .linksdiv to achieve what you want. I guess using float will be too much for this.
Updated CSS(modified classes only):
.linksdiv{
font-size: 8pt;
text-align: center;
height: 10px;
position: relative; /*added*/
}
.statsdiv{
font-size: 7pt;
/* text-align: right; not required */
display: inline-block;
height: 10px;
position: absolute; /*added*/
right: -0.5%; /*added*/
}
FIDDLE
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With