css-position


CSS float image align


I need to add this image at the end of a line, in this way
Style:
h4 { border-bottom: 1px solid black; font-size: 1.6em;}
Code that I did:
<h4>Socializziamo <img src="flourish-decoration.png"
style="position:relative; display:inline-block; float:right;bottom:-7px;" />
</h4>
Is there a better way, because my solution sometimes does not works...
Riccardo
Here's an alternative to ggbhat's answer. The approach here is to apply relative positioning on the heading and absolute positioning on the nested image.
HTML
<h4>
Socializziamo <img src="http://i.stack.imgur.com/68LQd.png" />
</h4>
CSS
h4 {
border-bottom: 1px solid black;
font-size: 1.6em;
position: relative;
}
img {
position: absolute;
right: 0;
bottom: -1px;
}
Demo
http://jsfiddle.net/LqvTx/1/
Use :after psuedo element for adding background image .
h4
{
border-bottom:1px solid #000;
width:100px;
}
h4:after {
content:"";
background:url(http://i.stack.imgur.com/68LQd.png)no-repeat;
width: 30px;
height: 30px;
background-position:68% 25%;
position: absolute;
display: inline-block;
}
Demo:[http://jsfiddle.net/LqvTx/ ]

Related Links

How do you make leaflet popup window full screen on small screens?
Fix a div to the bottom while scrolling with skrollr
Sticky Footer at bottom of PAGE, not just bottom of WINDOW
How to set div absolute position from the parent div
Polymer paper-fab with position:fixed behaves strangely when used with core-list that has a scrollTarget
What is the use of “static” positioning in CSS?
CSS: fixed position
Style sheet positioning won't keep everything in place
Div on top 100%
CSS float image align
google sites html box tool css postion absolute
Manual Positioning of Shareaholic ShareBar Plugin
Div position (margin:auto)
Removing or Hiding Blank Space Left by Relative Positioning
Lightweight Javascript Responsive Positioning Library
Bootstrap 3.0 : Fixed column

Categories

HOME
assembly
oracle12c
jmeter
github-for-windows
object
mysql-workbench
jsf-2.2
bitbucket-api
javacc
aws-cli
parameters
3d-reconstruction
zip
missing-data
boto3
pcl-crypto
plist
redis-sentinel
libusb
gruntfile
esoteric-languages
microsoft-dynamics-nav
vuejs
template-engine
drive
asciidoctor-pdf
undertow
squashfs
babel
interbase
bulletphysics
amazon-quicksight
apktool
wcag
calculation
powershell-ise
sammy.js
demo
setup.py
ogc
postgresql-8.4
logback-groovy
contract
xmldocument
photos
show-hide
x++
serde
fclose
page-replacement
aquamacs
context-sensitive-grammar
modelsim
ngmaterial
java-websocket
gameplay-kit
swingworker
pocketsphinx-android
polyline
choice
stax
webjars
latin
watch-os-2
jboss-tools
stream-processing
query-by-example
project-organization
libav
realsense
jparsec
toast
pypiserver
ess
rate-limiting
rubaxa-sortable
branch-and-bound
jsvc
linked-tables
botan
cwrsync
matlab-deployment
fits
qtwebengine
theos
primitive-types
insight.database
mdichild
jqmodal
template-deduction
mintty
draw2d-js
android-audiorecord
kendo-dataviz
oocss
rolify
kaleidoscope
dolby-audio-api
asplinkbutton
mkv
qtconcurrent
subgraph
window-decoration
umra
timthumb
globals
wysiwym
flvplayback
technical-debt
online-storage

Resources

Mobile Apps Dev
Database Users
javascript
java
csharp
php
android
MS Developer
developer works
python
ios
c
html
jquery
RDBMS discuss
Cloud Virtualization
Database Dev&Adm
javascript
java
csharp
php
python
android
jquery
ruby
ios
html
Mobile App
Mobile App
Mobile App