Member Avatar for sirlink99

I am having trouble positioning divs beside each other

2 images one above the other with another image beside the 2 that are on top

here is what that part looks like

Html

<div class="leftDiv">
							<img src="Images/contact_front.png" width="150px" height="150px"><br />
							<img src="Images/contact_stairs.png" width="200px" height="150px">				
					</div>
					<iframe width="370" height="300" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.hu/maps?f=q&amp;source=s_q&amp;hl=hu&amp;geocode=+&amp;q=1072+Budapest+VII.+Ker%C3%BClet+Nagy+Di%C3%B3fa+u.+19&amp;ie=UTF8&amp;hq=&amp;hnear=Budapest,+Erzs%C3%A9betv%C3%A1ros,+Nagy+Di%C3%B3fa+utca+19&amp;ll=47.497893,19.064757&amp;spn=0.008191,0.01929&amp;t=m&amp;z=14&amp;vpsrc=6&amp;output=embed"></iframe><br /><small><a href="http://maps.google.hu/maps?f=q&amp;source=embed&amp;hl=hu&amp;geocode=+&amp;q=1072+Budapest+VII.+Ker%C3%BClet+Nagy+Di%C3%B3fa+u.+19&amp;ie=UTF8&amp;hq=&amp;hnear=Budapest,+Erzs%C3%A9betv%C3%A1ros,+Nagy+Di%C3%B3fa+utca+19&amp;ll=47.497893,19.064757&amp;spn=0.008191,0.01929&amp;t=m&amp;z=14&amp;vpsrc=6" style="color:#0000FF;text-align:left">Nagyobb térképre váltás</a></small>

css

.leftDiv{
	 position: relative;
     margin-right: 80px;
     display: inline;
}

It kind of works, except it puts the large image beside the bottom one. how can I fix this?

Thanks for any help

Edited by sirlink99 because: n/a
  • 3 Contributors
  • 3 Replies
  • 80 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by sirlink99

Dani AI

Generated

Short summary and practical fixes based on the thread: the goal is a left column with two stacked images and a right column (an image or iframe) aligned to the top of those two. was right to move the left block out of inline flow, and was right that the column needs an explicit size (or a layout rule that prevents wrapping). Two solid options follow — a modern, responsive Flexbox solution and a classic float/clearfix approach.

<!-- structure -->
<div class="contact-row">
  <div class="left-col">
    <img src=".../contact_front.png" alt="">
    <img src=".../contact_stairs.png" alt="">
  </div>
  <div class="right-col">
    <iframe src="..."></iframe>
  </div>
</div>
/* Flexbox: keeps the right item beside the stacked left images */
.contact-row { display: flex; align-items: flex-start; gap: 20px; }
.left-col { display: flex; flex-direction: column; flex: 0 0 160px; }
.left-col img, .right-col iframe { display: block; max-width: 100%; }
/* Float + clearfix alternative */
.row { overflow: hidden; } /* contains floats */
.left-col { float: left; width: 160px; margin-right: 20px; }
.left-col img { display: block; margin-bottom: 8px; }
.right-col { overflow: hidden; } /* behaves as the right column */

Quick tips: make images display: block so they stack without inline gaps; ensure the sum of column widths + gaps fits the parent container to avoid wrapping; use browser devtools to inspect computed widths and margins. For background reading see MDN on Flexbox and on float: Basic concepts of Flexbox and CSS float.

Recommended Answers

All 3 Replies

Member Avatar for simplypixie 
.leftDiv{
	 float: left;
     margin-right: 80px;
}
Member Avatar for drjohn

and set a width on that div too.

Member Avatar for sirlink99

Thanks.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.