Title: Floating Image?
Last modified: August 19, 2016

---

# Floating Image?

 *  [hexxvoid](https://wordpress.org/support/users/hexxvoid/)
 * (@hexxvoid)
 * [16 years, 9 months ago](https://wordpress.org/support/topic/floating-image/)
 * Hi guys, you’ll have to forgive me here if this is simple – I’m still trying 
   to wrap my head around things and being that I mostly come from a 3-D background
   html/css isn’t quite my forte.
 * Okay, so I have my theme and that’s good to go but I want to have an image “float”
   to both the right and left hand side of the template. I’ve included a crude drawing
   to show what I mean.
 * [Example Image](http://img194.imageshack.us/i/examplem.gif/)
 * I’m looking to do something like the example on the right, I’m sure it’ll involve
   a div layer for each image but I’ve not done anything like this since school 
   and have completely forgotten. 🙁
 * Would it be too much to ask someone to walk me through it in baby steps – I’m
   quite confident in editing basic parts of the stylesheet but as I said, this 
   really isn’t my strong point.
 * Thanks 🙂

Viewing 2 replies - 1 through 2 (of 2 total)

 *  [esmi](https://wordpress.org/support/users/esmi/)
 * (@esmi)
 * [16 years, 9 months ago](https://wordpress.org/support/topic/floating-image/#post-1187940)
 * [http://www.w3schools.com/css/](http://www.w3schools.com/css/)
 * Look at the float property.
 *  [Simon Fairbairn](https://wordpress.org/support/users/simonfairbairn/)
 * (@simonfairbairn)
 * [16 years, 9 months ago](https://wordpress.org/support/topic/floating-image/#post-1187944)
 * Do you want the images in an exact position within the page? Because, if so, 
   it might be better to use absolute positioning instead.
 * The problem with floats is that they are still within the document flow, and 
   can therefore be affected by what elements are above and below them.
 * Absolute positioning takes them out of the flow and places them exactly on the
   page, relative to the container element. Something like
 * xhtml:
 *     ```
       <div id='container'>
       <div id='heart'></div>
       <div id='tick'></div>
       </div>
       ```
   
 * CSS:
 *     ```
       #container {position: relative; width: 700px; }
       .heart {position: absolute; top: 50px; left: 0; margin-left: -50px; }
       .tick {position: absolute; top: 250px; left: 650px; }
       ```
   
 * would recreate the page that you’ve diagrammed. Obviously, these are just examples.
 * If you want them to be affected by other elements, however, floats would be the
   way to go.

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Floating Image?’ is closed to new replies.

## Tags

 * [div](https://wordpress.org/support/topic-tag/div/)
 * [float](https://wordpress.org/support/topic-tag/float/)
 * [image](https://wordpress.org/support/topic-tag/image/)

 * 2 replies
 * 3 participants
 * Last reply from: [Simon Fairbairn](https://wordpress.org/support/users/simonfairbairn/)
 * Last activity: [16 years, 9 months ago](https://wordpress.org/support/topic/floating-image/#post-1187944)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics