CODEWITHSUNDEEP
javascripthtmlcss
WillJackman
WillJackman

Reputation: 1

How to display divs horizontally in line in html?

I have an image of a map and then some javascript to allow zooming in when you hover on it, I want to display the zoomed in section on the right of the original image but it's currently appearing below it instead. I tried align=right but it's not actually an image it's a container so that didn't work. Here's my code;

<div class="img-zoom-container">
  <img id="myimage" src="Images/Calderpark Shopping centre map.jpg" width="600">
  <hr><div id="myresult" align=right class="img-zoom-result"> </div></hr>
</div>

Upvotes: 0

Views: 2489

Answers (3)

Sunniya Maini
Sunniya Maini

Reputation: 75

Please check this fiddle (solution attached here): https://jsfiddle.net/3uw7dnob/2/

You can give property "float:right" and I have given one example of left and right block. You can always have two block side by side by this trick.

.left-block {
  width: 100px;
  float: left;
}
.right-block {
  margin-left: 120px;
}

Upvotes: 0

Sreekanth Reddy Balne
Sreekanth Reddy Balne

Reputation: 3424

align attribute is not supported in HTML5, instead you can achieve the same using CSS.

Moreover, div is by default a block element. align attribute works only with inline elements.

display: flex is what you needed in CSS.

.horizontal-container{
  display:flex;
}
.zoomed-map{
  flex-grow:1;
}
<div class="horizontal-container">
  <div class='actual-map'>
    <img id="myimage" src="https://picsum.photos/200" width="200">
  </div>
  <div class='zoomed-map'>
    zoomed container
  </div>
</div>

Upvotes: 1

user8823283
user8823283

Reputation: 

.img-zoom-container {
  display: inline;
}
<div class="img-zoom-container">
  <img id="myimage" src="Images/Calderpark Shopping centre map.jpg" width="600">
  <div id="myresult" align=right class="img-zoom-result">hello </div>
</div>

Upvotes: 0

Related Questions