Arranging divs in a layout similar to tables cells and rows

Currently, I am developing a small game to enhance my Javascript skills.

In the past, I utilized tables for displaying my content (images):

Now, my goal is to switch from using tables to divs. However, I want to position them in a manner that resembles the image provided above. Here's what I have so far:

This is the code snippet for the Lemonade stand div (similar structure applies to others as well):

<div style="background: url(images/texture.png); display: table; margin-left: auto; margin-right:auto; border: solid black 2px; padding: 10px">
  <div style="padding-bottom: 7px"><b><center>Lemonade stand</center></b></div>
  <div style="padding-bottom: 7px"><center><button id="countButton" style="padding: 2px;"><img src="images/lemonade.png" width="50px" height="50px" style="padding: 2px"></button></center></div>
  <div><b><font color="brown">Level:</font></b> <span id="displayLevel"> 1 </span> <img src="images/plus.png" id="buyLevel" width="20px" height="18px"></div>
  <div><b><font color="green">Production:</font></b> <span id="production"> 1 </span> $ </div>
  <div> <font style="font-size: 15px">(Prod. per click) </font> </div>
  <div><b><font color="red">Level price:</font></b> <span id="pretlevel"> 0 </span> $ </div>
</div>

I am new to this, but eager to learn. Thank you!

htmlcss

Answer №1

Transforming a div into a table requires the following styles:

display:table; for div with the class table-analog

display:table-row; for div with the class tr-analog

display:table-cell; for div with the class td-analog;

<div style="display: table;">

<div style="display: table-row;">
<div style="background: url(images/texture.png); display: table-cell; margin-left: auto; margin-right:auto; border: solid black 2px; padding: 10px">
  <div style="padding-bottom: 7px"><b><center>Lemonade stand</center></b></div>
  <div style="padding-bottom: 7px"><center><button id="countButton" style="padding: 2px;"><img src="images/lemonade.png" width="50px" height="50px" style="padding: 2px"></button></center></div>
  <div><b><font color="brown">Level:</font></b>  <span id="displayLevel"> 1 </span> <img src="images/plus.png" id="buyLevel" width="20px" height="18px"></div>
  <div><b><font color="green">Production:</font></b>   <span id="production"> 1 </span> $ </div>
  <div> <font style="font-size: 15px">(Prod. per click) </font> </div>
  <div><b><font color="red">Level price:</font></b>   <span id="pretlevel"> 0 </span> $ </div>
</div>
<div style="background: url(images/texture.png); display: table-cell; margin-left: auto; margin-right:auto; border: solid black 2px; padding: 10px">
  <div style="padding-bottom: 7px"><b><center>Lemonade stand</center></b></div>
  <div style="padding-bottom: 7px"><center><button id="countButton" style="padding: 2px;"><img src="images/lemonade.png" width="50px" height="50px" style="padding: 2px"></button></center></div>
  <div><b><font color="brown">Level:</font></b>  <span id="displayLevel"> 1 </span> <img src="images/plus.png" id="buyLevel" width="20px" height="18px"></div>
  <div><b><font color="green">Production:</font></b>   <span id="production"> 1 </span> $ </div>
  <div> <font style="font-size: 15px">(Prod. per click) </font> </div>
  <div><b><font color="red">Level price:</font></b>   <span id="pretlevel"> 0 </span> $ </div>
</div>

Answer №2

EXAMPLE http://jsfiddle.net/p9dmoq8s/

XHTML

<section class="wrapper">
  <article class="content">A</article>
  <article class="content">B</article>
</section>
<section class="wrapper">
  <article class="content">C</article>
  <article class="content">D</article>
</section>

Styling

.wrapper {
    margin: 0 auto;
    text-align:center;
    display:block; 
}
.content {
    display:inline-block; 
    background:red;
    width:100px; 
    height:50px;
    margin:5px;
}

By using inline-block, the divs will appear next to each other.

Answer №3

There are multiple ways to tackle this.

You can opt for using the inline-block display property.

Alternatively, you can employ the float: left with a width of 40%, for example.

Therefore, for some variety, here is an example with floated div elements.

Furthermore, take note that I have included the CSS as an external file so you can have a solid foundation to enhance your knowledge in styling web elements.

I've utilized class selectors, and if you're unfamiliar with them, I suggest doing some research as they form the fundamentals of CSS.

.item {
  background: url(images/texture.png);
  border: solid black 2px;
  padding: 10px;
  width: 40%;
  float: left;
}
.line {
  padding-bottom: 7px;
}
.item-container {
  max-width: 300px;
}
<div class="item-container">
  <div class="item">
    <div class="line">
      <b>Lemonade stand</b>
    </div>
    <div class="line">
      <button id="countButton" style="padding: 2px;">
        <img src="images/lemonade.png" width="50px" height="50px" style="padding: 2px">
      </button>
    </div>
    <div><b>Level:</b><span id="displayLevel"> 1 </span> 
      <img src="images/plus.png" id="buyLevel" width="20px" height="18px">
    </div>
    <div><b>Production:</b><span id="production"> 1 </span> $</div>
    <div>(Prod. per click)
    </div>
    <div><b>Level price:</b><span id="pretlevel"> 0 </span> $</div>
  </div>
  <div class="item">
    <div class="line">
      <b>Lemonade stand</b>
    </div>
    <div class="line">
      <button id="countButton" style="padding: 2px;">
        <img src="images/lemonade.png" width="50px" height="50px" style="padding: 2px">
      </button>
    </div>
    <div><b>Level:</b><span id="displayLevel"> 1 </span> 
      <img src="images/plus.png" id="buyLevel" width="20px" height="18px">
    </div>
    <div><b>Production:</b><span id="production"> 1 </span> $</div>
    <div>(Prod. per click)
    </div>
    <div><b>Level price:</b><span id="pretlevel"> 0 </span> $</div>
  </div>
</div>

Both item classes are contained within item-container, allowing you to adjust the parent's width to create a grid layout if needed.

Lastly, remember to consider using clearfix when utilizing float properties. Find out more about it here: What is a clearfix?

Answer №5

If you're looking to style your content, there are a couple of options to consider: display: table (though it may have some compatibility issues) and display: inline-block (which is my preferred choice):

<div style="background: url(images/texture.png);display:inline-block;width:45%; margin-left: auto; margin-right:auto; border: solid black 2px; padding: 10px">
  <div style="padding-bottom: 7px"><b><center>Lemonade stand</center></b></div>
  <div style="padding-bottom: 7px"><center><button id="countButton" style="padding: 2px;"><img src="images/lemonade.png" width="50px" height="50px" style="padding: 2px"></button></center></div>
  <div><b><font color="brown">Level:</font></b></td> <td> <span id="displayLevel"> 1 </span> <img src="images/plus.png" id="buyLevel" width="20px" height="18px"></div>
  <div><b><font color="green">Production:</font></b> </td> <td> <span id="production"> 1 </span> $ </div>
  <div> <font style="font-size: 15px">(Prod. per click) </font> </div>
  <div><b><font color="red">Level price:</font></b> </td> <td> <span id="pretlevel"> 0 </span> $ </div>
</div><div style="background: url(images/texture.png);display:inline-block;width:45%; margin-left: auto; margin-right:auto; border: solid black 2px; padding: 10px">
  <div style="padding-bottom: 7px"><b><center>Restaurant</center></b></div>
  <div style="padding-bottom: 7px"><center><button id="countButton" style="padding: 2px;"><img src="images/lemonade.png" width="50px" height="50px" style="padding: 2px"></button></center></div>
  <div><b><font color="brown">Level:</font></b></td> <td> <span id="displayLevel"> 1 </span> <img src="images/plus.png" id="buyLevel" width="20px" height="18px"></div>
  <div><b><font color="green">Production:</font></b> </td> <td> <span id="production"> 1 </span> $ </div>
  <div> <font style="font-size: 15px">(Prod. per click) </font> </div>
  <div><b><font color="red">Level price:</font></b> </td> <td> <span id="pretlevel"> 0 </span> $ </div>
</div>

Answer №6

.bloc {
  background: url(images/texture.png); 
  display: inline-block; 
  margin-left: auto; 
  margin-right:auto; 
  border: solid black 2px; 
  padding: 10px 
}

.bloc-title {
  padding-bottom: 7px;
  font-weight : bold;
  text-align : center;
}

.bouton-count {
  padding: 2px; 
}

.bloc-main-image {
  padding: 2px;
  width : 50px;
  height : 50px;
}

.bloc-level-name {
  font-weight : bold;
  color : brown;
}

.bloc-image-plus {
  width : 20px;
  height : 18px;
}

.bloc-production {
  font-weight : bold;
  color : green;
}

.bloc-prod-per-click {
  font-size : 15px; 
}

.bloc-level-price {
  color : red;
  font-weight : bold;
}

.custom-table {
  display : table;
  width : 100%;
}

.custom-cell {
  display : table-cell;
  vertical-align : middle;
}

.custom-cell-right {
  text-align : right; 
]
<div class="custom-table">
  <div class="custom-cell custom-cell-right">
    <div class="bloc">
      <div class="bloc-title">
        Lemonade stand
      </div>
      <div class="bloc-title">
        <button id="countButton" class="bouton-count">
          <img src="images/lemonade.png" class="bloc-main-image">
        </button>
      </div>
      <div>
        <span class="bloc-level-name">Level:</span>
        <span id="displayLevel">1</span>
        <img src="images/plus.png" id="buyLevel" class="bloc-image-plus">
      </div>
      <div>
        <span class="bloc-production">Production:</span>
        <span id="production">1</span>
        $ 
      </div>
      <div class="bloc-prod-per-click">
        (Prod. per click)
      </div>
      <div>
        <span class="bloc-level-price">Level price:</span>
        <span id="pretlevel"> 0 </span> $ </div>
      </div>
  </div>
  <div class="custom-cell">
    <div class="bloc">
      <div class="bloc-title">
        Lemonade stand
      </div>
      <div class="bloc-title">
        <button id="countButton" class="bouton-count">
          <img src="images/lemonade.png" class="bloc-main-image">
        </button>
      </div>
      <div>
        <span class="bloc-level-name">Level:</span>
        <span id="displayLevel">1</span>
        <img src="images/plus.png" id="buyLevel" class="bloc-image-plus">
      </div>
      <div>
        <span class="bloc-production">Production:</span>
        <span id="production">1</span>
        $ 
      </div>
      <div class="bloc-prod-per-click">
        (Prod. per click)
      </div>
      <div>
        <span class="bloc-level-price">Level price:</span>
        <span id="pretlevel"> 0 </span> $ </div>
      </div>
  </div>
</div>
<div class="custom-table">
  <div class="custom-cell custom-cell-right">
    <div class="bloc">
      <div class="bloc-title">
        Lemonade stand
      </div>
      <div class="bloc-title">
        <button id="countButton" class="bouton-count">
          <img src="images/lemonade.png" class="bloc-main-image">
        </button>
      </div>
      <div>
        <span class="bloc-level-name">Level:</span>
        <span id="displayLevel">1</span>
        <img src="images/plus.png" id="buyLevel" class="bloc-image-plus">
      </div>
      <div>
        <span class="bloc-production">Production:</span>
        <span id="production">1</span>
        $ 
      </div>
      <div class="bloc-prod-per-click">
        (Prod. per click)
      </div>
      <div>
        <span class="bloc-level-price">Level price:</span>
        <span id="pretlevel"> 0 </span> $ </div>
      </div>
  </div>
  <div class="custom-cell">
    <div class="bloc">
      <div class="bloc-title">
        Lemonade stand
      </div>
      <div class="bloc-title">
        <button id="countButton" class="bouton-count">
          <img src="images/lemonade.png" class="bloc-main-image">
        </button>
      </div>
      <div>
        <span class="bloc-level-name">Level:</span>
        <span id="displayLevel">1</span>
        <img src="images/plus.png" id="buyLevel" class="bloc-image-plus">
      </div>
      <div>
        <span class="bloc-production">Production:</span>
        <span id="production">1</span>
        $ 
      </div>
      <div class="bloc-prod-per-click">
        (Prod. per click)
      </div>
      <div>
        <span class="bloc-level-price">Level price:</span>
        <span id="pretlevel"> 0 </span> $ </div>
      </div>
  </div>
</div>

I adjusted the layout by using 2 div containers to mimic a table structure instead of using traditional CSS properties.

By encapsulating your bloc in these nested divs, one with the CSS property display : table for a table row effect and the inner div with the property display : table-cell to represent a 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

What is the best way to create a CSS selector for a button with two classes within a .less file?

Here is my current CSS: button { background: @button-background; color: @text; &.focus { background-image: linear-gradient(#79d858, #569e3d); border-color: #4a993e; color: white; ...

css

Tips for aligning an element in the center in relation to its sibling above

Help Needed with Centering Form Button https://i.sstatic.net/QhWqi.png I am struggling to center the "Send" button below the textarea in the form shown in the image. Despite trying various methods like using position absolute, relative, and custom margin ...

javascripthtmlcssreactjsbootstrap-4

The edit disable function is malfunctioning

Currently, I am trying to disable the edit mode of the ion-searchbar. This is what my code looks like - <ion-searchbar [disabled]="true" style="padding: 0" class="add-place-item-divider" [(ngModel)]="mainTrail.source"></ion-searchbar> How ...

javascriptcssionic-frameworkionic2searchbar

Is there a way to alter the color of the weekday header in the Date picker calendar?

I'm working on enhancing the accessibility of my website by changing the default blue color of the weekdays header (highlighted area in the screenshot). I've attempted to modify the CSS code below, but no matter which color code I use, I can&apos ...

htmlcssangulardatepicker

Presenting XML data in HTML using a customized CSS stylesheet

I've explored various methods for showcasing an XML file on a web page using HTML, but I haven't yet encountered one that incorporates a CSS style sheet. The XML file I have already includes a CSS style sheet. When viewed in a web browser, the . ...

javahtmlcssxmlstyles

The image width does not match the width of the table element

Currently, I am working on an HTML newsletter and facing an issue where the width of my image does not match the full width of the td tag, despite both having the same pixel value. The image appears as 180 pixels wide, whereas the td tag is set to be 186 ...

html

What steps can be taken to enable users to send and receive messages on my chat website?

I just completed creating a chat website using HTML, CSS, JavaScript, and jQuery and have now published it. You can view it at However, the site still lacks the functionality that would allow users to send and receive messages through it. Can anyone prov ...

javascriptjqueryhtmlcss

Achieving a centered SearchBar with a single button on the NativeBase header

I am trying to center the search bar with the menu button on the right side of the header using Nativebase. The code for this is provided below: <Header> <Body> <Button style={styles.searchButton} onPress={() => ...

cssreactjsreact-nativenative-base

What is the best way to implement a hover effect on each direct child individually using CSS?

I have been attempting to create a tab bar with hover effects on its direct children, but I am facing some challenges. Below is the code snippet I have so far, which aims to apply an effect to each element inside the list individually. HTML code : < ...

htmlcss

The Angular framework seems to be causing a problem with a Bootstrap column that is supposed to fill 100% of the width

I am currently working on a page that consists of a side navigation bar and a content area. Here is a basic representation of its layout: https://i.sstatic.net/XcPQL.png [https://jsfiddle.net/hd46twu1/6/][2] While redeveloping the same application using ...

cssangulartwitter-bootstrapflexbox

Selector for the Nth child element

Struggling with the nth child selector. Here is the HTML snippet: HTML <div class="container"> <ul class="mh-menu"> <li> <a href="#"> <span>Chairman of the Board</span> <spa ...

htmlcsscss-selectors

Rearranging the order of Div elements within a main container using JavaScript DOM manipulation

How can I move elements within a div from the start to the end in the same div, for example, changing the order from 1-2-3 to 2-3-1? My code: const cards = document.querySelectorAll(".card"); const firstCard = document.querySelectorAll(".card")[0].inne ...

javascripthtmldomnodelist

Having trouble simulating JavaScript Math.random in Jest?

Math.random() seems to always return random values instead of the mocked ones. script.test.js jest.spyOn(global.Math, "random").mockReturnValue(0.123456789); const html = fs.readFileSync(path.resolve(__dirname, "./script.html"), " ...

javascripthtmljestjsjsdom

The div element is refusing to display the background image

I'm struggling to add images as background to a div. When I try inline styling, the background-image appears fine. However, when I attempt to use an external CSS file, the image does not show up. I have carefully checked the link and made sure that t ...

htmlcss

Is there a way to position an X item on the first row and another X item on the following row using flexbox?

I want to use flexbox to arrange 10 buttons in a row on a large screen. On a medium screen, I'd like 5 buttons on the first row and 5 on the second row. For small screens, 2 buttons per row, and for very small screens, one button per row. It's im ...

csswebflexbox

Three images intersecting one another

I am facing an issue with the transparency of one specific image. The images on the left and center look fine, but the one on the right is not hidden behind the center image. I have tried using overflow: hidden and z-index, but haven't had any success ...

htmlimagecss

What is the best way to eliminate vertical spacing among li elements in CSS

I am facing a challenge with my HTML code and styling, which is just an example: <div id="mn" style="margin-top:200px;"> <div class="first">1</div> <div class="second">2</div> & ...

cssmarginspacing

An easy method for modifying data on a webpage hosted by an ESP8266 device

In my web page, I have a form to input times. The page is saved in flash memory and I want to update the times with previously stored values in EEPROM without loading the page into RAM. I prefer not to use websockets or AJAX for this purpose. I am looking ...

c++formsarduinohtmlesp8266

Boxes maintain their height consistency even after a page refresh

I Implemented This Script to Ensure Same Height for Boxes <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.2.min.js"> $(document).ready(function(){ var highestBox = 0; $('.box').each(function(){ ...

jquerycssheightrefreshbox

Include a div element within the slider

In the process of developing a slider feature that includes both images and paragraphs on each slide, I have encountered a stumbling block while attempting to create a new div element. Despite trying various solutions, the methods that previously worked fo ...

javascriptjqueryhtmlcssslider