What is the best way to ensure that two columns in HTML are responsive?

Currently, I have a <table> for the entire page and another <table> specifically for the header. The header table consists of two columns containing simple images. Here is the initial layout:

https://i.sstatic.net/dQpSC.png

While these columns are responsive, my goal is to limit the header width to a maximum and minimum of 640 pixels. Despite using sample images here, the actual ones are smaller with no space between them. Adding padding affects responsiveness adversely.

When resizing the window, the right-hand image drops below the first one, which is ideal (see the responsive layout below). However, this transition should occur once the screen size falls below 640 pixels, not just when hitting that particular point.

Responsive layout:

https://i.sstatic.net/KT7hr.png

To achieve a fixed header width of 640 pixels and ensure responsiveness kicks in under 640 pixels, what adjustments do I need to make? Below is the current code snippet used:

<!-- WHOLE PAGE -->
<table width="100%" cellspacing="0" cellpadding="0" border="0" style="background-color: #f3f3f3;">
    <tr>
        <td style="text-align: center; vertical-align: top;">
            <!-- HEADER -->
            <table align="center" cellspacing="0" cellpadding="0" border="0" style="background-color: #ffffff; ">
                <tr>
                     <!-- Logo -->
                     <td align="left" style="display: inline-block; padding: 5px;">
                         <a href="#">
                            <img width="200px" border="0" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" style="display: block;" />
                         </a>
                     </td>
                     <!-- Logo -->
                     <td align="right" style="display: inline-block; padding: 5px;">
                         <a href="#">
                            <img width="200px" border="0" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" style="display: block;" />
                         </a>
                     </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

Answer №1

To ensure your table data (td) occupies 100% width on devices below 640 pixels, add the following media query to your CSS file.

Make sure you have included the classes table and td in your header section.

.logo:first-child
{
background: red;
}
.logo:last-child
{
background: blue;
}
img{
width:100%;
}
@media screen and (max-width: 640px) {
.header{
width:100%;
}
.logo{
width:100%;

}
}
<table width="100%" cellspacing="0" cellpadding="0" border="0" style="background-color: #f3f3f3;">
    <tr>
        <td style="text-align: center; vertical-align: top;">
            <!-- HEADER -->
            <table align="center" cellspacing="0" cellpadding="0" border="0" style="background-color: #ffffff; " class="header">
                <tr>
                     <!-- Logo -->
                     <td align="left" style="display: inline-block; padding: 5px;" class="logo">
                         <a href="#">
                            <img width="200px" border="0" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" style="display: block;" />
                         </a>
                     </td>
                     <!-- Logo -->
                     <td align="right" style="display: inline-block; padding: 5px;" class="logo">
                         <a href="#">
                            <img width="200px" border="0" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" style="display: block;" />
                         </a>
                     </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

For a live demonstration of responsiveness, visit:

https://jsfiddle.net/vaishuk/qhqgrgnc/1/

I hope this information is helpful!

Answer №2

It seems like you may be overlooking the importance of using Media Queries. By setting the display property to inline-block, the divs will align side by side.

If you take out the inline-block on the td(s) within the second table and apply a media query after assigning a css class:

@media (max-width:640px){
    td.secondtable-cell{
        display: block;
    }
}

Following these steps should result in the desired outcome. Keep in mind that you may need to adjust margins or padding for spacing purposes.

Answer №3

Avoid using tables as they are not suitable for responsive design. Nowadays, div elements are preferred to create flexible containers.

CSS:

#page{
  width: 1280px;
}

#container1,#container2{
  disply:inline-block;
  width:49%;
}

HTML:

<div id="page">
  <div id="container1">Container2</div>
  <div id="container2">Container1</div>
</div>

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

Ways to conceal components upon clicking a different element

Struggling to make this jQuery function properly. I have a form with all fields contained in a div.form-group. The subscribe button is identified by the id subscribe. I'm aiming to hide the form fields when clicked, but my JavaScript doesn't see ...

When activating SSR in the Urql client, I encountered the following unexpected error: Server HTML should not include an <a> within a <div>

Unexpected Error Encountered while Rendering HTML at div at Styled(div) (Emotion Element) at div at Styled(div) (Emotion Element) at Flex (Chakra UI) at NavBar (Navigation Bar) at Index (Homepage) at withUrqlClient(Index) (Urql Client) at ColorModeProvider ...

Tips for preserving alignment amid fluctuations in window size using CSS and HTML

Being new to using CSS for webpage design, I'm currently facing some alignment challenges. The issue arises when I resize the window in which my webpage is displayed, causing the elements on the page to lose their alignment due to fixed widths being s ...

Adjusting the width of a div element using a button

I am currently diving into the world of JavaScript, React, and Node.js. My current challenge involves attempting to adjust the width of a div element using a button. However, I keep encountering the same frustrating error message stating "Cannot read prope ...

How can you activate CSS intellisense for ASP.NET .cshtml files in VS Code?

Recently, I added the "HTML CSS Support" extension to my VS Code, but it seems like it's only compatible with files having a .html extension. Unfortunately, I've been facing difficulties in getting it to work properly with .cshtml files unless I ...

Elements on the page are being truncated beyond the visible viewport

Encountering an issue with a web page I'm currently developing that is proving challenging to explain. The problem occurs when the page is viewed in a small browser window and cuts off when scrolling horizontally to content outside of the viewport. Wh ...

A different approach to handling file uploads without using Ajax within a parent form

Currently, I am facing a challenge with an HTML form used to update personal details in my workplace's database system. The form includes a feature that allows users to upload a picture of the person they are editing. However, I am trying to enhance t ...

Trouble with jQuery addClass function when trying to add to a specific object variable

I'm attempting to give an error class to an input textbox to inform the user that their input is invalid. Within the change event, I am referencing what seems to be the input field and storing it in a variable. However, calling addClass on the var ...

Make the div expand across the entire width of the browser, regardless of the content contained within

Hey there, I'm facing an issue that needs fixing. I have a form that I need to place inside a box. So, I nested the form inside a div and added a background color to the div. The only problem is that the div is expanding to the entire width of the bro ...

The side navigation panel transition is stuck and failing to slide out as intended

My element is able to slide in smoothly, but encounters trouble when attempting to slide back out. I suspect the issue lies within the syntax for "display: none". Any assistance or recommendations would be greatly appreciated, and feel free to request more ...

Show two columns horizontally using JavaScript

Hey, I'm working on a project where I need to display data from an array in an HTML output table. However, I'm facing an issue with displaying the table on the same page after clicking the submit button. Using document.write redirects me to anoth ...

Send a string to directive via HTML

Trying to implement a "clipboard" directive following this example. In my case, I need to dynamically compute the string to be copied to the clipboard. The goal is to pass the output of a function that generates the string to the directive. Currently, I ...

Change the value of a cell in a table dynamically with the use of Angular

I am currently developing a web application using Angular 6. Within the HTML template, I have included some code that showcases a specific part of an array within a table cell. It's worth noting that the table is constructed using div elements. <d ...

Issue with Dismiss Button Display in Bootstrap Alert

I've been experimenting with Bootstrap and I realized that even though I followed all the instructions on their Alert page, my close button just appears as a large grey square with an X in it. Any suggestions on what might be missing? https://codepe ...

Dynamically using jQuery, a table with alternating rows contains a select box in the background color

I have a table with rows that include select boxes. I want to apply alternating colors to the rows, but the select boxes aren't changing color. How can I achieve this? HTML <table width="100%" cellpadding="0" cellspacing="0" border="0" class="std ...

Attempting to arrange form input fields into groups of three columns

I am facing a challenge in arranging my input fields within the form in a column of 3. The issue is that I have more code than anticipated, making it difficult to achieve this layout. Despite several attempts, nothing seems to be working. I have spent hour ...

Diverging Width Values Between Chrome and Firefox with Jquery's .width() Method

Currently, I am implementing this JQuery script for my table. $(document).ready(function () { var tableBottom = $(window).height() - $('#compare-table').height(); $(window).scroll(function (event) { var y = $(this).scrollTo ...

Steps for arranging text in a dropdown list option

How can I format 3 words in a dropdownlist option so they are aligned properly? eg. <option value="1">ABCDE - ALPHA</option <option value="2">1234 - NUMERIC</option> <option value="3">ABC123 - ALPHANUMERIC</option> I woul ...

What could be causing the spinner (Bootstrap 5.x) to not show up on the screen

I'm having trouble getting a spinner to show up when a user clicks a form submit button. Below is the HTML code to add a <div> for the spinner: <div class="pageloader"> <img src="../images/loader-large.gif" alt ...

Combine several elements in a single jQuery scrollreveal function

I am currently working on a webpage that utilizes the jQuery library plugin scrollreveal to gradually reveal different html elements when the page loads. The functionality of the code is working correctly at the moment, but I have noticed that there is a d ...