Member Avatar for davy_yg

index.html

<div id="banner"> <img src="images/banner.png" /><img src="images/bannerside.png" /> </div>

style.css

#header #banner {
    margin: 10px 0 0 20px;
}

I am hoping those image appears next to each other, instead they come out on top and buttom. How to make them next to each other ?

I think I have enough space to put the next image next to the first one.

  • 4 Contributors
  • 3 Replies
  • 101 Views
  • 21 Hours Discussion Span
  • Latest Post Latest Post by Patrick_Walsh

Dani AI

Generated

Short version: use CSS layout, not tables, and check whether some existing stylesheet is forcing images to act like blocks or to be full-width. has two images inside #banner, so they should sit side-by-side unless a rule like display:block or max-width:100% is applied, each image is wrapped in a block element, or the parent is too narrow. ’s table approach will work but is not semantic; ’s float idea is valid but needs extra care to contain floats.

A modern, reliable fix is Flexbox. Put the images in the same container and make the container a flex row:

#banner {
  display: flex;
  gap: 8px;           /* space between images */
  align-items: center;/* vertical alignment */
}
#banner img {
  height: auto;
  /* override any global max-width if it is forcing full width */
  max-width: none;
}

If you prefer not to use Flexbox, inline-block is another simple option and avoids float clearfix issues:

#banner { white-space: nowrap; }
#banner img { display: inline-block; vertical-align: middle; }

If you do use floats, contain them with a clearfix or make the parent a new block formatting context:

#banner { overflow: auto; }      /* simple containment */

Troubleshooting checklist: open DevTools, inspect an image and check computed display, width, max-width, and float; look for media queries or framework rules that change image sizing; verify images aren’t wrapped in <p> or other block tags; add alt and width/height attributes to avoid layout shifts. For more on flex layout and the <img> element see MDN: Flexbox and MDN: img element.

Recommended Answers

All 3 Replies

Member Avatar for sufyan2011

You can do the following:
<div id="banner"> <table width="100%" colspan="0" border="0">
<tr>
<td>
<img src="images/banner.png" />
</td>
<td>
src="images/bannerside.png" />
</td>
</tr>
</table>
</div>

Edited by sufyan2011 because: n/a
Member Avatar for teedoff

Please DONT use tables to position things. Thats wrong and not semantic coding.

You can float images just as you can divs and other elements.

Provided you have enough room, as you said, for those two images to float side by side, you can do:

img {float: left;}


Once again, you've asked so many basic questions that should be VERY easy to find out yourself with just a little googling. I strongly suggest you do some learning on your own.

commented: Very Good +0
Member Avatar for Patrick_Walsh

Yeah! Googling is the best solution for every problem.

In this way you can learn yourself and gain lots of knowledge. I'm a miami web master and I do the same to know solution of any problem.

Good luck!

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.