Steering clear of using tables for structuring HTML 5 pages

My question is straightforward: how can I avoid using tables for layout in a proper way? I have encountered issues with using DIVs and floating them left as sometimes, when the browser window is stretched, all the divs stack on top of each other...

In my setup, I have a container div.

<div id="container"> 
<div id="child1"> </div>
<div id="child2"> </div>
<div id="child3"> <div>
</div>

The container occupies 100% of the page. Childs 1 and 2 have fixed widths (e.g. 300px) and the 3rd child has a variable width of 30%.

I want to prevent them from stacking on top of each other when the browser window is stretched. Is this achievable? Thank you!

csshtml

Answer №1

Avoid using tables for layouts. Check out this informative link that might be useful to you.

Answer №2

Avoid using the <table> element for layout purposes. It is designed specifically for displaying tabular data and using it otherwise would be incorrect. If you find yourself unable to achieve the desired layout using floats or display: inline, consider consulting JavaScript temporarily until full support for flexbox functionality is available.

For more information on why tables should not be used for layout in HTML, check out this post: Why not use tables for layout in HTML?

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

Fill in the text field according to the option selected from the dropdown menu

I have a function in my JavaScript code that is supposed to fill a textbox based on the selection made in a drop-down menu. Here is an example with just one option out of eight: <script> function UpdateQuantity(){ if (document.getElementByID("Raff ...

javascriptjqueryhtml

Positional Error Found in Bootstrap Popover Arrow

I'm having an issue with the Bootstrap Popover Tooltip. Can anyone explain why the arrow is not formatting correctly? <div style="display:inline-block;"> <a id="pop" href="#" data-toggle="popover" data-content="<%= user.experience.de ...

jquerycsstwitter-bootstrap

Setting up only two input fields side by side in an Angular Form

I'm fairly new to Angular development and currently working on creating a registration form. I need the form to have two columns in a row, with fields like Firstname and Lastname in one row, followed by Phone, Email, Password, and Confirm Password in ...

javascriptcssangulartypescriptangular-material

What steps can be taken to ensure that a dropdown menu responds instantly to the JavaScript code provided?

Upon discovering this code snippet in a different answer (on jsfiddle), I noticed that it allows for the appearance of a text box when the user selects 'other' from the dropdown menu. However, when I include '<option value='0' s ...

javascripthtml

Comparison between padding on parent element and margin on child element

When trying to organize logical divs within a container with appropriate spacing, there are two main approaches to consider: Setting the padding property of the container Setting the margin property of the inner div Sometimes, multiple elements need to ...

htmlcss

Using CSS media queries to adjust styles based on hover status and screen size

I am currently working on a CSS Media Query to target different styles for mobile devices, desktops with low resolution screens, and desktops with high resolution screens. I initially attempted using the hover query to distinguish between mobile and deskto ...

htmlcssmedia-queries

The behavior of the Bootstrap toggle with a chevron varies between the production environment and the local

For my Bootstrap accordion menu, I used a trick where the chevron turns upside down when clicked on the toggle. You can check out the trick here. In the example, the chevron is pulled to the right. When I implemented this on my website locally, the chevr ...

javascriptjqueryhtmlcssbootstrap-4

Add a .handlebars or .hbs file to an HTML document

When visiting the emberjs.com homepage, you will find an example of a todo list using Ember.js and Handlebars.js. Within the todo list, there is an extension for a .hbs file. I am curious - what exactly is a .hbs file? And how can I include a .hbs script ...

javascripthtmlember.jshandlebars.js

Reduce the file size of CSS and JS files for Magento

We are facing an issue with minifying CSS and Javascript for our Magento website. Currently, the size of our website is 1.1 MB and we aim to reduce it to 1 MB or even lower if possible. I tried using the "CSS Settings" and "Javascript Settings" functions ...

javascriptcssmagento-1.9minify

Angular offers a simple solution for adding events to all "p", "span", and "h1" elements easily

I am attempting to implement a "double click" event on all text HTML elements (p, span, h1, h2, etc.) across all pages in order to open a popup. I believe there should be a more efficient way than adding (dblclick)="function()" to each individual element. ...

htmlangularevents

Troubles with jQuery mobile functionality when utilizing hyperlink urls within a table

Currently, I am utilizing jQuery mobile to populate a table using ajax. One of the fields in the table is a hyperlink (href) that has a class assigned to it to trigger an alert on the screen. However, the alert does not appear when clicked: I have attempt ...

javascriptjqueryhtmlajaxjquery-mobile

retrieve the height value of a div element using AngularJS

I'm having trouble retrieving the updated height of a div using AngularJS. It seems to only provide the initial value and does not update as expected: vm.summaryHeight = $(".history-log-container").height(); console.log(vm.summaryHeight);//always dis ...

cssangularjs

Modify the appearance of the element that is currently chosen

I have a navigation menu and I would like to change the style of the element that is selected from the list in the navigation menu. I am using React with the Grid element from material-ui. NavigationMenu.tsx: import React, { useState, useEffect } from "r ...

cssreactjsmaterial-ui

How can I make a div blur as I scroll through the page

How can I make each item in my timeline focused one at a time as the user scrolls, instead of having all items in focus simultaneously? Any ideas or suggestions would be appreciated. Here is my fiddle and here is my code $(document).ready(function(){ ...

javascriptjqueryhtmlcsstimeline

The fade in/out effect can only be applied to a div element and not its nested children

I have implemented a JavaScript script that toggles the visibility of elements on a webpage, but I am facing an issue where it only displays the div with a specific id and does not show any other nested divs within that particular div. Below is my CSS cod ...

javascriptjqueryhtmlcss

The Asp button fails to initiate the function

One area of concern I have is with the signup page for my project, particularly regarding the following code: <input type="email" id="email" title="invalid email!" runat="server" placeholder="email" /> ...

c#htmlasp.netweb

Tips for efficiently exporting and handling data from a customizable table

I recently discovered an editable table feature on https://codepen.io/ashblue/pen/mCtuA While the editable table works perfectly for me, I have encountered a challenge when cloning the table and exporting its data. Below is the code snippet: // JavaScr ...

javascriptphpjquerycss

Serialize a series of select boxes to optimize for AJAX POST requests

To better explain my issue, let's consider a simple example: Imagine I have a form that collects information about a user: <form action="#" method="post" id="myform"> <input type="text" name="fname" /> <input type="text" name= ...

javascriptjqueryhtml

What are the steps to interact with a marquee using Selenium?

Currently, I am faced with an application that displays a list of upcoming vessels in a marquee format. I am looking for a way to click on the specific data using Selenium with Java. Any advice or alternative solutions would be greatly appreciated. ...

javahtmlseleniumclickmarquee

What is the best way to display a div based on a keyword match?

If the keyword search results in a match, I can display the corresponding input text and its related category div. Now, I am attempting to also search through category names. If the searched keyword matches a category name, that specific div should be visi ...

javascripthtmljquery