This question already has answers here:
How to create fluid trapezoid image with css?
(3 answers)
Closed 6 years ago.
What is the best way to create a diagonal shape like this with pure CSS maybe only using :after and :before pseudo elements on the content div? Thanks.
maybe it:
.content {
position: relative;
perspective: 100vw;
padding: 30px;
}
.content::before {
content: '';
position: absolute;
z-index: -1;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 130%;
background: tomato;
transform-origin: 100% 50%;
transform: translate(-25%) rotateY(-20deg);
outline: 1px solid transparent;
}
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae, laudantium.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate voluptatum recusandae quos soluta impedit! Deleniti facere enim, quia ut quisquam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti eligendi dignissimos adipisci voluptatem voluptate ex maiores consequuntur, cum ducimus voluptatum, ratione similique asperiores reiciendis, odit quis sed. Reprehenderit doloribus, delectus.
</div>
One way is to set a background on a container and rotate with a CSS transform.
Here's a simple example, use as many overlapping containers as needed:
body {
margin: 0;
overflow-x: hidden;
font-family: monospace;
color: #fff;
}
.container {
width: 110vw;
margin-top:10vh;
margin-left: -10vw;
padding-left: 10vw;
background: red;
box-shadow: 0 0 15px rgba(0, 0, 0, .33);
transform: rotate(-5deg);
}
.container-inner {
padding: 10vw;
max-width: 80vw;
transform: rotate(5deg);
}
h1 {
margin-left: 10%;
padding-top: 50px;
}
<div class="container">
<h1>Diagonal Background</h1>
<div class="container-inner">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.
</p>
</div>
</div>
Related
I have some problem with position absolute with inline elements.
For example:
.text {
position: relative;
}
.element {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <span class="text">Proin porttitor sapien vitae felis maximus, in molestie sem egestas. Vivamus lacus orci, molestie eget nibh in, lobortis blandit risus.<span class="element"></span></span> Sed a diam sagittis, tempor ligula et, mollis velit. Ut quis est congue, vestibulum magna non, ullamcorper enim. Nam ultricies, est in elementum aliquet
Result:
Need to get something like this:
The black line must be an HTML element.
Please, help me.
The only other way i can think of is to double up the markup and align them on top of each other then cover the portion you want.
[container] {
position: relative;
animation: alter 5s linear infinite alternate;
width: 200px;
height: 200px;
}
[text],
[mask] {
padding: 10px;
border: 1px solid;
display: inline-block;
}
[mask] {
position: absolute;
left: 0;
top: 0;
color: #d9020200;
}
[mask]>[cover] {
background: black;
}
#keyframes alter {
to {
width: 400px;
height: 400px;
}
<div container>
<span text>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus veritatis, corporis eos aperiam ex eum corrupti modi error incidunt. Ipsam enim similique dolore unde ratione facere libero hic minus accusamus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus veritatis, corporis eos aperiam ex eum corrupti modi error incidunt. Ipsam enim similique dolore unde ratione facere libero hic minus accusamus.
</span>
<span mask>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus veritatis, corporis eos aperiam ex eum <span cover>corrupti modi error incidunt. Ipsam enim similique dolore unde ratione facere libero hic minus accusamus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. </span>Necessitatibus
veritatis, corporis eos aperiam ex eum corrupti modi error incidunt. Ipsam enim similique dolore unde ratione facere libero hic minus accusamus.
</span>
</div>
If you want to hide your text, then we can color text:
.spoiler {
color:transparent;
background-color: black;
}
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<span class="spoiler"> 1 start Proin porttitor sapien vitae felis maximus, in molestie sem egestas.
Vivamus lacus orci, molestie eget nibh in, lobortis blandit risus. 1 start
</span>
Sed a diam sagittis, tempor ligula et, mollis velit. Ut quis est congue, vestibulum magna non, ullamcorper enim. Nam ultricies, est in elementum aliquet
</p>
I would like to recreate the iTunes album view effect on the web and it must be responsive. I made an animated GIF to show the desired effect: http://files.katart.com/sgDkRGI
I've started a codepen using flexbox, but I can't seem to get the tabs to stay at the top. You can view it here: https://codepen.io/katartgraphics/pen/pWvNrP
Here is the markup:
jQuery(function($) {
$('.tab').on('click', function() {
$(this).siblings('.tab-content').slideUp();
$(this).next().slideDown();
});
});
.tabs-wrapper {
margin: 48px auto;
text-align: center;
}
.tab-container {
max-width: 960px;
margin: auto;
padding: 0 24px;
}
.tab > span {
display: block;
width: 100%;
height: 42px;
max-width: 280px;
margin: auto;
padding: 0 20px;
color: #555;
font-size: 14px;
text-transform: uppercase;
font-weight: 600;
line-height: 42px;
border: 1px solid #fff;
border-bottom: none;
background-color: whitesmoke;
box-sizing: border-box;
}
.tab-content {
display: none;
padding-top: 1rem;
padding-bottom: 1rem;
text-align: left;
background-color: tomato;
}
.tab-content > *:first-child { margin-top: 0; }
.tab-content > *:last-child { margin-bottom: 0; }
#media (min-width: 600px) {
.tabs-wrapper {
position: relative;
display: flex;
flex-flow: row wrap;
justify-content: center;
}
.tab {
positiion: relative;
top: 0;
flex: 0 1 auto;
}
.tab-content {
position: relative;
top: 0;
flex: 1 1 100%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tabs-wrapper">
<div class="tab"><span>Tab 1</span></div>
<div id="tab1" class="tab-content">
<div class="tab-container">
<h4>Tab 1 Content</h4>
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Etiam porta sem malesuada magna mollis euismod. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
<div class="tab"><span>Tab 2</span></div>
<div id="tab2" class="tab-content">
<div class="tab-container">
<h4>Tab 2 Content</h4>
<p>Curabitur blandit tempus porttitor. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="tab"><span>Tab 3</span></div>
<div id="tab3" class="tab-content">
<div class="tab-container">
<h4>Tab 3 Content</h4>
<p>Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
</div>
</div>
<div class="tab"><span>Tab 4</span></div>
<div id="tab4" class="tab-content">
<div class="tab-container">
<h4>Tab 4 Content</h4>
<p>Nulla vitae elit libero, a pharetra augue. Etiam porta sem malesuada magna mollis euismod. Aenean lacinia bibendum nulla sed consectetur. Curabitur blandit tempus porttitor. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Cras mattis consectetur purus sit amet fermentum.</p>
</div>
</div>
</div>
<h2>Other Content</h2>
<div>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quis sapiente quod unde, dicta asperiores ipsa nam eius earum quisquam natus tempore molestias necessitatibus consequuntur id ab illum modi assumenda reprehenderit!</div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed eligendi commodi facilis qui aut totam ipsam neque quod tempore omnis corrupti quaerat tenetur labore nesciunt, eum pariatur molestias velit a!</div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium sequi unde iure iste aperiam ipsum officia temporibus consequuntur a pariatur aliquid, autem error, velit nam ad vitae eius deleniti cum.</div>
I am experimenting a bit with calc on css to define some external space (like an external margin)
For example in this 3 column layout, the resulting width of the central column is a bit diferent than the other two, but I can not figure out how to make the text the same width.
There are some requirements I need.
I need to use only padding, not margin.
I can not add padding to the container C3 in this case.
I want to solve it using the logic under calc. I don't know if the percentages are applied first, or I need to define the paddings first to the computer later solve the percentages...
I prefer to use the border-box model, because it is solving me a lot of problems on other places of my code... but probably I can sacrifice this one.
body {
margin: 0;
padding 0;
}
* {
box-sizing: border-box;
}
p {
text-align: justify;
}
.C3 {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.C3>div {
width: 33.33%;
padding: 50px;
}
.C3>div:first-child {
background-color: #DFD;
width: calc(33.33% + 140px);
padding-left: 140px;
}
.C3>div:last-child {
background-color: #FEE;
width: calc(33.33% + 140px);
padding-right: 140px;
}
<section class="C3">
<div>
<p>1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus et enim justo, vitae vulputate eros. Morbi nec ligula orci. Donec vel risus eros.Nunc est augue, varius sagittis aliquam a, mollis et sapien. In mollis adipiscing leo non bibendum.</p>
</div>
<div>
<p>2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus et enim justo, vitae vulputate eros. Morbi nec ligula orci. Donec vel risus eros.</p>
</div>
<div>
<p>3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus et enim justo, vitae vulputate eros. Morbi nec ligula orci. Donec vel risus eros. Nunc est augue, varius sagittis aliquam a, mollis et sapien. In mollis adipiscing leo non bibendum.</p>
</div>
</section>
Any ideas?
Since you're using box-sizing: border-box, the width already includes the padding. The 140px are being added twice.
width: 33.33% is all that's needed.
4castle answer made me realize that yes, I was repeating something, but i found it that was the 50px.
So in my margin I needed to substract 50px from the calc, and now I have 90px.
The diference is subtle but now I have the exact same column text size.
body {margin: 0; padding 0;}
*{box-sizing: border-box;}
p {
text-align: justify;}
.C3 {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;}
.C3>div {
width: 33.33%;
padding: 50px;}
.C3>div:first-child {
background-color: #DFD;
width: calc(33.33% + 90px);
padding-left: 140px;}
.C3>div:last-child {
background-color: #FEE;
width: calc(33.33% + 90px);
padding-right: 140px;}
<section class="C3">
<div>
<p>1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus et enim justo, vitae vulputate eros. Morbi nec ligula orci. Donec vel risus eros.Nunc est augue, varius sagittis aliquam a, mollis et sapien. In mollis adipiscing leo non bibendum.</p>
</div>
<div>
<p>2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus et enim justo, vitae vulputate eros. Morbi nec ligula orci. Donec vel risus eros.</p>
</div>
<div>
<p>3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus et enim justo, vitae vulputate eros. Morbi nec ligula orci. Donec vel risus eros. Nunc est augue, varius sagittis aliquam a, mollis et sapien. In mollis adipiscing leo non bibendum.</p>
</div>
</section>
I need to create a curved, gradient box shadow in the shape of an ellipsis, which needs to be horizontally centered behind a div and offset to the bottom.
This is my markup:
<div class="about-tru">
<div class="container">
<h2 class="text-center heading">Welcome To TruCircles</h2>
<div class="row">
<div class="col-sm-10 col-sm-offset-1">
<div class="col-sm-4 text-center"><img src="img/trucircles-img.jpg" alt="trucircles-image" class="img-responsive"></div>
<div class="col-sm-7"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam facilisis dolor metus, sed feugiat diam finibus vitae. Sed dolor justo, consequat vel vulputate vitae, venenatis efficitur nibh. Vivamus blandit at nulla vel tempor. Nullam sodales nibh lorem, sed elementum lorem imperdiet sed. In in felis feugiat, laoreet nisl sit amet, blandit turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vestibulum dolor ut ligula ultricies, a ornare mauris interdum. Phasellus sollicitudin urna ac tortor elementum euismod.</p>
</div>
</div>
</div>
</div>
</div>
do you want a shadow of 50% width and in the middle of the div.about-tru, check the fiddle I've created -
http://jsfiddle.net/nw6vzd3L/
Something like this ?
.about-tru{
box-shadow : 0 0 20px;
border-radius: 6px;
margin : 10px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="about-tru">
<div class="container">
<h2 class="text-center heading">Welcome To TruCircles</h2>
<div class="row">
<div class="col-sm-10 col-sm-offset-1">
<div class="col-sm-4 text-center"><img src="http://tododepende.com/wp-content/uploads/2013/09/lorem_ipsum.gif" alt="trucircles-image" class="img-responsive"></div>
<div class="col-sm-7"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam facilisis dolor metus, sed feugiat diam finibus vitae. Sed dolor justo, consequat vel vulputate vitae, venenatis efficitur nibh. Vivamus blandit at nulla vel tempor. Nullam sodales nibh lorem, sed elementum lorem imperdiet sed. In in felis feugiat, laoreet nisl sit amet, blandit turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vestibulum dolor ut ligula ultricies, a ornare mauris interdum. Phasellus sollicitudin urna ac tortor elementum euismod.</p>
</div>
</div>
</div>
</div>
</div>
As far as I know you can't make an actual css-shadow in the shape of an ellipsis (which as far as I understand is what you want to achieve).
But you can fake it very well with a gradient background - for example on a pseudo-element:
CSS
.round_shadow {
position: relative;
border-radius: 5px;
position: relative;
border: 1px solid #f00;
background: #fff;
padding: 1em;
}
.round_shadow:after {
display: block;
content: "";
background: radial-gradient(ellipse at center, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 66%);
z-index: -1;
position: absolute;
top: 80%;
right: 10%;
left: 10%;
bottom: -30%;
}
Obviously you can adjust the top, left, right and bottom values to position the shadow wherever you want. Also note that you may need browser-prefixes for the gradient background to work if legacy browser support is an issue.
HTML
<div class="round_shadow">
<p>De illis, cum volemus. Quod totum contra est. In schola desinis. Quis est tam dissimile homini. Respondeat totidem verbis. Tollenda est atque extrahenda radicitus.</p>
<p>Quia nec honesto quic quam honestius nec turpi turpius. Atqui reperies, inquit, in hoc quidem pertinacem; Non minor, inquit, voluptas percipitur ex vilissimis rebus quam ex pretiosissimis. Nihilo beatiorem esse Metellum quam Regulum. Illa videamus, quae a te de amicitia dicta sunt. Quantum Aristoxeni ingenium consumptum videmus in musicis? Hos contra singulos dici est melius. Aliter enim explicari, quod quaeritur, non potest. Itaque haec cum illis est dissensio, cum Peripateticis nulla sane.</p>
<p>Cum ageremus, inquit, vitae beatum et eundem supremum diem, scribebamus haec. Quam si explicavisset, non tam haesitaret. Et nunc quidem quod eam tuetur, ut de vite potissimum loquar, est id extrinsecus; Quaesita enim virtus est, non quae relinqueret naturam, sed quae tueretur.</p>
</div>
.round_shadow {
position: relative;
border-radius: 5px;
position: relative;
border: 1px solid #f00;
background: #fff;
padding: 1em;
}
.round_shadow:after {
display: block;
content: "";
background: radial-gradient(ellipse at center, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 66%);
z-index: -1;
position: absolute;
top: 80%;
right: 10%;
left: 10%;
bottom: -30%;
}
<div class="round_shadow">
<p>De illis, cum volemus. Quod totum contra est. In schola desinis. Quis est tam dissimile homini. Respondeat totidem verbis. Tollenda est atque extrahenda radicitus.</p>
<p>Quia nec honesto quic quam honestius nec turpi turpius. Atqui reperies, inquit, in hoc quidem pertinacem; Non minor, inquit, voluptas percipitur ex vilissimis rebus quam ex pretiosissimis. Nihilo beatiorem esse Metellum quam Regulum. Illa videamus, quae a te de amicitia dicta sunt. Quantum Aristoxeni ingenium consumptum videmus in musicis? Hos contra singulos dici est melius. Aliter enim explicari, quod quaeritur, non potest. Itaque haec cum illis est dissensio, cum Peripateticis nulla sane.</p>
<p>Cum ageremus, inquit, vitae beatum et eundem supremum diem, scribebamus haec. Quam si explicavisset, non tam haesitaret. Et nunc quidem quod eam tuetur, ut de vite potissimum loquar, est id extrinsecus; Quaesita enim virtus est, non quae relinqueret naturam, sed quae tueretur.</p>
</div>
Edit
Ok, so elliptical was not not desired. To make a rectangular shadow I can think of two solutions, the primary difference between them consists in the options you have for positioning...
The first and probably simplest would be to just use a box-shadow with a negative spread (4th parameter):
.centered_shadow {
border-radius: 5px;
border: 1px solid #f00;
background: #fff;
padding: 1em;
box-shadow: 0 20px 10px -20px rgba(0,0,0,.3);
}
.centered_shadow {
border-radius: 5px;
border: 1px solid #f00;
background: #fff;
padding: 1em;
box-shadow: 0 60px 10px -40px rgba(0, 0, 0, 0.3)
}
<div class="centered_shadow">
<p>De illis, cum volemus. Quod totum contra est. In schola desinis. Quis est tam dissimile homini. Respondeat totidem verbis. Tollenda est atque extrahenda radicitus.</p>
<p>Quia nec honesto quic quam honestius nec turpi turpius. Atqui reperies, inquit, in hoc quidem pertinacem; Non minor, inquit, voluptas percipitur ex vilissimis rebus quam ex pretiosissimis. Nihilo beatiorem esse Metellum quam Regulum. Illa videamus, quae a te de amicitia dicta sunt. Quantum Aristoxeni ingenium consumptum videmus in musicis? Hos contra singulos dici est melius. Aliter enim explicari, quod quaeritur, non potest. Itaque haec cum illis est dissensio, cum Peripateticis nulla sane.</p>
<p>Cum ageremus, inquit, vitae beatum et eundem supremum diem, scribebamus haec. Quam si explicavisset, non tam haesitaret. Et nunc quidem quod eam tuetur, ut de vite potissimum loquar, est id extrinsecus; Quaesita enim virtus est, non quae relinqueret naturam, sed quae tueretur.</p>
</div>
The second method is basically the same as my suggestion for an elliptical shadow (which may give better control of the shadows position in some situations), except you give the pseudo-element a shadow instead of a gradient background, so:
.round_shadow {
border-radius: 5px;
position: relative;
border: 1px solid #f00;
background: #fff;
padding: 1em;
}
.round_shadow:after {
display: block;
content: "";
z-index: -1;
position: absolute;
top: 80%;
right: 25%;
left: 25%;
bottom: 0;
border-radius: 10px;
box-shadow: 0 30px 50px rgba(0,0,0,.3);
}
.round_shadow {
border-radius: 5px;
position: relative;
border: 1px solid #f00;
background: #fff;
padding: 1em;
}
.round_shadow:after {
display: block;
content: "";
z-index: -1;
position: absolute;
top: 80%;
right: 25%;
left: 25%;
bottom: 0;
border-radius: 10px;
box-shadow: 0 30px 50px rgba(0,0,0,.3);
}
<div class="round_shadow">
<p>De illis, cum volemus. Quod totum contra est. In schola desinis. Quis est tam dissimile homini. Respondeat totidem verbis. Tollenda est atque extrahenda radicitus.</p>
<p>Quia nec honesto quic quam honestius nec turpi turpius. Atqui reperies, inquit, in hoc quidem pertinacem; Non minor, inquit, voluptas percipitur ex vilissimis rebus quam ex pretiosissimis. Nihilo beatiorem esse Metellum quam Regulum. Illa videamus, quae a te de amicitia dicta sunt. Quantum Aristoxeni ingenium consumptum videmus in musicis? Hos contra singulos dici est melius. Aliter enim explicari, quod quaeritur, non potest. Itaque haec cum illis est dissensio, cum Peripateticis nulla sane.</p>
<p>Cum ageremus, inquit, vitae beatum et eundem supremum diem, scribebamus haec. Quam si explicavisset, non tam haesitaret. Et nunc quidem quod eam tuetur, ut de vite potissimum loquar, est id extrinsecus; Quaesita enim virtus est, non quae relinqueret naturam, sed quae tueretur.</p>
</div>
I have the following code. Right now the Title is aligned vertical top of the image. But the description is still wrapping (blocked) below the image and I want it to also be top aligned, right under the title next to the image like the title is, but again below the title.
.vtop
{
display: inline-block;
vertical-align: top;
float: none;
}
.padding-top-bottom-5
{
padding-top: 5px !important;
padding-bottom: 5px !important;
}
.nopadding
{
padding: 0 !important;
}
.inline-block
{
display: inline-block;
}
<div class="col-lg-9 well margin-top-5 padding-top-bottom-5">
<div class="row">
<div class="col-lg-12 well nopadding">
<p>
<img src="../../../Images/thumbs/206.jpg" class="vtop" />
<span class="bold inline-block">Title of Something</span>
</p>
<p class="vtop">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce efficitur fermentum velit, faucibus volutpat diam pretium nec. Praesent quis congue mi. Donec a nibh efficitur, mollis purus at, elementum lorem. Praesent tempor pharetra felis, vel consectetur lectus sodales nec. Suspendisse vel molestie dolor, id tincidunt eros. Mauris et turpis rutrum, sollicitudin augue nec, aliquet nisl. Vestibulum mattis ipsum velit, et convallis est mattis porttitor. Morbi sit amet finibus risus, et maximus neque. Mauris fermentum magna et ligula consectetur lobortis.
</p>
</div>
</div>
Try this
.vtop
{
display: inline-block;
vertical-align: top;
float: left;
margin-right: 20px;
}
.padding-top-bottom-5
{
padding-top: 5px !important;
padding-bottom: 5px !important;
}
.nopadding
{
padding: 0 !important;
}
.inline-block
{
display: inline-block;
}
<div class="col-lg-9 well margin-top-5 padding-top-bottom-5">
<div class="row">
<div class="col-lg-12 well nopadding">
<p>
<img src="http://www.lastmiracle.com/wp-content/uploads/10/The-engineering-in-Nature-200x200.jpg" class="vtop" />
<span class="bold inline-block">Title of Something</span>
<br /><br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce efficitur fermentum velit, faucibus volutpat diam pretium nec. Praesent quis congue mi. Donec a nibh efficitur, mollis purus at, elementum lorem. Praesent tempor pharetra felis, vel consectetur lectus sodales nec. Suspendisse vel molestie dolor, id tincidunt eros. Mauris et turpis rutrum, sollicitudin augue nec, aliquet nisl. Vestibulum mattis ipsum velit, et convallis est mattis porttitor. Morbi sit amet finibus risus, et maximus neque. Mauris fermentum magna et ligula consectetur lobortis.
</p>
</div>
</div>
It sounds like you're after the CSS concept called the media object. It's designed specifically for the scenario you mention; a layout as follows:
+---------+ ~~~~~~~~~~ ~~~~~
| |
| | ~~~~~ ~~~~~ ~~~~
| | ~~~~~~~~~ ~~~~~~
+---------+
You can achieve this with a basic structure:
<div class="media">
<img src="http://placehold.it/50x50" alt="" class="media__img" />
<div class="media__body">
<p>Title of Something.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea sed voluptate unde rerum quasi quidem, praesentium odio. Necessitatibus quo, non unde repudiandae adipisci, et corrupti eius ipsa, tempore ex aut. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea sed voluptate unde rerum quasi quidem, praesentium odio. Necessitatibus quo, non unde repudiandae adipisci, et corrupti eius ipsa, tempore ex aut.</p>
</div>
</div>
And just a few lines of CSS:
.media { display: block }
.media__img {
float: left;
margin-right: 24px
}
.media__body {
overflow: hidden;
display: block;
}
Here is a working fiddle to demonstrate.
You know there's always so many ways to solve problems. It seems to me it was a bit harder for me to understand what exactly was going on since you left out a lot of css info for the rest of the tags, but as far as I can see I feel like you're doing a lot of work to potentially do something quite simple. Hopefully that's not being to harsh I commend your efforts! I left your tags that aren't referenced in the css so it won't break you're code and you can paste it in easily.
All you need to do is float the image left .floatLeft and then create a div beside it with a margin-left to push the .content div containing the title/paragraph below out from the floated div since floats don't hold "real" space in the content flow of a web site.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.vtop
{
display: inline-block;
vertical-align: top;
float: none;
}
.padding-top-bottom-5
{
padding-top: 5px !important;
padding-bottom: 5px !important;
}
.nopadding
{
padding: 0 !important;
}
.inline-block
{
display: inline-block;
}
.floatLeft {
float:left;
}
.content {
margin-left:210px;
}
</style>
</head>
<body>
<div class="col-lg-9 well">
<div class="row">
<div class="col-lg-12 well nopadding">
<img class="floatLeft" src="http://www.lastmiracle.com/wp-content/uploads/10/The-engineering-in-Nature-200x200.jpg" />
<div class="content">
<p><span class="bold inline-block">Title of Something</span></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce efficitur fermentum velit, faucibus volutpat diam pretium nec.
Praesent quis congue mi. Donec a nibh efficitur, mollis purus at, elementum lorem. Praesent tempor pharetra felis, vel consectetur
lectus sodales nec. Suspendisse vel molestie dolor, id tincidunt eros. Mauris et turpis rutrum, sollicitudin augue nec, aliquet nisl.
Vestibulum mattis ipsum velit, et convallis est mattis porttitor. Morbi sit amet finibus risus, et maximus neque. Mauris fermentum
magna et ligula consectetur lobortis.</p>
</div>
</div>
</div>
</body>
</html>