Dynamic arrangement of a dual-column table design that avoids aligning tables in parallel

Apologies for my novice coding skills as it's a mishmash of various email layouts, but I'm struggling to figure out why my table layout is not showing the columned tables side-by-side.

The issue seems to be with the two td elements having the class name container-small set at 50% width. They refuse to align side-by-side, even though I'm not using floats or divs.

Could it be because they are separate tables when they should ideally be part of the same td? Please provide any other suggestions or fixes to help me enhance my layout. The left column needs to be exactly 283px, while the right column can be fluid up to 100%. That's the main requirement I have.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width"/>
        <style type="text/css">
        @media only screen and (min-device-width: 541px), screen and (min-width: 541px) {
            #body {
                width: 600px !important;
            }
        }

        @media only screen and (max-width: 480px) {
            #body {
                width: 100% !important;
            }

            .container {
                display: block !important;
                width: 100% !important;
            }

            .container-small {
                display: block !important;
                width: 100% !important;
            }

            .header-image {
                height: auto !important;
                max-width: 480px !important;
                width: 100% !important;
            }

            .column-image {
                height:auto !important;
                max-width: 283px !important;
                width: 100% !important;
            }

            .content {
                color: #000000;
                font-family: Arial, Helvetica, sans-serif;
                font-size: 100% !important;
                font-weight: normal;
                line-height: 125% !important;
...
                    }
        </style>
    </head>
<body align="center" bgcolor="#666666" style="background-color: #666666; width: 100%; max-width: 600px;">

<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->

    <table id="body" align="center" bgcolor="FFFFFF" border="0" cellpadding="0" cellspacing="0" width="600" style="background-color: #FFFFFF; width: 100%; max-width: 600px; border: 0px solid #999999; border-right: 0px solid #999999;border-left: 0px solid #...
htmlcssemailhtml-tablefluid-layout

Answer №1

there seems to be an issue at this part:

    .container-small {
        display: block !important;
        width: 100% !important;
    }

simply delete those two properties mentioned above.

Here's the revised snippet:

@media only screen and (min-device-width: 541px), screen and (min-width: 541px) {
            #body {
                width: 600px !important;
            }
        }

        @media only screen and (max-width: 480px) {
            #body {
                width: 100% !important;
            }

            .container {
                display: block !important;
                width: 100% !important;
            }

            /* Removed
            .container-small {
                display: block !important;
                width: 100% !important;
            }
*/

            .header-image {
                height: auto !important;
                max-width: 480px !important;
                width: 100% !important;
            }

            .column-image {
                height:auto !important;
                max-width: 283px !important;
                width: 100% !important;
            }

            .content {
                color: #000000;
                font-family: Arial, Helvetica, sans-serif;
                font-size: 100% !important;
                font-weight: normal;
                line-height: 125% !important;
            }
        }

        .container {
            display: block!important;
            max-width: 600px!important;
            margin: 0 auto!important;
            clear: both!important;
        }

       /* REMOVE HERE
        .container-small {
            display: block !important;
            width: 100% !important;
        }
*/

        .header-image {
            height: auto !important;
            max-width: 600px !important;
            width: 100% !important;
        }

        .column-image {
            height: auto !important;
            max-width: 283px !important;
            width: 100% !important;
        }

        .content {
            max-width: 600px;
            margin: 0 auto;
            display: block;
        }

        ... (other styles)
       ...
           
      </td>
    </tr>
  </table>

  <!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</body>

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

transferring data from the interface to the processor

I'm encountering an issue with sending dropdown list values to a new page for display. When I try to load the page after selecting a building from the dropdown menu, I receive an error message. I'm unsure about what mistake I might be making. Be ...

phphtmllaravel

How can one effectively locate a specific element in an HTML document?

Using Beautiful Soup 4, I have successfully written code that scrapes online data from a webpage. My current challenge involves extracting data from a table, specifically targeting the 4th row. Is there a way to pass an argument to the .find() method to sk ...

pythonhtmlbeautifulsoup

Formatting tables

Below is the table structure that I have. I attempted to insert empty tds divs in order to achieve the formatting shown in the image, but I have not been successful. Any suggestions or ideas would be greatly appreciated. <table border="0" cellpadding=" ...

htmlcss

What is the reason why the 'hide menu onscroll' JavaScript function doesn't perform flawlessly on Safari web browser?

Compatibility with different browsers: works on Firefox, Chrome, and Edge. However, on Safari, the menu (navbar) behaves strangely. It appears when scrolling up but hides (floats up beyond the window) when scrolling to the top of the page without any downw ...

javascripthtml

Issues with Swiper functionality in Jquery Mobile

I have implemented the Swiper plugin by idangero.us along with jQuery Mobile... In this case, I am utilizing the Scroll Container Swiper for a content slider... However, I am encountering several difficulties when trying to integrate the code... You can ...

jquerycssjquery-mobilejquery-mobile-pageshowswiper.js

Minimize the need for page scrolling

My website includes hidden textarea fields to store javascript information that is sent to the server for processing. Unfortunately, the page displays a small form at the top and has a scroll bar due to the hidden textareas. Is there a way to eliminate th ...

html

CSS3 family tree tutorial: Incorporating a wife into the design

I came across a fascinating tutorial about creating a family tree using CSS3 only. However, I'm struggling to understand how to depict a marriage. To explain further: What the code currently accomplishes is this: what i aim to include is this: Alth ...

htmlcssfamily-tree

On mobile devices, table rows do not stretch across the full 100% width

I'm facing an issue with a table I'm using for a shopping basket on my website. Everything seems to be working fine until I added a tfoot element, causing the tbody to not span 100% of the container's width. I've been troubleshooting a ...

htmlcsshtml-tableresponsive

Angular 9: The instantiation of cyclic dependencies is not allowed

After transitioning from Angular 8 to Angular 9, I encountered an issue with a previously functioning HTTP communication service. The error message now reads: Error: Cannot instantiate cyclic dependency! HttpService at throwCyclicDependencyError (core ...

htmlangulartypescriptangular9

Alignment of inputs remains stubbornly off-center despite floating left

My main goal is to have all my inputs aligned to the left for a clean and organized look, similar to the image provided below: https://i.sstatic.net/5c0mX.png Despite my efforts to float the inputs and paragraphs to the left, I am facing an issue where t ...

htmlcss

Transferring Data Between Two Forms

Is there a way to transfer data between two HTML forms? For example, let's say we have two forms: Form 1: Contains a field for name and a submit button. Form 2: Contains fields for name, email, and a submit button. I would like to be able to fill o ...

phpjavascripthtmlforms

Strategies for restricting user input within a datalist

I have a project in which I am creating a webpage that displays a list of flights that can be filtered by destination, origin, price, and more. To achieve this, I have categorized each flight within a div element using its specific properties as classes. F ...

javascripthtmlcss

My preference is for the flex box to expand in width (sideways) without increasing in height (up and down)

Is there a way for flex items to expand in width but only in height when necessary? I enjoy using flexbox, but I find it frustrating that all flex items in a row grow to the same height even when there isn't enough content to fill them, resulting in a ...

htmlcssflexbox

How can you gradually make a CSS border disappear?

Can an element's border fade away with the use of JavaScript only, without relying on jQuery for animation? We are currently working with Sencha and it seems that ExtJS only allows for animating element size and position. While CSS3 offers helpful ani ...

javascriptextjscss

Dynamically showing a div using JavaScript and AJAX after changing the window location

After successfully fetching data from the server through AJAX, I am redirecting to the same screen/URL. Is it possible to show/display a div after redirecting using jQuery? $.ajax({ type: "POST", url: action, data: form_data, success: func ...

javascriptjqueryhtmlcssajax

Accessing the value of a hidden field within an ng-repeat loop when binding to an HTML table

I am working on a project where I have an HTML table with data being bound from AngularJS. The structure looks something like this: <tr ng-repeat="item in List| filter: { MachineType: 'Physical' }"> <td>{{item.MachineType}}< ...

javascripthtmlangularjs

Creating HTML code using PHP to display two tables next to each other

My goal is to display two tables side by side in an HTML table, each ordered by a different column. I attempted this using the following code: <tbody> <td> <?php require_once "db_data.php"; $bids_results = $mysqli-& ...

phphtmlcss

The website shifts as you navigate to a new page

Could use some insight on an issue with my website . Whenever I navigate to a different page, like the "Rules" page from the main site, the container seems to shift down slightly. Any ideas on what could be causing this? I've been struggling to pinpoi ...

phphtmlcss

Activating a inaccessible element

Attempting to enable a disabled element upon clicking a P element, the following code snippet demonstrates storing a value from one textbox into another. The appended div contains a subsequent textbox which will be disabled. On mouseover of the div, option ...

javascripthtml

What is the maximum amount of information that can be stored in a data attribute within the DOM?

Occasionally, I find myself wanting to include a substantial amount of data on the webpage in order to minimize additional AJAX calls for dynamic content. However, I am concerned about potential performance implications. Is there a penalty I should be aw ...

javascripthtmldombrowser