right align an image using CSS HTML - html

How can I right-align an image using CSS.
I do not want the text to wrap-around the image. I want the right aligned image to be on a line by itself.

<img style="float: right;" alt="" src="http://example.com/image.png" />
<div style="clear: right">
...text...
</div>
jsFiddle.

img {
display: block;
margin-left: auto;
}

Float the image right, which will at first cause your text to wrap around it.
Then whatever the very next element is, set it to { clear: right; } and everything will stop wrapping around the image.

There are a few different ways to do this but following is a quick sample of one way.
<img src="yourimage.jpg" style="float:right" /><div style="clear:both">Your text here.</div>
I used inline styles for this sample but you can easily place these in a stylesheet and reference the class or id.

To make the image move right:
float: right;
To make the text not wrapped:
clear: right;
For best practice, put the css code in your stylesheets file. Once you add more code, it will look messy and hard to edit.

My workaround for this issue was to set display: inline to the image element.
With this, your image and text will be aligned to the right if you set text-align: right from a parent container.

Easier / more organized way to do this is with some css.
CSS Above, HTML below with the snippet.
div {
clear: right;
}
/*
img {
float:right
}*/
/* img part is unneeded unless you want it to be a image on the right the whole time */
<html>
<!-- i am using an image from my website as a quick example-->
<img src="https://raw.githubusercontent.com/ksIsCute/GtGraffiti/gh-pages/icon.ico" alt="my image!" style=float:right>
<div>My Text Here</div>
<!-- Text goes below the image, and not beside it.-->
<img src="https://raw.githubusercontent.com/ksIsCute/GtGraffiti/gh-pages/icon.ico" alt="my image!" style=float:right>
<div>
<h1> I support headers! </h1>
<blockquote> And blockquotes!! </blockquote>
and hyperlinks!
</div>
<!-- THE CODE BELOW HERE IS **NOT** NEEDED!! (except for the </html>) -->
<h2 style="text-align:center;color:Grey;font-family:verdana"> Honestly I hope this helped you, if there is any error to my work please feel free to tell me. </h2>
</html>

Related

How to have some text to the right of an image and some under it

I'm making a website and I've come across this problem: I need an image with dynamic size (25% to be exact) to have some text to the right of it and some under it.
I know that text can be put to the right of the image using float: right, but that makes it impossible to put any text always under the image.
Here's a jsfiddle: https://jsfiddle.net/7r51y7d4/2/
Since the image has a dynamic size, I can't just add lots of line breaks, because not only would the code be ugly, but it wouldn't work well on any device with a different screen resolution than mine.
Putting the image and the right text in a div won't help because the div will only wrap around the text, leaving the image sticking out through the div's border.
If JavaScript is needed, then so be it, however, I need a PHP-free solution. (pure HTML/CSS would be nice, though)
Looks like you want the div with clear: both CSS rule, for more info: https://www.w3schools.com/cssref/pr_class_clear.asp
img {
float: left;
margin: 8px;
}
.clear {
clear: both;
}
<img src="http://cdn.nba.net/assets/icons/apple-touch-icon.png" width="25%">
<p>
I want this text to be to the right of this image
</p>
<div class="clear"></div>
<p>
I want this text to be under the image
</p>
And here is the fiddle: https://jsfiddle.net/7r51y7d4/4/
Simply use clear:both to clear floating and the second text will go under the image :
img {
float: left;
margin: 8px;
}
<img src="http://cdn.nba.net/assets/icons/apple-touch-icon.png" width="25%">
<p>
I want this text to be to the right of this image
</p>
<div style="clear:both"></div>
<p>
I want this text to be under the image
</p>
You can use the clear property to specify that the text should be inserted after floating elements.
<p style="clear: both;">
Lorem ipsum
</p>
JSFiddle: https://jsfiddle.net/7r51y7d4/3/
Target your second paragraph with CSS and use clear:both;
FOR EXAMPLE:
HTML Code:
<img src="http://cdn.nba.net/assets/icons/apple-touch-icon.png" width="25%">
<p>
I want this text to be to the right of this image
</p>
<p id="secondParagraph">
I want this text to be under the image
</p>
CSS Code:
img {
float: left;
margin: 8px;
}
#secondParagraph {
clear:both;
}
I would also set your 25% width with CSS as well. It is best to do all styling externally with CSS, instead of in-line with HTML. Easier to manage.

Css - Wrap text around image then reposition at break point

I have a little tricky responsive css problem.
I'm creating articles where there is a body of text on the left, and an image on the right. And the text wraps around the image. Then on the break point I need the body copy to be above the image.
When i use this code:
<section class="news-article-body">
<img src="img/news-article-image.jpg" alt="" title=""/>
<p>
Lorem Ipsum...
</p>
</section
Css:
.news-article-body img {
float: right;
}
Looks great. Image floats right and the text wraps around when needed.
But because the image tag is before the copy I cant get the image below the copy at the break point.
So basically I need the text to wrap with this html (Or another solution):
<section class="news-article-body">
<p>
Lorem Ipsum...
</p>
<img src="img/news-article-image.jpg" alt="" title=""/>
</section
Anyone know of a technique for this? I couldnt seem to figure it out.
Thanks
You could use display:flex and order :
at break point it would be from your piece of HTML :
.news-article-body {
display:flex;
flex-direction:column;
}
.news-article-body img {
order:2;
}
Javascript and float clearing can help too : DEMO or DEMO
Code example :
onload=function() {
document.getElementById('myImg').style.position='absolute';// take img out of the flow
var myoffsetHeight = document.getElementById('myP').offsetHeight;//return height of <p>
document.getElementById('myT').style.height=myoffsetHeight +'px'; //set height to floatting element
document.getElementById('myImg').style.position='static';//bring img back in the flow
}
from a structure like this :
<section >
<b id="myT"></b>
<img src="http://lorempixel.com/250/100/" id="myImg"/>
<p id="myP">Pellentesque ....</p>
</section>
in both example, do not forget set your breakpoint
Simply insert an <img> tag at the beginning of your article text and use align="right" to get the text to wrap around it.

How to place Text and an Image next to each other in HTML?

I want the text and the image to be next to each other but I want the image to be on the far left of the screen and I want the text to be on the far right of the screen. This is what I currently have....
<body>
<img src="website_art.png" height= "75" width= "235"/>
<h3><font face="Verdana">The Art of Gaming</font></h3>
</body>
How can I do this?
Thanks
img {
float:left;
}
h3 {
float:right;
}
jsFiddle example
Note that you will probably want to use the style clear:both on whatever elements comes after the code you provided so that it doesn't slide up directly beneath the floated elements.
You want to use css float for this, you can put it directly in your code.
<body>
<img src="website_art.png" height= "75" width="235" style="float:left;"/>
<h3 style="float:right;">The Art of Gaming</h3>
</body>
But I would really suggest learning the basics of css and splitting all your styling out to a separate style sheet, and use classes. It will help you in the future. A good place to start is w3schools or, perhaps later down the path, Mozzila Dev. Network (MDN).
HTML:
<body>
<img src="website_art.png" class="myImage"/>
<h3 class="heading">The Art of Gaming</h3>
</body>
CSS:
.myImage {
float: left;
height: 75px;
width: 235px;
font-family: Veranda;
}
.heading {
float:right;
}
You can use vertical-align and floating.
In most cases you want to vertical-align: middle, the image.
Here is a test: http://www.w3schools.com/cssref/tryit.asp?filename=trycss_vertical-align
vertical-align: baseline|length|sub|super|top|text-top|middle|bottom|text-bottom|initial|inherit;
For middle, the definition is: The element is placed in the middle of the parent element.
So you might want to apply that to all elements within the element.

HTML/CSS How to format Text and have an Image floating next to it

Pretty rusty on my HTML and CSS skills, I've done this before at some point but forgotten how to do this.
I have text on the left side of the page, I want an image on the right side of this div next to it, floating there and not disturbing the text formatting.
Text Description.....
Description..........
Description.......... Image Goes About Here
Description..........
Description..........
Does anyone know how to do this off the top of their head? Thank you.
The easy solution is to use display: inline-block to display information next to an image, without having to add inline css.
img, p {
display: inline-block;
}
<img src="image.png" />
<p>
text left
</p>
use padding and float...
I.e.
<div id="container">
<div id="text" style="padding-right: <image-width+few px>">
text text text
text text text
</div>
<img src="<imagesrc" style= "float:right" />
</div>
padding so the text doesn't overlap with the image.
this should give you the desired effect.
After the image, add a div with clear:both to return to use all the dims of the div.
for example
<style type="text/css">
#picture {
float: right;
}
#text {
margin-right: 110px;
}
</style>
edited

How to display items side-by-side without using tables?

For example you want to display an image beside a text, usually I would do this:
<table>
<tr>
<td><img ...></td>
<td>text</td>
</tr>
</table>
Is there a better alternative?
You should float them inside a container that is cleared.
Example:
https://jsfiddle.net/W74Z8/504/
A clean implementation is the "clearfix hack". This is Nicolas Gallagher's version:
/**
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* contenteditable attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that are clearfixed.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.clearfix:before,
.clearfix:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.clearfix:after {
clear: both;
}
/**
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.clearfix {
*zoom: 1;
}
​
All these answers date back to 2016 or earlier... There's a new web standard for this using flex-boxes. In general floats for these sorts of problems is now frowned upon.
HTML
<div class="image-txt-container">
<img src="https://images4.alphacoders.com/206/thumb-350-20658.jpg">
<h2>
Text here
</h2>
</div>
CSS
.image-txt-container {
display: flex;
align-items: center;
flex-direction: row;
}
Example fiddle: https://jsfiddle.net/r8zgokeb/1/
Yes, divs and CSS are usually a better and easier way to place your HTML. There are many different ways to do this and it all depends on the context.
For instance, if you want to place an image to the right of your text, you could do it like so:
<p style="width: 500px;">
<img src="image.png" style="float: right;" />
This is some text
</p>
And if you want to display multiple items side by side, float is also usually preferred.For example:
<div>
<img src="image1.png" style="float: left;" />
<img src="image2.png" style="float: left;" />
<img src="image3.png" style="float: left;" />
</div>
Floating these images to the same side will have then laying next to each other for as long as you hava horizontal space.
these days div is the new norm
<div style="float:left"><img.. ></div>
<div style="float:right">text</div>
<div style="clear:both"/>
What about display:inline?
<html>
<img src='#' style='display:inline;'/>
<p style='display:inline;'> Some text </p>
</html>
Usually I do this:
<div>
<p>
<img src='1.jpg' align='left' />
Text Here
<p>
</div>
It depends on what you want to do and what type of data/information you are displaying. In general, tables are reserved for displaying tabular data.
An alternate for your situation would be to use css. A simple option would be to float your image and give it a margin:
<p>
<img style="float: left; margin: 5px;" ... />
Text goes here...
</p>
This would cause the text to wrap around the image. If you don't want the text to wrap around the image, put the text in a separate container:
<div>
<img style="float: left; margin: ...;" ... />
<p style="float: right;">Text goes here...</p>
</div>
Note that it may be necessary to assign a width to the paragraph tag to display the way you'd like. Also note, for elements that appear below floated elements, you may need to add the style "clear: left;" (or clear: right, or clear: both).
The negative margin would help a lot!
The html DOM looks like below:
<div class="main">
<div class="main_body">Main content</div>
</div>
<div class="left">Left Images or something else</div>
And the CSS:
.main {
float:left;
width:100%;
}
.main_body{
margin-left:210px;
height:200px;
}
.left{
float:left;
width:200px;
height:200px;
margin-left:-100%;
}
The main_body will responsive it's with, may it helps you!
Try calling the image in a <DIV> tag, which will allow a smoother and faster loading time. Take note that because this is a background image, you can also put text over the image between the <DIV></DIV> tags. This works great for custom store/shop listings as well...to post a cool " Sold Out! " overlay, or whatever you might want.
Here is the pic/text- sided by side version, which can be used for blog post and article listing:
<div class="whatever_container">
<h2>Title/Header Here</h2>
<div id="image-container-name"style="background-image:url('images/whatever-this-is-named.jpg');background color:#FFFFFF;height:75px;width:20%;float:left;margin:0px 25px 0px 5px;"></div>
<p>All of your text goes here next to the image.</p></div>