0

I want to have two images side by side centered in the page. My body width is 800px.

In Firefox 31.0, Firefox 20 and IE 11 the images are displayed that way, however in IE 8 the images are stacked vertically, they are centered horizontally with vertical blank bands approx 190px each side.

I thought that this might be due to the combined widths when side by side of close to 800px that IE 9 might be wrapping them to stack them vertically. I tried images that are narrower 300px they are still vertically stacked in IE.

All suggestions gladly received

<div class="gearSection" style="text-align:center;display: block;">
  <div style="border:1px solid blue; display:inline-block; margin-left:auto; margin-right:auto;margin-top:2px;margin-bottom:2px;">
    <img src="images/Hoodie_02.jpg" border="0" width="380px" height="633px" alt="Hoodie"><br><b>Hoodies</b>
  </div>

  <div style="border:1px solid blue; display:inline-block; margin-left:auto; margin-right:auto;margin-top:2px;margin-bottom:2px;">
    <img src="images/Hat_02.jpg" border="0" width="380px" height="633px" alt="Hat"><br><b>Beanie Hat</b>
  </div>
</div>
user1558796
  • 293
  • 4
  • 19
  • 1
    Maybe try this [link](http://stackoverflow.com/questions/9110646/ie8-display-inline-block-not-working) it talks about stating a `` and using `display:inline-block` – DavidT Sep 11 '14 at 11:41

2 Answers2

0
You just only need to add <!DOCTYPE html> because of html5 support. Try to read this http://msdn.microsoft.com/en-us/library/ie/ms535242(v=vs.85).aspx

<!DOCTYPE html>
<html>
<head>
<body>
<div class="gearSection" style="text-align:center;display: block;">
  <div style="border:1px solid blue; display:inline-block; margin-left:auto; margin-   right:auto;margin-top:2px;margin-bottom:2px;">
    <img src="images/Hoodie_02.jpg" border="0" width="380px" height="633px" alt="Hoodie"><br><b>Hoodies</b>
  </div>

  <div style="border:1px solid blue; display:inline-block; margin-left:auto; margin-right:auto;margin-top:2px;margin-bottom:2px;">
    <img src="images/Hat_02.jpg" border="0" width="380px" height="633px" alt="Hat"><br><b>Beanie Hat</b>
  </div>
</div>
</body>
</html>
Ronnie Javien Jr.
  • 11
  • 4
  • David & Ronnie original was ` ` Tried suggested ` ` This put the images side by side but many errors with the [link](http://validator.w3.org/) validator of the form **end tag for "link" omitted, but OMITTAG NO was specified** Tried ` ` this positioned images side by side got errors with the validator of the form **Use CSS instead** Is the best bet to use & change to CSS where flagged? – user1558796 Sep 12 '14 at 19:26
0

I believe this is a duplicate to this question as I stated in the comments above. You could try following the advice in this question by adding a DOCTYPE to your document. Without seeing your full HTML I can't see if you have that already. If not, add

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Community
  • 1
  • 1
DavidT
  • 2,341
  • 22
  • 30