CODEWITHSUNDEEP
htmlcssimageformatting
phpNew
phpNew

Reputation: 1

3 images not aligning horizontally whilst using CSS and HTML

I am attempting to implement three images horizontally into a HTML website. However when i format it using CSS nothing is happening, I am very confused as it should theoretically work. I would greatly appreciate if anyone could help me out, thank you.

HTML page image part:

</p>
<div class="row">
  <div class="column">
    <img src="gosportSunset.jpg" alt="Sunset" style="width:33%">
  </div>
  <div class="column">
    <img src="gosport.jpg" alt="Gosport" style="width:33%">
  </div>
  <div class="column">
    <img src="gosportRace.jpg" alt="Race" style="width:33%">
  </div>
</div>
</p>

CSS image formatting part:

/* Three image containers  */
.column {
  float: left;
  width: 33.33%;
  padding: 5px;
}

/* Clear floats after image containers */
.row::after {
  content: "";
  clear: both;
  display: table;
}

Upvotes: 0

Views: 53

Answers (2)

Khushbu Watwani
Khushbu Watwani

Reputation: 1

Instead of using div structure you can try something with ul & li, also make use of "column-count" property using which you can define the number of columns you want in a horizontal row.

Refer link for more understanding about "column-count" property: https://www.w3schools.com/cssref/css3_pr_column-count.asp

<!DOCTYPE html>
<html>
<head>
<style>
ul {
	column-count: 3;
	list-style: none;
}
</style>
</head>
<body>
<div class="row">
  <ul>
  <li>
    <img src="gosportSunset.jpg" alt="Sunset "/>
  </li>
  <li>
    <img src="gosport.jpg" alt="Gosport" />
  </li>
  <li>
    <img src="gosportRace.jpg" alt="Race" />
  </li>
  </ul>
</div>

</body>
</html>

Upvotes: 0

James
James

Reputation: 135

If the grid is not working try to add box-sizing: border-box; in .column

.column {
   float: left;
   width: 33.33%;
   padding: 5px;
   box-sizing:border-box;  // important
}

Upvotes: 1

Related Questions