How To Make Two Columns In HTML Responsiveness?

Question

At the moment I have one for the whole page, and one

for the header. In the header table there are two columns filled with two simple images. See below

Solution 1:

Use below media query to your CSS file. It will take your td to width 100% below 640 devices.

Note: I have mentioned two class in header table and logo td.

.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>

See jsfiddle for responsive -

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

Hope this helps :)

Solution 2:

I think you are missing Media Query. Setting the display to inline-block makes the div's align side by side to each other.

If you remove the inline-block on the td(s) :<td align="left" style="display: inline-block; padding: 5px;">. inside the second table and add a media query after giving it a css class:

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

This should work as expected. Note, you might need to add marigins/padding for space.

Solution 3:

Please do not use tables. Tables are not viable to be responsive and people now a days use div to actually make such containers possible.

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>

Html5 Pros

How To Make Two Columns In HTML Responsiveness?

Solution 1:

Solution 2:

Solution 3:

Post a Comment for "How To Make Two Columns In HTML Responsiveness?"