Super Web Mart - Discount Coupons & Deals - Discount Promos, Coupon Codes, Discount deals and web site reviews
 

Author Topic: How to add floating image to page?  (Read 656 times)

0 Members and 1 Guest are viewing this topic.

Offline Randy

  • Jr. Member
  • **
  • Posts: 93
    • View Profile
How to add floating image to page?
« on: June 29, 2017, 04:35:44 AM »
Hi Forum,
Newbie here. I'm hoping someone out there may be able to help with this. I'm trying to add a small floating security seal image, bottom/right corner. When I say 'floating' I do not mean text wrapped. I mean floating, as in maintaining its position regardless of the vertical page scrolling.

Webmaster Forum

How to add floating image to page?
« on: June 29, 2017, 04:35:44 AM »

Offline amirah

  • Jr. Member
  • **
  • Posts: 22
    • View Profile
    • Mobile app development
Re: How to add floating image to page?
« Reply #1 on: May 17, 2018, 10:06:47 PM »
A floated image will allow the text to wrap around the image like a regular book or newspaper would do. Images can also be floated so they appear horizontally on your site. This is good for displaying images like a gallery. The following sections will explain how to float and align images using CSS.

Offline Clarke87

  • Jr. Member
  • **
  • Posts: 80
    • View Profile
Re: How to add floating image to page?
« Reply #2 on: October 16, 2019, 12:39:11 AM »
Floating images allow one to position an image to the left or the right of the content that follows the image in your HTML file.

If you wanted to float a picture to the right of some text you could do it like this:

HTML

    <div class=”container”>
    <img class=”floatpicright” src=”mypic.jpg” alt=”my picture of a moose” />
    <p>A paragraph about moose.</p>
    </div>

CSS

    .container {position:relative; width:100%; }
    .floatpicright {position:relative; float:right;}
    p {position:relative; }

If you had the image after the text in the HTML file then you would want to float the text to the left—because the float is positioned in relation to the content that follows it.

HTML

    <div class=”container”>
    <p class="floatleft">A paragraph about moose.</p>
    <img class=”floatpicright” src=”mypic.jpg” alt=”my picture of a moose” />
    </div>

CSS

    .container {position:relative; width:100%; }
    .floatleft {position:relative; float:left;}
    .floatpicright {position:relative; float:right;}
    p {position:relative; }

Webmaster Forum

Re: How to add floating image to page?
« Reply #2 on: October 16, 2019, 12:39:11 AM »