Html with div element is not displaying correctly | XM Community
Skip to main content
Hi,

I am trying to arrange five i-phone like div elements side by side. The code displays everything fine when tested on external editors (w3 school). However, the display is weird when used in the qualtrics. The code is below. Can anyone figure out what is wrong here



------------------Code-----------------------------------

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

.outer {

width : 1100px;

height : 900px;

display: inline-block;

}

.zui-table {

font: normal 15px Arial, sans-serif;



}

/* The device with borders */

.smartphone {

position: relative;

width: 180px;

height: 340px;

margin: auto;

border: 10px PaleTurquoise solid;

border-top-width: 30px;

border-bottom-width: 45px;

border-radius: 36px;

display: inline-block;

}



/* The horizontal line on the top of the device */

.smartphone:before {

content: '';

display: block;

width: 60px;

height: 5px;

position: absolute;

top: -15px;

left: 50%;

transform: translate(-50%, -50%);

background: #333;

border-radius: 10px;

}



/* The circle on the bottom of the device */

.smartphone:after {

content: '';

display: block;

width: 30px;

height: 30px;

position: absolute;

left: 50%;

bottom: -52px;

transform: translate(-50%, -50%);

background: #333;

border-radius: 50%;

}



/* The screen (or content) of the device */

.smartphone .content {

width: 180px;

height: 340px;

background: AliceBlue ;



}

</style>

</head>

<body>



<table class="Outer">

<colgroup>

<col style="width: 180px">

<col style="width: 180px">

</colgroup>



<tr>

<td>

<div class="smartphone">

<div class="content">

<table class="zui-table">

<colgroup>

<col style="width: 80px">

<col style="width: 100px">

</colgroup>

<tr>

<td colspan="2" style="text-align:center;"><img src="https://tudelft.fra1.qualtrics.com/CP/Graphic.php?IM=IM_cOPspnhoNZPmy4R" alt="Car" width="60" height="60" align="center"> Car </td>

</tr>

<tr>

<td><align="left">Departure</td>

<td><center>10:20 - 10:35<center></td>

</tr>

<tr>

<td><img src="https://tudelft.fra1.qualtrics.com/CP/Graphic.php?IM=IM_06XO58OtYhLsn09" alt="Travel time" width="60" height="60" align="center"></td>

<td><center>20 mins<center></td>

</tr>

<tr>

<td><img src="https://tudelft.fra1.qualtrics.com/CP/Graphic.php?IM=IM_b8HiyqiZRSLAoM5" alt="Waiting time" width="60" height="60" align="center"></td>

<td><center>0 mins<center></td>

</tr>

<tr>

<td><img src="https://tudelft.fra1.qualtrics.com/CP/Graphic.php?IM=IM_bKOQYTsCkBhnnEh" alt="Cost" width="60" height="60" align="center"></td>

<td><center>5€<center></td>

</tr>

<tr>

<td colspan="2" style="text-align:center;"><img src="https://tudelft.fra1.qualtrics.com/CP/Graphic.php?IM=IM_0TaQxx7PXxyXZPv" alt="Shared" width="60" height="60" align="center"></td>

</tr>



</table>

</div>

</div>

</td>



<td>

<div class="smartphone">

<div class="content">

<table class="zui-table">

<colgroup>

<col style="width: 80px">

<col style="width: 100px">

</colgroup>

<tr>

<td colspan="2" style="text-align:center;"><img src="https://tudelft.fra1.qualtrics.com/CP/Graphic.php?IM=IM_cOPspnhoNZPmy4R" alt="Car" width="60" height="60" align="center"> Car </td>

</tr>

<tr>

<td><align="left">Departure</td>

<td><center>10:20 - 10:35<center></td>

</tr>

<tr>

<td><img src="https://tudelft.fra1.qualtrics.com/CP/Graphic.php?IM=IM_06XO58OtYhLsn09" alt="Travel time" width="60" height="60" align="center"></td>

<td><center>20 mins<center></td>

</tr>

<tr>

<td><img src="https://tudelft.fra1.qualtrics.com/CP/Graphic.php?IM=IM_b8HiyqiZRSLAoM5" alt="Waiting time" width="60" height="60" align="center"></td>

<td><center>0 mins<center></td>

</tr>

<tr>

<td><img src="https://tudelft.fra1.qualtrics.com/CP/Graphic.php?IM=IM_bKOQYTsCkBhnnEh" alt="Cost" width="60" height="60" align="center"></td>

<td><center>5€<center></td>

</tr>

<tr>

<td colspan="2" style="text-align:center;"><img src="https://tudelft.fra1.qualtrics.com/CP/Graphic.php?IM=IM_0TaQxx7PXxyXZPv" alt="Shared" width="60" height="60" align="center"></td>

</tr>



</table>

</div>

</div>

</td>





</tr>

</table>

</body>

</html>
Hi @Subodh ,



If you want to show the text beside the image, I think if you use HTML table element that would solve your task of aligning the images and texts.

Leave a Reply


Terms & Conditions