Lank Arnold Lank Arnold - 1 year ago 46
CSS Question

Image displaying in different places depening on browser

I'm building a very simple site using HTML and CSS. It consists of a headline, a paragraph of text, and an image.

When I view the site on Chrome, the placement of all three objects works perfectly. But in Firefox and Safari, they're scrambled. When I then optimize for one of those two, the Chrome version looks off. Etc.

Here's the CSS:

img {
position: fixed;
bottom: 280px;
right: 800px;

and the HTML:

<img src="bob.jpg" height="50%" width="20%">

Is there a relatively simple way to fix this? Can I specify the positioning depending on the browser -- something like so?

img {
position: fixed;
/* Chrome
bottom: 350px;
right: 925px;
/* Firefox
bottom: 200px;
right: 800px;


And a second question: What property can I assign the image so that text always wraps around the image, rather than rendering in front of or behind it?

Thank you!

Answer Source

If you want the image to be centered and aligned with the page's content, there is no need to add any additional CSS since you have text-align: center added to the body.

The image will be centered since it is an inline element. Also, your code has many issues, consider a simplified version:

body {
  background-color: white;
  text-align: center;
  font-family: "Courier New", Courier, monospace;

p {
  text-align: left;
  font-size: 12px;
  max-width: 50%;
  margin: 0 auto;

hr {
  width: 50%;
  margin: 3em auto;
<div class="marquee">
  <p>Make your own episode!</p>
  <p>The X-Files generator mixes people, places and plots from different episodes to create new adventures.</p>
  <div class="wrap">
    <button onclick="sentenceLoad()">Generate</button>
  <div class="container">
  <img src="" alt="">

  • Use CSS margin instead of repetitive <br> tags
  • No need to redefine the font since it is inherited from body
  • Add CSS rules to external file instead of inline (for <hr> for example)
  • Use margin: 0 auto to center block-level elements like <p>