I am displaying a box (.box class) within which 2 cards (.card class) are present.
The requirements are as follows:
1) The box has the same height as the cards.
2) The cards are required to be displayed at the extreme left and right ends of the box, on the same row.
Within each .card object, an <img> object is displayed.
I have extracted the following CSS and HTML from the actual example, which is responsive and progressive. Thus I believe it is the minimum code needed to re-create the problem (barring the border and background colors that serve to clearly identify the box and the cards).
The main CSS for the .box and .card classes is shown below:
[CODE lang="css" title=".box and .card classes CSS"]
.box {
height: auto;
background-color: lightgray;
text-align: justify;
font-size: 0.1px;
}
.box:after {
display: inline-block;
width: 100%;
content: "";
}
.card {
display: inline-block;
width: 200px;
height: 300px;
border: 1px solid black;
background-color: lightgreen;
font-size: 20px;
}[/CODE]
The CSS for <img> tags is shown below:
[CODE lang="css" title=" tags CSS"]
img {
width: 200px;
height: 300px;
}
[/CODE]
Here's the main HTML:
[CODE lang="html" title="The main HTML"]<div class="box">
<div class="card">
<img src="https://placekittensss.com/500/300" alt="Banking">
</div>
<div class="card">
<img src="https://placekitten.com/500/300" alt="Finance">
</div>
</div>
[/CODE]
My observations are as follows:
(1) When both <img> objects are valid, the layout is displayed correctly, i.e. the cards are displayed horizontally on one row,
at the left and right ends of the .box container.
(2) If 1 <img> is invalid (not present), it breaks out of the layout as follows:
(a) The box becomes twice the height, getting 2 "rows" each containing 1 card.
(b) In this example, the first card contains a missing image. Therefore it is displayed at the left end of the box,
but on the second row. This is incorrect behavior.
(c) The second card contains a valid image. Therefore, it is displayed correctly at the right end of the box on the first row.
(d) In effect, a double-height box is formed containing 1 card at the right-end corner of the first row and a second card on the
left-end corner of the second row. See the broken layout.
(3) If both <img> objects are invalid (not present), the layout is displayed correctly, ie with both cards occupying one row
at the left and right ends.
I would also like to state:
(a) I have also tried a different approach: using a background-image on the .card class (within the CSS). In this case, if the image is not found, the layout remains correct. However, I can't display an alt text for the image.
(b) The reason I am using an <img> (instead of a background image) is to have an alt text. However, in this case, the layout breaks, if the image is not found, as demonstrated.
(c) I am not using float: left and float: right, since my application requires me to display 3 (rather than 2) cards displayed at equidistant intervals, horizontally.
(d) This code will be part of a progressive layout (block/inline-block --> flex --> grid). That's why I can't simply use a flex or grid layout instead.
How can I solve this problem?
The requirements are as follows:
1) The box has the same height as the cards.
2) The cards are required to be displayed at the extreme left and right ends of the box, on the same row.
Within each .card object, an <img> object is displayed.
I have extracted the following CSS and HTML from the actual example, which is responsive and progressive. Thus I believe it is the minimum code needed to re-create the problem (barring the border and background colors that serve to clearly identify the box and the cards).
The main CSS for the .box and .card classes is shown below:
[CODE lang="css" title=".box and .card classes CSS"]
.box {
height: auto;
background-color: lightgray;
text-align: justify;
font-size: 0.1px;
}
.box:after {
display: inline-block;
width: 100%;
content: "";
}
.card {
display: inline-block;
width: 200px;
height: 300px;
border: 1px solid black;
background-color: lightgreen;
font-size: 20px;
}[/CODE]
The CSS for <img> tags is shown below:
[CODE lang="css" title=" tags CSS"]
img {
width: 200px;
height: 300px;
}
[/CODE]
Here's the main HTML:
[CODE lang="html" title="The main HTML"]<div class="box">
<div class="card">
<img src="https://placekittensss.com/500/300" alt="Banking">
</div>
<div class="card">
<img src="https://placekitten.com/500/300" alt="Finance">
</div>
</div>
[/CODE]
My observations are as follows:
(1) When both <img> objects are valid, the layout is displayed correctly, i.e. the cards are displayed horizontally on one row,
at the left and right ends of the .box container.
(2) If 1 <img> is invalid (not present), it breaks out of the layout as follows:
(a) The box becomes twice the height, getting 2 "rows" each containing 1 card.
(b) In this example, the first card contains a missing image. Therefore it is displayed at the left end of the box,
but on the second row. This is incorrect behavior.
(c) The second card contains a valid image. Therefore, it is displayed correctly at the right end of the box on the first row.
(d) In effect, a double-height box is formed containing 1 card at the right-end corner of the first row and a second card on the
left-end corner of the second row. See the broken layout.
(3) If both <img> objects are invalid (not present), the layout is displayed correctly, ie with both cards occupying one row
at the left and right ends.
I would also like to state:
(a) I have also tried a different approach: using a background-image on the .card class (within the CSS). In this case, if the image is not found, the layout remains correct. However, I can't display an alt text for the image.
(b) The reason I am using an <img> (instead of a background image) is to have an alt text. However, in this case, the layout breaks, if the image is not found, as demonstrated.
(c) I am not using float: left and float: right, since my application requires me to display 3 (rather than 2) cards displayed at equidistant intervals, horizontally.
(d) This code will be part of a progressive layout (block/inline-block --> flex --> grid). That's why I can't simply use a flex or grid layout instead.
How can I solve this problem?
Last edited:
