I'm having a problem creating a responsive "card" similar to the Custom Content Thumbnail in Bootstrap but horizontal. The main problem is that I want the image to be a square and 100% of the height of the card. Also, I want all the cards to have the same width and height.
This is my work so far:
body {
background-color:#ededed;
font-family:"Segoe UI";
}
/*----------2.Headings & Buttons----------*/
h3 {
font-size:1.2em;
font-weight:600;
text-transform:capitalize;
margin:0 0 10px 0;
padding:0;
color:#555555;
}
.btn-styled {
background-color:transparent;
border:#666666 1.9px solid;
color:#666666;
font-size:0.85em;
border-radius:30px;
padding:5px 13px 4px 13px;
margin:10px 0 10px 0;
}
.btn-styled:hover, .btn-styled:active {
background-color:#ededed;
border-color:#ededed;
color:#555555;
}
.btn-styled:focus {
outline:0 !important;
}
/*----------3.Cards----------*/
.card {
position: relative;
margin:2% 5px 2% 5px;
background-color: #fff;
transition: box-shadow .25s;
border-radius: 2px;
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
padding:0;
min-width:400px;
max-width:500px;
}
.card .card-image img {
display: block;
border-radius: 2px 2px 0 0;
position: relative;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
}
.card .card-content {
padding: 15px 10px 0 0;
border-radius: 0 0 2px 2px;
}
.card .card-content p {
margin:0;
font-size:1.45rem;
color: #555555;
}
/*----3.a.Horizontal----*/
.card.horizontal .card-image img {
height:100px;
width:100px;
}
.card.horizontal {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.card.horizontal.small .card-image,
.card.horizontal.medium .card-image,
.card.horizontal.large .card-image {
height: 100%;
max-height: none;
overflow: visible;
}
.card.horizontal .card-image img {
width:150px;
height:150px;
margin-right:20px;
}
.card.horizontal .card-stacked {
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
position: relative;
}
.card.horizontal .card-stacked .card-content {
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
.card .card-image {
position: relative;
}
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-5 col-md-offset-1">
<h3>MAIN TITLE</h3>
</div>
</div>
<div class="row">
<div class="col-md-offset-1 col-md-5 col-xs-12">
<div class="card horizontal">
<div class="card-image">
<img src="https://upload.wikimedia.org/wikipedia/en/thumb/f/ff/Morning_Glory_Flower_square.jpg/1024px-Morning_Glory_Flower_square.jpg">
</div>
<div class="card-stacked">
<div class="card-content">
<h3>Title Goes Here</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed doeiusmod tempor incididunt.</p>
<button class="btn btn-styled">START COPY</button>
</div>
</div>
</div>
</div>
<div class="col-md-offset-1 col-md-5 col-xs-12">
<div class="card horizontal">
<div class="card-image">
<img src="https://upload.wikimedia.org/wikipedia/en/thumb/f/ff/Morning_Glory_Flower_square.jpg/1024px-Morning_Glory_Flower_square.jpg">
</div>
<div class="card-stacked">
<div class="card-content">
<h3>Title Goes Here</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed doeiusmod tempor incididunt.</p>
<button class="btn btn-styled">START COPY</button>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
Also, I made an example of how the cards should look in a grid:
When I tried to create this cards they were not responsive. On different screen widths the left-right-margin was too big or they were on top of each other.
Can someone help get started or give me some ideas how I should do it?
Thanks in advance.
use bootstrap. Ihave provided a demo link just experiment with the code and read the documentation of bootstrap to get better understanding
Here is your Demo Link
Html Code
<div class="container">
<div class="col-md-4">
<div class="card">
<div class="image pull-left">
</div>
<div class="content pull-left">
<h4>
Title Goes Here
</h4> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<br>
<button class="btn btn-default btn-read">
Read more
</button>
</div>
<div class="clearfix">
</div>
</div>
</div>
</div>
Css code
.card {
background: #fff;
display: inline-block;
border: 1px solid #ddd;
}
.image {
float: left;
background: #000;
width: 25%;
height: 150px
}
.content {
float: left;
height: 140px;
width: 73%;
overflow: hidden;
padding: 5px;
}
.content h4 {
margin: 5px 0;
}
Related
So I have this card where the title of it"DcBlog" is in the same line with the content "My Cool Server", I don't want it like that ,but I can't solve this problem
.cards div:first-child {
border-radius: 10px 10px 0 0;
}
.cards div:last-child {
border-radius: 0 0 10px 10px;
margin-bottom:10px;
}
.card {
background-color: #212121;
border-radius:0 0 0 0;
}
.card .btn {
background-color:#d41950;
color:white;
outline:none;
border: none;
}
.card-title {
color:#d89e45;
margin-left:10px;
}
.card-top{
display: flex;
align-items:center;
}
.card-icon {
width:100px;
height:100px;
border-radius:50%;
}
<div class="card" style="width: 100%">
<div class="card-body">
<div class="card-top">
<img class="card-icon" src="https://cdn.discordapp.com/icons/888480205709144084/157cff143fe47dbf7d291a37dc6164dd.png">
<h5 class="card-title">dcblog</h5>
<div class="container">
<p class="card-text">My Cool Server</p>
</div>
</div>
Go somewhere
</div>
</div>
and I want to make the title and the content of the card in different lines,like this one:
how can I do that?
I believe this Fiddle does what you want.
Essentially, you want to use Flexbox for the left part.
Right part will stack naturally.
HTML
<div class="card">
<div class="left-side">
<img src="https://cdn.discordapp.com/icons/888480205709144084/157cff143fe47dbf7d291a37dc6164dd.png"/> Go somewhere
</div>
<div class="right-side">
<div class="top">
<h1>Dcblog</h1>
<h2>My cool server</h2>
</div>
<div class="bot">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nunc nisl, luctus a magna sit amet, pharetra euismod tortor. Suspendisse ut eros nisl. Morbi luctus lacus sit amet consectetur suscipit. Suspendisse vitae est erat. Integer in tincidunt tortor.
</p>
</div>
</div>
</div>
CSS
.card {
display: flex;
padding: 10px;
background-color: #212121;
}
.left-side {
display: flex;
flex-direction: column;
align-items: center;
}
.left-side > a {
color: #FFF;
background-color: #d41950;
width: 100%;
margin-top: 10px;
text-align: center;
text-decoration: none;
padding-top: 5px;
padding-bottom: 5px;
}
.right-side {
padding-left: 10px;
}
.top > h1 {
margin: 0;
color: #d89e45;
}
.top > h2 {
margin: 0;
color: #FFF;
}
.bot > p {
color: #DDD;
}
The look I'm trying to achieve is if you have black text on a white page, but that text runs into an image. The section of text that is over the image changes it's colour.
I have a 'working' (not flexible) example here using a data attribute to grab the same text and set it on the :before element using content:
https://codepen.io/moy/pen/rNeaGbJ
/* General Shit */
body {
color: #000;
font-family: Arial;
font-size: 1.2rem;
line-height: 1.5;
}
h2 {
font-size: 3.6rem;
margin-bottom: 30px;
}
p {
margin-bottom: 30px;
}
.btn {
background: #000;
color: #fff;
display: inline-block;
font-size: 1.2rem;
padding: 15px 60px;
}
img {
width: 100%;
max-width: 100%;
}
/* Grid */
.grid {
clear: both;
margin: 0 auto;
padding: 30px 0;
max-width: 1000px;
}
.grid__item {
box-sizing: border-box;
float: left;
}
.grid--flip .grid__item {
float: right;
}
.grid__item--caption {
padding: 30px 60px;
}
.one-half {
width: 50%;
}
/* Title */
.title-wrap {
display: -webkit-box;
display: flex;
-webkit-box-pack: start;
justify-content: flex-start;
margin-left: -60%;
overflow: hidden;
position: relative;
}
.grid--flip .title-wrap {
-webkit-box-pack: end;
justify-content: flex-end;
margin-left: 0;
margin-right: -60%;
}
.title {
color: #000;
}
.grid--flip .title {
color: #fff;
}
.title:before {
color: #fff;
content: attr(data-title);
display: block;
overflow: hidden;
position: absolute;
width: 27.75%;
white-space: nowrap;
}
.grid--flip .title:before {
color: #000;
width: 34.75%;
}
<div class="grid">
<div class="grid__item grid__item--image one-half">
<img src="http://www.fillmurray.com/800/800" />
</div>
<div class="grid__item grid__item--caption one-half">
<div class="title-wrap">
<h2 class="title" data-title="Title goes here">Title goes here</h2>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
Shop Collection
</div>
</div>
<div class="grid grid--flip">
<div class="grid__item grid__item--image one-half">
<img src="http://www.fillmurray.com/800/800" />
</div>
<div class="grid__item grid__item--caption one-half">
<div class="title-wrap">
<h2 class="title" data-title="Title goes here">Title goes here</h2>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
Shop Collection
</div>
</div>
The problem with this is if...
I adjust the width of the container, all the values are off and it looks broken.
the title is longer and wraps onto multiple lines, it is cut off due to the overflow
And why the widths are what they are on the :before element (if someone could explain that'd be great ha)
So I tried a version using px values instead of % which fixes the issues of changing the container width. However I still have the issue of it not behaving right when text wraps onto 2 lines.
Example (using px): https://codepen.io/moy/pen/JjXoMvb
Can anyone think of a better solution for this? Am I overcomplicating this or missing something obvious?
Edit: PX example wrong incorrect, updated link now.
Use the CSS clip-path property
Example
:root {
--size: 100px;
}
.resizable {
border: 2px solid black;
width: calc(var(--size) * 3);
height: calc(var(--size) * 2);
resize: both;
overflow: auto;
}
.container {
position: relative;
}
.divider {
height: 100px;
}
.title {
position: absolute;
top: 0;
left: 0;
right: 0;
margin: 0;
}
img {
width: var(--size);
height: var(--size);
}
.left {
color: blue;
clip-path: polygon(0 0, var(--size) 0, var(--size) var(--size), 0 var(--size));
}
.right {
color: red;
clip-path: polygon(var(--size) 0, 100% 0, 100% 100%, 0 100%, 0 var(--size), var(--size) var(--size));
}
.container-reverse img {
float: right;
}
.container-reverse .left {
clip-path: polygon(100% 0, 100% var(--size), calc(100% - var(--size)) var(--size), calc(100% - var(--size)) 0);
}
.container-reverse .right {
clip-path: polygon(0 0, calc(100% - var(--size)) 0, calc(100% - var(--size)) var(--size), 100% var(--size), 100% 100%, 0 100%);
}
.container-reverse h1 {
text-align: right;
}
<div class="resizable">
<div class="container">
<h1 class="title left">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h1>
<h1 class="title right">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h1>
<img src="http://placehold.it/100x100" />
</div>
<div class="divider"></div>
<div class="container container-reverse">
<h1 class="title left">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h1>
<h1 class="title right">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h1>
<img src="http://placehold.it/100x100" />
</div>
</div>
I am using css grid where I have a card inside a sidebar div that is inside a container dive. I am also using a inner-container div where I put 3 cards. The sidebar div card has proper width but the cards inside the inner-container do not adjust to 200px. How can I give the inner-container cards a specific width.
HTML
<aside class="sidebar">
<h2><b>Latest Blog Post</b></h2>
<div class="card">
<img class="card-image" src="images/christmas.jpeg" alt="christmas-markets" width="100%">
<div class="card-text">
<p>German Christmas Markets</p>
</div>
</div>
</aside>
<article class="main">
<h1>An American Living in Germany</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
<div class=".inner-container">
<div class="card"><img class="card-image" src="images/pubic-transit.jpeg" alt="public-transit" width="100%">
<div class="card-text">
<p>Public Transit</p>
</div></div>
<div class="card"><img class="card-image" src="images/rothenburg.jpeg" alt="christmas-markets" width="100%">
<div class="card-text">
<p>Rothenburg ob der Tauber</p>
</div></div>
<div class="card"><img class="card-image" src="images/black-forest.jpeg" alt="public-transit" width="100%">
<div class="card-text">
<p>The Black Forest</p>
</div></div>
</div>
</article>
CSS
.card {
box-shadow: 0 8px 8px 8px rgba(0,0,0,0.2);
transition: 0.3s;
width: 90%;
height: auto;
border-radius: 5px;
margin-top: 20px;
}
.card-text {
padding: 2px;
margin-left: 5px;
margin-bottom: 2px;
margin-top: 5px;
line-height: .5em;
}
.card-text a {
color: crimson;
font-size: 1.2em;
}
.card-image {
width: 100%;
bottom: 0px;
}
.inner-container {
height: 50%;
width: 80%;
display: grid;
grid-template-columns: 200px 200px 200px;
grid-template-rows: 200px 200px 200px;
grid-template-areas:
"b b b";
}
.inner-container div {
grid-area: b;
}
.inner-container .card{
box-shadow: 0 8px 8px 8px rgba(0,0,0,0.2);
transition: 0.3s;
width: 200px;
height: auto;
border-radius: 5px;
margin-top: 20px;
}
.inner-container .card-text {
padding: 2px;
margin-left: 5px;
margin-bottom: 2px;
margin-top: 5px;
line-height: .5em;
}
.inner-container .card-text a {
color: crimson;
font-size: 1.2em;
}
.inner-container .card-image {
width: 100%;
bottom: 0px;
}
You've got a typo in your code which is why CSS isn't firing for that class.
<div class=".inner-container">
should be
<div class="inner-container">
Also took the liberty of adding grid-area:auto; to css to make it render properly for you:
Working fiddle: https://jsfiddle.net/ne6vrwyq/
.card {
box-shadow: 0 8px 8px 8px rgba(0,0,0,0.2);
transition: 0.3s;
width: 90%;
height: auto;
border-radius: 5px;
margin-top: 20px;
}
.card-text {
padding: 2px;
margin-left: 5px;
margin-bottom: 2px;
margin-top: 5px;
line-height: .5em;
}
.card-text a {
color: crimson;
font-size: 1.2em;
}
.card-image {
width: 100%;
bottom: 0px;
}
.inner-container {
height: 50%;
width: 80%;
display: grid;
grid-template-columns: 200px 200px 200px;
grid-template-rows: 200px 200px 200px;
grid-template-areas:
"b b b";
}
.inner-container div {
grid-area: b;
}
.inner-container .card{
box-shadow: 0 8px 8px 8px rgba(0,0,0,0.2);
transition: 0.3s;
width: 200px;
height: auto;
border-radius: 5px;
margin-top: 20px;
grid-area: auto;
}
.inner-container .card-text {
padding: 2px;
margin-left: 5px;
margin-bottom: 2px;
margin-top: 5px;
line-height: .5em;
}
.inner-container .card-text a {
color: crimson;
font-size: 1.2em;
}
.inner-container .card-image {
width: 100%;
bottom: 0px;
}
<aside class="sidebar">
<h2><b>Latest Blog Post</b></h2>
<div class="card">
<img class="card-image" src="images/christmas.jpeg" alt="christmas-markets" width="100%">
<div class="card-text">
<p>German Christmas Markets</p>
</div>
</div>
</aside>
<article class="main">
<h1>An American Living in Germany</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
<div class="inner-container">
<div class="card"><img class="card-image" src="images/pubic-transit.jpeg" alt="public-transit" width="100%">
<div class="card-text">
<p>Public Transit</p>
</div></div>
<div class="card"><img class="card-image" src="images/rothenburg.jpeg" alt="christmas-markets" width="100%">
<div class="card-text">
<p>Rothenburg ob der Tauber</p>
</div></div>
<div class="card"><img class="card-image" src="images/black-forest.jpeg" alt="public-transit" width="100%">
<div class="card-text">
<p>The Black Forest</p>
</div></div>
</div>
</article>
I'm pretty much stuck with making side menu div's of my code filling the parent height to 100%. I've tried alot of googling and testing before comming to ask..
Code snippet: http://jsfiddle.net/zntxaspd/
html, body { height: 100%;}
.row.content { height: 100%; width:70%; margin: auto; }
.sidenav { padding-top: 20px;background-color: #f1f1f1; height: 100%;}
#media screen and (max-width: 767px) {
.sidenav {
height: auto;
padding: 15px;
}
.row.content {height:auto;}
}
h5 { font-size: 14px; border-bottom: 6px solid red; font-weight: bold; }
.rightcontainer { width:100%; height:100% margin: auto; border: 0px solid; border-radius: 4px; margin-bottom: 5px; border-bottom: 6px solid red;}
.rightcontainer .accountpanel .columncontainer .col-sm-6 { padding-right: 0px; padding-left: 0px;}
.leftcontainer {width:100%; margin: auto; margin-bottom: 5px; border-bottom: 6px solid red; }
.leftcontainer .eventinfo {width:100%; height: 38px; margin-bottom: 5px; border: 1px solid gray; }
.leftcontainer .eventinfo .split { height: 17px; }
.leftcontainer .eventinfo .split span { font-size: 12px; }
.leftcontainer .banner {width: 100%; height: 75px; border: 1px solid gray; margin-bottom: 5px; }
I can not understand why both side menu's are filling just the height of their own content instead of filling height of the parent div. Is there something I'm doing wrong? It fills fine if I dont add !DOCTYPE html to my project, but from what I understand its bad solution so I should find other way around..
Best regards
http://jsfiddle.net/zntxaspd/6/
Add display: flex;to .row.content:
.row.content { height: 100%; width:70%; margin: auto; display: flex; }
Add flex: 1; to .sidebar:
.sidenav { padding-top: 20px;background-color: #f1f1f1; flex: 1}
Adjust your media query to keep it responsive:
#media screen and (max-width: 767px) {
.sidenav {
height: auto;
padding: 15px;
}
.row.content {height:auto; display: block;}
}
Use bootstrap-4 CSS to achieve the desired result
Bootstrap 4
Also removed the extra row content div
html,
body {
height: 100%;
}
/* Set height of the grid so .sidenav can be 100% (adjust as needed) */
.row.content {
height: 100%;
width: 70%;
margin: auto;
}
/* Set gray background color and 100% height */
.sidenav {
padding-top: 20px;
background-color: #f1f1f1;
height: 100%;
}
/* On small screens, set height to 'auto' for sidenav and grid */
#media screen and (max-width: 767px) {
.sidenav {
height: auto;
padding: 15px;
}
.row.content {
height: auto;
}
}
h5 {
font-size: 14px;
border-bottom: 6px solid red;
font-weight: bold;
}
.rightcontainer {
width: 100%;
height: 100% margin: auto;
border: 0px solid;
border-radius: 4px;
margin-bottom: 5px;
border-bottom: 6px solid red;
}
.rightcontainer .accountpanel .columncontainer .col-sm-6 {
padding-right: 0px;
padding-left: 0px;
}
.leftcontainer {
width: 100%;
margin: auto;
margin-bottom: 5px;
border-bottom: 6px solid red;
}
.leftcontainer .eventinfo {
width: 100%;
height: 38px;
margin-bottom: 5px;
border: 1px solid gray;
}
.leftcontainer .eventinfo .split {
height: 17px;
}
.leftcontainer .eventinfo .split span {
font-size: 12px;
}
.leftcontainer .banner {
width: 100%;
height: 75px;
border: 1px solid gray;
margin-bottom: 5px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="container-fluid text-center">
<div class="row justify-content-center">
<div class="col-sm-2 sidenav">
<div class="leftcontainer">
<div class="banner"> Get Client Banner </div>
<div class="banner"> Guides Banner </div>
<h5> Event Schedule </h5>
<div class="eventinfo">
<div class="split"><span><strong>Bl</strong></span></div>
<div class="split"><span>0 D 0</span></div>
</div>
<div class="eventinfo">
<div class="split"><span><strong>Bl</strong></span></div>
<div class="split"><span>0 D 0</span></div>
</div>
<div class="eventinfo">
<div class="split"><span><strong>Bl</strong></span></div>
<div class="split"><span>0 D 0 H</span></div>
</div>
<div class="eventinfo">
<div class="split"><span><strong>Bl</strong></span></div>
<div class="split"><span>0 D 0 Hr</span></div>
</div>
<div class="eventinfo">
<div class="split"><span><strong>Bl</strong></span></div>
<div class="split"><span>0 D 0 Hr n</span></div>
</div>
<div class="eventinfo">
<div class="split"><span><strong>B</strong></span></div>
<div class="split"><span>0 D 0 </span></div>
</div>
<div class="eventinfo">
<div class="split"><span><strong>Bl</strong></span></div>
<div class="split"><span>0 D 0</span></div>
</div>
<div class="eventinfo">
<div class="split"><span><strong>Bl</strong></span></div>
<div class="split"><span>0 D 0 </span></div>
</div>
</div>
</div>
<div class="col-sm-7 text-left">
<h1>Welcome</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.</p>
<hr>
<h3>Test</h3>
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-3 sidenav">
<div class="well">
<p>ADS</p>
</div>
<div class="well">
<p>ADS</p>
</div>
</div>
</div>
</div>
I'm having trouble getting one of my absolutely positioned divs to display correctly. It's getting cut off unless I set a height for the parent (relative) div which I can't do as I will never know the height required.
I originally wasn't using any absolute positioning but the contents of the comm div were wrapping underneath the avatar div so I thought absolute positioning would fix it and it has, apart from the text being cut off at the bottom.
This is the structure and you can see what's happening in this fiddle.
body {
background: #212121;
font-family: arial;
}
.main {
width: 80%;
margin: 20px auto;
}
.wrap {
width: 100%;
background: white;
padding: 10px;
overflow: hidden;
position: relative;
}
a.avatar {
width: 45px;
height: 45px;
border-radius: 50%;
overflow: hidden;
display: inline-block;
float: left;
margin-right: 10px;
position: relative;
}
a.avatar img {
width: 100%;
}
.top {
display: block;
overflow: hidden;
position: absolute;
left: 70px;
}
a.name {
font-weight: bold;
margin-right: 10px;
float: left;
}
.posted {
color: #BBB;
font-size: 12px;
padding-top: 3px;
float: left;
}
p.comm {
display: block;
position: absolute;
left: 70px;
top: 20px;
height: 100%;
}
<div class="main">
<div class="wrap">
<img src="http://www.tangoflooring.ca/wp-content/uploads/2015/07/user-avatar-placeholder.png" />
<div class="top">
John Doe
<div class="posted">8 mins ago</div>
</div>
<p class="comm">Lorem ipsum dolor sit amet.
</p>
</div>
<div class="wrap">
<img src="http://www.tangoflooring.ca/wp-content/uploads/2015/07/user-avatar-placeholder.png" />
<div class="top">
Jane Doe
<div class="posted">11 mins ago</div>
</div>
<p class="comm">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
<div class="wrap">
<img src="http://www.tangoflooring.ca/wp-content/uploads/2015/07/user-avatar-placeholder.png" />
<div class="top">
Jimmy Doe
<div class="posted">18 mins ago</div>
</div>
<p class="comm">Ut enim ad minim veniam.
</p>
</div>
</div>
Try using this modified css code.
body {
background: #212121;
font-family: arial;
}
.main {
width: 80%;
margin: 20px auto;
}
.wrap {
width: 100%;
background: white;
padding: 10px;
position: relative;
}
a.avatar {
width: 45px;
height: 45px;
border-radius: 50%;
overflow: hidden;
display: inline-block;
float: left;
margin-right: 10px;
position: relative;
}
a.avatar img {
width: 100%;
}
.top {
display: flex;
margin-left: 70px;
}
a.name {
font-weight: bold;
margin-right: 10px;
}
.posted {
color: #BBB;
font-size: 12px;
padding-top: 3px;
}
p.comm {
display: block;
margin-left: 70px;
height: 100%;
}
You need to wrap .top and .comm in a div and with the use of flex you can achieve it
body {
background: #212121;
font-family: arial;
}
.main {
width: 80%;
margin:20px auto;
}
.wrap {
width: 100%;
background: white;
padding: 10px;
overflow: hidden;
position: relative;
display: flex;
}
a.avatar {
margin-right: 10px;
}
a.avatar img {
width: 45px;
height: 45px;
border-radius: 50%;
}
.top {
width: 100%;
overflow: hidden;
}
a.name {
font-weight: bold;
margin-right: 10px;
float: left;
}
.posted {
color: #BBB;
font-size: 12px;
padding-top: 3px;
float: left;
}
p.comm {
margin-top: 5px;
}
.right {
max-width: 88%;
}
<div class="main">
<div class="wrap">
<img src="http://www.tangoflooring.ca/wp-content/uploads/2015/07/user-avatar-placeholder.png">
<div class="right">
<div class="top">
Jane Doe
<div class="posted">11 mins ago</div>
</div>
<p class="comm">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do </p>
</div>
</div>
<div class="wrap">
<img src="http://www.tangoflooring.ca/wp-content/uploads/2015/07/user-avatar-placeholder.png">
<div class="right">
<div class="top">
Jane Doe
<div class="posted">11 mins ago</div>
</div>
<p class="comm">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="wrap">
<img src="http://www.tangoflooring.ca/wp-content/uploads/2015/07/user-avatar-placeholder.png">
<div class="right">
<div class="top">
Jane Doe
<div class="posted">11 mins ago</div>
</div>
<p class="comm">Lorem ipsum dolor sit amet</p>
</div>
</div>
</div>
Working fiddle here
Just modify on your p.comm selector like below:
p.comm {
display: block;
position: relative;
top: 10px;
padding-left: 60px;
}