Css positioning: how to position a block/paragraph under another
Tags: html,css,css-position,floating
Problem :
I have this html structure
<img class="media-object pull-left" src="http://placehold.it/40x40">
<h4 class="media-heading">Heading</h4>
<p>Paragraph lorem ipsum bla bla bla </p>
And I need this sort of positioning 
That is, I always want the paragraph to appear under the image. The most basic solution would be to give the h4 a margin-bottom sufficient to push the paragraph below the image (or give the p an equivalent margin-top).
Is there a better way to do this without knowing the image dimension and avoiding to use the margins to position the elements?
Solution :
.pull-left {
float: left;
}
p {
clear: both;
}
You may want to make this a little more specific using classes or id's for the <p> tag, however.
CSS Howto..
Its better to use pure css for this purpose, .note:hover { white-space: normal; text-overflow: clip; background-color: #eeeeee; max-width: 200px; position: absolute; } In this case, elements will retain the background...
You can either set text-align to center and line-height to 50% or try this: .circle { background: blue; width: 50px; height: 50px; position: relative; border-radius: 100%; } .icon { position:...
Another option for a graphical interface would be the canvas element. You can find some info on it here, here, and some demos of what it can do here. Personally,...
use jquery dotdotdot plugin to achieve this for multi lines. If it is for single line then it can be easily done with CSS alone. $("div").dotdotdot() DEMO Here is the...
You could have some classes that are just sizes like .big { width: 100px, height: 100px } .small { width: 20px, height: 20px } Then you would do <button class="big...
Yes, this is possible with a combination of the :before pseudo element and CSS counter-increment. The HTML: <ol> <li>Lorem</li> <li>Lorem</li> </ol> And the CSS: ol { counter-reset: li; } li...
If you are using a <br /> to create a new line, you can set the line-height css style to reduce the text vertical spacing. If you want to reduce...
Here's a solution that requires you to set the width of each "column". CSS: .some-class1 { display: inline-block; text-align: right; width: 100px; } .some-class2 { display: inline-block; text-align: right; width:...
$css = $logged_in ? 'success' : 'dummy-undefined-css-value'; echo "<h1 class=\"$css\">My Title</h1>"; ...
Use relative positioning, top, and possibly left. position: relative; top: -25px; left: -15px; Relative Positioning was defined in CSS 2.0. Which means no CSS3 required and it will work on...
You have position:absolute on the <a> tag, so the <p> tag is still sitting down below the image. Even though it has no height, it probably still has margins, which...
add class="category" for input fields and css: .category { float: left; display: block; } #category_1 { margin-left: 20px; /* or space you want..*/ } and remove those spaces ( ) not...
Apply white-space: normal; to .post
Here's a modern solution using flexbox. Regardless of the height of the header the rest of the elements will stretch vertically to fill the remaining space. Here's the fiddle: http://jsfiddle.net/mggLY/1/....
:after is equivalent to adding a child element to the end of the selected element. So if it's possible, you could move the styling to a new child element which...
To me, this looks like: <ul class="rated-list"> <li> <span class="rating">1086</span> <a href="/foo.html">Why Don't …</a> </li> </ul> You can then use CSS to give the span and a fixed widths and...
By default, here is the styling that is used to make the modal fade in from the top: .modal.fade .modal-dialog { transform: translate3d(0, -25%, 0); } .modal.in .modal-dialog { transform:...
if every column is an ul > li you may assign different line-height both to ul and li. Or just assign a line-height to each li and make some space...
See here: http://jsfiddle.net/alexwcoleman/6ue8vvba/ .box { position: relative; border: 1px solid #000; height:100px; width:300px; margin-top:100px; background:#fff; } .box:after, .box:before { bottom: 100%; left: 50%; border: solid transparent; content: " "; height:...
I believe it's: myobject.MozBoxShadow = '1px 1px 1px #000'; It doesn't follow the "typical" formatting of a style object (which would lower-case the "M") because of the initial "-" character....
Sure, you can do this if you like: http://jsbin.com/uhiyoj <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <style> blue { color: blue } </style> </head> <body> <blue>Hello World</blue> </body> </html> But,...
This is expected behaviour, see the w3 Spec. What it boils down to is that in instances where it is not possible to have visible and hidden together, the visible...
How about this: http://dabblet.com/gist/2520870 Your code was a mess. <style> * { padding: 0; margin: 0; } body { font-family: helvetica, serif; font-size: 14px; } ul { list-style-type: none; }...
html, body { margin: 0; padding: 0; } div { margin: 0; border: 1px solid black; width: 100%; height: 100%; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; } Without the box-sizing you will end...
First remove display:none; from your div with id=loader & add text-align:center; to it #loader{ position:relative; margin:0 auto; clear:left; height:auto; z-index: 0; text-align:center;/* Add This*/ } Working demo: http://jsfiddle.net/surendraVsingh/FCEhD/...
Updated demo: http://jsfiddle.net/n66Tf/1/ You can use the CSS :after psuedo element to create a customized tooltip element. Check this demo: http://jsfiddle.net/n66Tf/ HTML: <!-- render the tooltip text from the server...
Use this sintax $(function(){ $("div:not(#want)").contents().filter(function() { return this.nodeType == 3; //Node.TEXT_NODE }).remove(); }); Hope it helps....
Begin with responsive size on the element: .animate { width:100%; height: 0px; padding-bottom: 75%; } and since you have 43 steps, set the background animation accordingly @keyframes play { from...
You need JavaScript to solve this. <a href="javascript:void(0)" onclick="changeImage()"> <img style = "border-radius: 5px;" class="signin-all" src="assets/images/header/blank.png" id="image"> </a> <script> function changeImage() { document.getElementById("image").src="newImageSource"; }...
If you don't want to use a framework (my advice is to use it for save a lot of money, however use ZURB foundation that is mobile-first design) you have...