What is the best way to create a responsive vocabulary list in columns using CSS and HTML?

Question

What is the best way to create a responsive vocabulary list in columns using CSS and HTML?

Are you looking to create a unique vocabulary list using HTML & CSS with a special formatting?

Header (space space space space) Header 2
1. number one text (space space s) 4. number four
2. number two (space space space) 5. number five
3. number three text (space space ) 6. number six

If you resize your browser, the list will change to:

Header
1. number one
2. number two
3. number three

Header 2
4. number four
5. number five

The usual methods like using tables or lists with padding do not achieve this dynamic effect when resizing the browser.

html css

Answer 1

Answer №1

To create a layout that adjusts based on browser viewport width, consider using floating DIV elements.

<div style="float:left; padding: 5px 30px 5px 5px; width:400px">
  <h1>Heading 1</h1>
  <ul>
    <li>Number one</li>
    <li>Number two</li>
    <li>Number three</li>
  </ul>
</div>
<div style="float:left; padding: 5px 30px 5px 5px; width:400px">
  <h1>Heading 2</h1>
  <ul>
    <li>Number four</li>
    <li>Number five</li>
  </ul>
</div>

When the browser viewport is wider than ~800px, the DIVs will be displayed side by side. As you reduce the viewport width, the second DIV will move below the first DIV.

Answer 2

To create a layout that adjusts based on browser viewport width, consider using floating DIV elements.

<div style="float:left; padding: 5px 30px 5px 5px; width:400px">
  <h1>Heading 1</h1>
  <ul>
    <li>Number one</li>
    <li>Number two</li>
    <li>Number three</li>
  </ul>
</div>
<div style="float:left; padding: 5px 30px 5px 5px; width:400px">
  <h1>Heading 2</h1>
  <ul>
    <li>Number four</li>
    <li>Number five</li>
  </ul>
</div>

When the browser viewport is wider than ~800px, the DIVs will be displayed side by side. As you reduce the viewport width, the second DIV will move below the first DIV.

Answer 3

Answer №2

To achieve this layout, you can utilize CSS with the float property. By using float, you can display two elements side by side within a container. However, if the total width of both elements exceeds that of the container (considering borders), they will stack on top of each other. Feel free to customize the styling to your liking; UL/LI are not necessary and you could even use a table within the div element.

#table1 {
    border: 1px solid #000;
    float: left;
    width: 200px;
}

#table2 {
    border: 1px solid #000;
    float: left;
    width: 200px;

}

<div id='table1'>
    <h1>Head 1</h1>
    <ul>
     <li>Item 1</li>
     <li>Item 2</li>
     <li>Item 3</li>
    </ul>
</div>
<div id='table2'>
    <h1>Head 2</h1>
    <ul>
     <li>Item 4</li>
     <li>Item 5</li>
     <li>Item 6</li>
    </ul>
</div>

Answer 4

To achieve this layout, you can utilize CSS with the float property. By using float, you can display two elements side by side within a container. However, if the total width of both elements exceeds that of the container (considering borders), they will stack on top of each other. Feel free to customize the styling to your liking; UL/LI are not necessary and you could even use a table within the div element.

#table1 {
    border: 1px solid #000;
    float: left;
    width: 200px;
}

#table2 {
    border: 1px solid #000;
    float: left;
    width: 200px;

}

<div id='table1'>
    <h1>Head 1</h1>
    <ul>
     <li>Item 1</li>
     <li>Item 2</li>
     <li>Item 3</li>
    </ul>
</div>
<div id='table2'>
    <h1>Head 2</h1>
    <ul>
     <li>Item 4</li>
     <li>Item 5</li>
     <li>Item 6</li>
    </ul>
</div>

What is the best way to create a responsive vocabulary list in columns using CSS and HTML?

Answer №1

Answer №2

Similar questions

Adjust the background color of a list item using Typescript

Issue with concealing floated elements within a container div

Unexpected behavior with overflow:scroll in the <body> tag

utilizing window.location.href to direct to a page with javascript capabilities

What could be causing the unexpected display of my Bootstrap 4 card headers?

How about some reusable skinning script?

What is the solution for correcting the currency formatting in a text input field?

I would appreciate your assistance in the modification of the input type from text to radio within the PHP code

Tips on using PHP to populate a Bootstrap popover

Is there a way to specifically retrieve the number of likes or followers from Facebook, Twitter, Instagram, and Snapchat in order to display them on my HTML website?

Running a MySQL query within a WordPress post using shortcode? Keep it in the post and avoid sending it to the footer with

Step-by-step guide on displaying a window containing text when hovering over a CSS class

Set tab navigation widget with a fixed height

Utilizing Bootstrap to emphasize the selected navbar item by adding the active class upon

Adjusting ThreeJS Canvas to Utilize Entire Space

Making Bootstrap div stretch vertically with absolutely positioned content

Unable to create a responsive layout because of the use of inline CSS with "margin"

only a single backdrop filter can be in use at any given moment

What is the method for superimposing a div with a see-through input field?

The height of Material-UI Grid item is surpassing the height of its container