Placing two images in DIV

HTML & CSS
1

I am trying to make this using CSS. This is how they look in a TABLE format.

<table width="960" height="100" align="center" background="images/top_banner_background.jpg" cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td align="left" valign="top"><img src="images/top_banner_left.jpg" width="345" height="100" border="0"></td>
    <td align="right" valign="top"><img src="images/top_banner_right.jpg" width="405" height="100" border="0"></td>
  </tr>
</table>

Is this possible?

2

Is it possible, I mean, to put them in one DIV, or would I have to make two DIVs?

4

Most layouts are possible with css, far more than with using old-school html like above.
There are several ways to align the two images on either side.

1 Like
5

Here’s two of the ways that Sam mentioned

display: table (css table, not html)

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>display table</title>
<style>
.img-wrap {
  display: table;
  margin: auto;
  border-spacing: 10px;
}
.img-wrap img {
  display: table-cell;
  width: 345px;
  height: 100px;
  background: red;
}
</style>
</head>

<body>

<div class="img-wrap">
  <img src="images/top_banner_left.jpg" width="345" height="100" alt=" ">
  <img src="images/top_banner_right.jpg" width="405" height="100" alt=" ">
</div>

</body>
</html>

display: inline-block

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>inline-block</title>
<style>
.img-wrap {
  text-align: center;
}
.img-wrap img {
  display: inline-block;
  width: 345px;
  height: 100px;
  background: red;
  margin: 5px; /*plus whitespace node*/
}
</style>
</head>

<body>

<div class="img-wrap">
  <img src="images/top_banner_left.jpg" width="345" height="100" alt=" ">
  <img src="images/top_banner_right.jpg" width="405" height="100" alt=" ">
</div>

</body>
</html>
1 Like
6

  1. Try it and see what happens.

  2. That is such a very basic question, I would like to recommend that you invest some time in yourself and take a basic course in HTML and CSS. Because of your past experience, updating you knowledge of CSS and learning about the semantic approach to HTML will be time well spent (and should be easy for you).

1 Like
7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.