Display property issue in css

#1

In the topic display property in CSS although I wrote the code with the right syntax, the images are not getting displayed side by side. Please solve this issue. This is my code and results in Chrome

Screenshot 2023-08-27 114018
Screenshot 2023-08-27 1140181920×1200 117 KB

#2

Screenshot 2023-08-27 113955
Screenshot 2023-08-27 1139552880×1800 309 KB

#3

Hi @saisatya.bv04,

Can you also please provide the code for your css file so that I can check and solve your query of images not getting displayed side by side.

#4

.footer{
background-color: #272727;
color: white;
height: 100px;
font-size: 20px;
text-align: center;
}

.available-coffee{
height: 300px;
width: 300px;
font-size: 20px;
}

.out-of-stock{
border-top-style: dotted;
border-top-width: 2px;
border-top-color: darkred;

border-bottom-style: dotted;
border-bottom-width: 2px;
border-bottom-color: seagreen;

font-size:17px;
font-style:italic;
font-family:georgia;

}

.in-stock{
border:4px double green;
}

.div1-img{
height: 80%;
width: 100%;
}

.div2-img{
height: 75%;
width: 100%;
}

#mocha{
color:grey;
}

.pricing-table{
width: 100%;
border: 2px solid green;
font-family: “Arial Black”, Gadget, sans-serif;
text-align: center;
}

.Caption-heading{
color: #2979a8;
}

th{
background-color: #32a87d;
height: 50px;
color: white;
font-size: 22px;
}

td{
height: 50px;
font-size: 21px;
color: #7c4c29;
}

.tr-out-of-stock:hover{
background-color: #ffcccc;
}
.tr-in-stock:hover{
background-color: #ccffe6;
}

.coffee-list{
list-style-type: square;
}

#5

Hi @saisatya.bv04,

In order to display both the images side by side, enclose both of them in the same

you can modify the HTML structure as follows

<div class="available-coffee in-stock" style="display:inline-block;">
    <h4>Coffee Selection</h4>
    <div class="coffee-images">
        <img src="mocha.png" alt="Mocha" class="div1-img">
        <img src="cappuccino.png" alt="Cappuccino" class="div2-img">
    </div>
</div>

And add appropriate CSS styles for the same.

#6

Hi @rohit_t_s
But we are using the display property so that we can display images or texts inside two different divs side by side. Are we not making the display property pointless by enclosing both images inside the same div?

#7

@saisatya.bv04,

Apologies for the delay in replying to you.
In the provided HTML code, we have indeed enclosed both images inside the same <div> with the class “coffee-images.” This approach is correct if your goal is to display the two images side by side.

Using the display property to achieve this layout doesn’t make it pointless; rather, it’s a valid use of the display property to control the layout of elements within a single container. In this case, you’re using the display: inline-block; property on the “available-coffee” <div>, and that property is applied to the “coffee-images” <div> containing the two images.

The display: inline-block; property allows elements to sit side by side horizontally within their container, and it can be used to create a horizontal arrangement of elements, such as images or text, within a parent container.

So, your approach is correct if your intention is to display both images side by side within the “available-coffee” <div>. It’s not making the display property pointless; rather, it’s utilizing it effectively for your desired layout.