Creating a structured layout similar to an HTML table without actually using the

I am attempting to construct a 2 column table-like structure without relying on <table> elements. In the second column, I aim for text overflow to remain on the right side. You can find my progress so far here - https://jsfiddle.net/a49vuup1/

<div class="mainbox">

  <span class="leftbox"> STATE </span> : <span class="rightbox">TAMILNADU TAMILNADU TAMILNADU TAMILNADU</span>
  <div class="myhr"></div>
  <span class="leftbox"> Phone </span> : <span class="rightbox">Landline</span>


</div>

and my css 

.mainbox {
  max-width: 300px;
  margin: auto;
  border: 1px solid #454242;
  margin-top: 30px;
}

hr {
  border-top: 3px solid rgba(44, 44, 44, 0.69);
}

.leftbox {
  border-right: 1px solid #303925;
  font-size: 20px;
  padding: 5px;
  min-width: 150px;
  display: inline-block;
}

.myhr {
  border-bottom: 1px solid #293A42;
}

.rightbox {
  font-size: 16px;
  min-width: 150px;
}
htmlcss

Answer №1

If you want to create a table layout, you can use the display: table property.

Here is an example:

<div class="table">
  <div class="table-row">
    <div class="cell">
      text 1
    </div>
    <div class="cell">
      text 2
    </div>
  </div>
    <div class="table-row">
    <div class="cell">
      text 3
    </div>
    <div class="cell">
      text 4
    </div>
  </div>
</div>

You can style it with the following CSS:

.table {
  display: table;
  table-layout: fixed;
  border-collapse: collapse;
}

.table-row {
  display: table-row;
}

.cell {
  display: table-cell;
  border: 1px solid black;
}

For more examples, check out this JSFiddle link.

Answer №2

I was uncertain about the purpose of the <hr> and .myhr elements, so I assumed they were intended to span both columns. To achieve this, I used the properties display: table-cell for .leftbox and .rightbox, and set the .mainbox to display: table. Additionally, I applied table-layout: fixed to ensure that the lengths are consistent.

Source

See Example in Fiddle

Code Snippet

.mainbox {
  max-width: 300px;
  margin: auto;
  border: 1px solid #454242;
  margin-top: 30px;
  display: table;
  table-layout: fixed;
  border-spacing: 3px;
  border-collapse: separate;
}
hr {
  border-top: 3px solid rgba(44, 44, 44, 1);
  width: 200%;
}
.leftbox {
  border-right: 1px solid #303925;
  font-size: 20px;
  padding: 5px;
  min-width: 150px;
  display: table-cell;
}
.myhr {
  border-bottom: 2px solid #000;
  display: table-row;
  width: 200%;
  min-height: 30px;
  padding: 5px;
}
.rightbox {
  font-size: 16px;
  min-width: 150px;
  display: table-cell;
}
<div class="mainbox">

  <span class="leftbox"> STATE </span> : <span class="rightbox">TAMILNADU TAMILNADU TAMILNADU TAMILNADU</span>
  <div class="myhr">
    <hr/>
  </div>
  <span class="leftbox"> Phone </span> : <span class="rightbox">Landline</span>


</div>

Answer №3

Moreover, give this a try as well. I made some adjustments to your css and html code.

<div class="mainbox">
  <div class="row">
    <span class="leftbox">Region</span>: <span class="rightbox">TAMILNADU TAMILNADUTAMILNADU TAMILNADU</span>
  </div> 
  <div class="row">
    <span class="leftbox">Telephone</span>: <span class="rightbox">landline</span>
  </div>
</div>

CSS:

.mainbox {
     max-width: 300px;
    margin: auto;
    border: 1px solid #454242;
    margin-top: 30px;
    display: table;
}
.row {
    display:table-row;
}
{
    border-top: 3px solid rgba(44, 44, 44, 0.69);
}
.leftbox {
    border-right: 1px solid #303925;
    font-size: 20px;
    padding: 5px;
    min-width: 150px;
    word-wrap: break-word;
    display: table-cell;
    width:25%;
}
.myhr
{
    border-bottom: 1px solid #293A42;

}
.rightbox {
  /* word-wrap: break-word; */
    font-size: 16px;
 min-width: 150px;
 display:table-cell;
}

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

Larger icon graphics

Is it possible to increase the size of Glyphicons in Twitter Bootstrap 3.0 without using the btn-lg class? I found this code that makes glyphicons big: <button type="button" class="btn btn-default btn-lg"> <span class="glyphicon glyphicon-th- ...

csstwitter-bootstraptwitter-bootstrap-3glyphicons

Tips for adjusting the icon size within the <IconContext.Provider> dynamically

Currently, I am using the 'IconContext.Provider' tag to style my icons from the 'react-icons' library. Are there any solutions available to dynamically change the size of the icon based on the size of my media? Is using the global styl ...

cssreactjsnext.jsreact-icons

Discover the Optimal Approach to Implementing Callback Function with JSON Using Javascript and Jquery

I have a function that looks like this : <script> function sticky(json){something here} </script> Now, I would like to utilize Jquery to invoke this function and display its output within a specific div element with the ID of "stickid". H ...

jqueryhtml

Toggling the form's value to true upon displaying the popup

I have developed an HTML page that handles the creation of new users on my website. Once a user is successfully created, I want to display a pop-up message confirming their creation. Although everything works fine, I had to add the attribute "onsubmit= re ...

javascripthtmlcssforms

Lost: pointer for speech bubble

Here is the HTML code I have written: <!DOCTYPE html> <html> <head> <style type="text/css"> #box { width: 200px; height: 250px; border-radius: 15px; background-color: pink; ...

htmlcss

`Weaving mesh into place with three.js`

I'm struggling to grasp how to position my cubes on the canvas. I can't quite figure out how positioning actually works. I'm trying to find a way to determine if my mesh reaches the limits of the canvas. But what exactly is the unit of posit ...

javascripthtmlcanvasthree.js

What do you call the syntax %< ... >%?

Observed zoomInAnimation : true, zoomOutScale : false, templateLegend : "<ul class=\"<%=type.toLowerCase()%>-legend\"><% for (var j=0; j<sections.length; j++){%><li><span style=\"background-color:<%=section ...

javascripthtml

Eliminating bottom section in HTML/CSS

I've got this code snippet: new WOW().init(); /* AUTHOR LINK */ $('.about-me-img img, .authorWindowWrapper').hover(function() { $('.authorWindowWrapper').stop().fadeIn('fast').find('p').addClass('tr ...

javascripthtmlcssanimation

What steps should I take to align the image in the middle left according to my third paragraph?

Looking to format my table row with the image on the left middle and three paragraphs in the center. The image should align with the text, but currently it is not aligned due to its positioning between "Nom" and "Type." <div class="my-container"> ...

htmlcss

The Swiper slider will activate only upon resizing the window

I am facing an issue with displaying a horizontal timeline that can be scrolled. Currently, I am only able to scroll the timeline when I resize the window page, and I cannot figure out why this is happening. I believe my code is correct, but I want the t ...

javascripthtmlcssvue.js

Difficulty keeping the dropdown menu open in bootstrap 4

I am facing an issue with my dropdown menus. I want them to only toggle open or close when the dropdown menu itself is clicked, not when any of the list items or other parts of the page are clicked. Below is the code snippet that is causing the problem: ...

javascripthtmltwitter-bootstrapbootstrap-4twitter-bootstrap-4

When using a custom selection color to highlight underlined text, the underline becomes invisible

I am currently working on a website where I want to customize the text selection color. ::selection { background-color:#00ffff; } However, there seems to be an issue in this specific situation: p::after { content:"Try selecting the above elemen ...

htmlcssselection

Having trouble centering my menu bar on CSS, can anyone help?

I'm having trouble getting the buttons inside the menu bar to align properly. Does anyone have any suggestions on how to fix this? I'm not very experienced with coding, so any assistance would be greatly appreciated! .main-navigation { clear ...

cssmenucentering

Creating a touch-like scrolling experience with CSS and the mouse

Is there a way to incorporate mouse scroll functionality in my Angular app similar to the scrolling feature on touch screen devices where you swipe left or right to navigate? I'm interested in implementing a scrolling technique that allows users to cl ...

javascripthtmlcssangular

How come the overlay only appears the first time the button is clicked in JQUERY? What could be the issue here?

Why is my purple overlay with yellow text showing only once after the button is clicked, even though I have toggled the function? Check out my codepen to test the issue: https://codepen.io/cat999/project/editor/AEeEdg $('.animate-this').cl ...

javascriptjquerycss

What could be the reason for the padding not functioning properly on my Bootstrap 5.3 webpage?

What could be the reason for pe-5 not functioning properly? <head> <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="10727f7f64636462716050253e233e22">[email protect ...

htmltwitter-bootstrapbootstrap-modalbootstrap-5padding

Is it possible to maintain the sidebar while eliminating the scrolling JavaScript?

Looking to recreate the image display style on Facebook where pictures appear in a lightbox format. The challenge I'm facing is figuring out how they manage to have the sidebar with no visible scroll bar inside... If you want to see this for yourself ...

javascriptjqueryhtmlcss

What causes the CSS height attribute to mess up UL lists?

I'm struggling to understand a problem in my nested list. When I set the height of LI elements, they end up overlapping each other. Can someone explain why this is happening and suggest a proper way to apply height without causing this overlap effect? ...

htmlcsshtml-lists

Prevent images in Bootstrap carousel from being cropped while adjusting device height and width

I am attempting to implement a responsive bootstrap carousel similar to the one showcased in the airbnb example. My challenge lies in ensuring that the carousel remains responsive across all device sizes. I have tried setting fixed height and width for bot ...

htmlcssbootstrap-4

A white background emerges when I select md-dropdown

Lately, I've been experiencing an issue on my website where a white background pops up whenever I click on a dropdown (md-select) in my form. Initially, it only happened with forms inside a modal, but now it's affecting dropdowns across the entir ...

javascriptcssangularjshtmlangular-material