Create a unique web page layout by utilizing divs and spans

Can the design shown in this image be created? https://i.sstatic.net/hsIaQ.png

I've tried the code below but it's not functioning properly. Any assistance would be appreciated!

The issue is that the Q and A text should be in a box that automatically increases in size as more text is added.

<div style="font-family: Arial,serif;font-size: 10.6px;color: rgb(68,68,68);font-weight: normal;font-style: normal;text-decoration: none">
    <span style="font-weight:bold;height:30px;width:30px;background-color:aqua;display:inline;">
                Q
    </span>
    <span style="font-family: Arial,serif;font-size: 10.6px;color: rgb(68,68,68);font-weight: normal;font-style: normal;text-decoration: none;display:inline;">
                Date of birth
    </span>
</div>
<div style="font-family: Arial,serif;font-size: 10.6px;color: rgb(68,68,68);font-weight: normal;font-style: normal;text-decoration: none">
    <span style="font-weight:bold;height:30px;width:30px;background-color:blueviolet;display:inline;">
                A
    </span>
    <span style="font-family: Arial,serif;font-size: 10.6px;color: rgb(68, 68, 68);font-weight: normal;font-style: normal;text-decoration: none">
                02/08/2019 11:05 - 14/01/1991 (John Doe)
    </span>
</div>
htmlcss

Answer №1

utilize the display:table-row and display:table-cell CSS properties

<div style="display:table-row;font-family: Arial,serif;font-size: 10.6px;color: rgb(68,68,68);font-weight: normal;font-style: normal;text-decoration: none">
  <span style="display:table-cell;font-weight:bold;height:30px;width:30px;background-color:aqua;">
    Q
  </span>
    <span style="display:table-cell;font-family: Arial,serif;font-size: 10.6px;color: rgb(68,68,68);font-weight: normal;font-style: normal;text-decoration: none;">
    Date of birth
    <br/><br/>
    test
  </span>
</div>
<div style="display:table-row;font-family: Arial,serif;font-size: 10.6px;color: rgb(68,68,68);font-weight: normal;font-style: normal;text-decoration: none">
    <span style="display:table-cell;font-weight:bold;height:30px;width:30px;background-color:blueviolet;">
      A
    </span>
    <span style="display:table-cell;font-family: Arial,serif;font-size: 10.6px;color: rgb(68,68,68);font-weight: normal;font-style: normal;text-decoration: none">
      02/08/2019 11:05 - 14/01/1991 (John Doe)
    </span>
</div>

Answer №2

h1,h2,h3,h4,h5{margin:0px;}
.main{
width:100%;
height:auto;
}
#question-part {
width: 100%;
height: auto;
display: -webkit-flex;
-webkit-flex-direction: row; 
display: flex;
flex-direction:row;
}

.ques-left {
width:40px;
text-align:center;
background-color:lightgrey;
height: auto;
}
.ans-left {
width:40px;
text-align:center;
background-color:grey;
line-height:40px;

}

#answer-part {
width: 100%;
line-height: auto;
display: -webkit-flex;
-webkit-flex-direction: row; 
display: flex;
flex-direction:row;
}
.ques-right{
width:100% ;
margin:3px;
text-align:justify;
}

.ans-right{
width:100% ;
margin:3px;
line-height:40px; 
}
<div class="main">

<div id="question-part" >
<div class="ques-left">Q</div>
<div class="ques-right" >
  <h2>Please Enter Your Question Here</h2><br>
  <h3>Select the best description of your smoking habit</h3><br>
  <h4>Indicate if you have used any tobacco products </h4>
  <p>choices: non-smoker, smoker</p>
</div>
</div>

<div id="answer-part">
<div class="ans-left" >A</div>
<div class="ans-right">02/08/2019 11:05 - Smoker (John Doe)</div>
</div>
</div>

Answer №3

Have you considered utilizing the ::before selectors for a cleaner CSS?

<style>
div.q,
div.a {
    color: rgb(68,68,68);
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
    position: relative;
    padding: 20px 45px;
}

div.a div::before,
div.q div::before {
    bottom: 0;
    display: inline-block;
    font-weight:bold;
    font-size: 14px;
    left: 0;
    padding: 20px 0;
    position: absolute;
    text-align: center;
    top: 0;
    width: 30px;
}

div.q div::before {
    background: aqua;
    content: 'Q';
}

div.a div::before {
    background: blueviolet;
    content: 'A';
}

h2 {
    margin-top: 0;
    font-size: 14px;
}
</style>

<div class="q">
    <div>
        <h2>Select the most appropriate description</h2>
        <p>Choose "smoker" if you have used any tobacco...</p>
    </div>
</div>
<div class="a">
    <div>
        <h2>02/08/2019 11:05 - 14/01/1991 (John Doe)</h2>
    </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I would like the dropdown menu to only appear on mobile devices

After creating a dropdown menu, I now want it to only appear in mobile view and not in other views. I believe this can be achieved using "visible-xs" or a similar method, but I am struggling with the coding. Below is my HTML code: <nav class="navb ...

htmlcssbootstrap-4

A guide to displaying dropdown values above a modal

I have encountered an issue while using a dropdown inside a modal window. The problem is that not all the dropdown values are visible, as the overflow part gets hidden. I am looking for a solution to keep the dropdown value at the top and prevent it from b ...

javascripthtmlcssreactjsweb

"Clicking on the 'View More' button within a foreach loop is only functional for the

I am trying to iterate through a list of items using a foreach loop, and each item has a "view more" option. The intention is that when I click on this option, it should expand to show more details about the respective item. However, I am encountering an i ...

htmlasp.net-mvc

Guide to centering Embed horizontally with Bootstrap 5

My goal is to create a centralized input with an image positioned above it. I have been following the guidelines provided in the position documentation, but the image still does not align horizontally: https://i.sstatic.net/awWxL.png Here's the code ...

htmlcssbootstrap-5

Show both text and image inputs side by side within a table

Hey there, I'm trying to create a table with both text and image inputs inside. Here's the code I've attempted: <tbody> <tr> <td class="inputs"> <input type=" ...

htmlcssinput

Develop a website using HTML and CSS for the front-end design, complemented by Java for the

I find myself at a standstill with a project I want to tackle, but unfortunately, my knowledge of modern web development, particularly full stack, is minimal. As a result, I am completely clueless on how to proceed. Here is what I am familiar with and what ...

javahtmlcssweb-deploymentminecraft

Optimal method for showcasing a multitude of columns on an HTML page

Seeking to showcase a vast array of data in HTML (over 10,000 columns with approximately 200-300 rows) to present a schedule. The information will be structured as movable blocks containing text and background colors. Is it feasible to exhibit such a mas ...

htmlhtml-tablehtml5-canvas

The Bootstrap collapsible feature is causing elements to shift to the adjacent column

I'm currently implementing bootstrap's collapsible feature to showcase a list of stores along with expandable details. However, the issue arises when I expand one of the collapsibles in the left column, causing certain items to shift into the ne ...

cssangularjstwitter-bootstrap

Ways to incorporate style links in Angular v2 components?

Currently, I am working through the Angular tutorial available on their website. In my quest to create various components, templates, and styles, I have hit a roadblock. The issue lies in incorporating my styles into the components using the 'styleUR ...

cssangularangular-components

Jekyll adjusting the starting line of code snippet formatting

Currently, I'm in the process of setting up code highlighting for my blog using Jekyll and Pygments. However, I'm facing an issue where the first line of every code snippet seems to be slightly offset. To create a gutter effect, I'm utilizin ...

htmlcssjekyllpygments

Bring back object categories when pressing the previous button on Firefox

When working with a form, I start off with an input element that has the "unfilled" class. As the user fills out the form, I use dynamic code to remove this class. After the form is submitted, there is a redirect to another page. If I click the "back" ...

javascriptjquerycss

Unable to utilize the rupee font within a select element on Chrome and IE8 browsers

Issues with displaying rupee font in select element on Chrome and IE8 I have implemented WebRupee for showing the Indian currency symbol. The font appears correctly when used within a <p> tag, but when placed inside a select option element, it only ...

htmlcss

Is it possible to place a secondary read more button next to the first one using CSS?

If you notice the code snippet, you will see that a "read more" button appears. How can I add another "read more" button to align side by side? I may even want to include three "read more" buttons, each opening in a separate modal box. ...

htmlcss

Enhance Your Webpage with jQuery Drag and Drop Feature Across Multiple Lists

I've been successfully using "jQuery UI Sortable connectwith" for drag & drop functionality, as shown in the example here: . However, I now need to implement drag & drop with multiple UI elements and it's not functioning correctly. Example: < ...

javascriptjqueryhtmljquery-ui

Add some flair to your list by animating the text within it

My goal is to add animation to the text within the list. Below is the code snippet: <div id="about" class="row section"> <div class="col-sm-8"> <h2 style="color:black;">About me!</h2> <ul> <li > ...

javascripthtml

Place background image in the center with a background color overlay

After browsing through this post on Stack Overflow, I managed to stretch my background image using CSS with the background-size: cover; property. However, I realized that this solution doesn't completely meet my needs. I'm dealing with an image ...

javascripthtmlcssbackgroundbackground-image

Colored stripe on a horizontal menu

I am attempting to design a page header with a menu that resembles the image provided below. https://i.sstatic.net/623eH.png As I construct the navigation, each link area (highlighted in blue) is represented by an <li>. However, I am encountering a ...

csshtmltwitter-bootstrap-3

The CSS file is not appearing, causing the styling not to be applied

I've included the following line in my html file: <link rel="stylesheet" href="css/styles.css"> Despite having the css file linked, the styling is not visible on the page. The HTML remains plain. The structure of my files is as follows: file ...

htmlcss

What is the latest CSS browser support for the min() and max() functions in 2018?

I am considering implementing the use of the min() and max() functions in my project. I'm curious about the current browser support as of 2018. Do you think it is necessary to include the @supports at-rule? For example, I could write: .px-4-safe { ...

css

When attempting to access the callback response with HTML tags from the server, the AJAX request in jQuery fails

I am currently facing a challenge while working on an ajax form submission that returns Json response. Everything functions smoothly except for a specific situation where I need to include HTML content in the response, such as a URL link for users to acces ...

jqueryhtmlajax