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%;

}
}

<tablewidth="100%"cellspacing="0"cellpadding="0"border="0"style="background-color: #f3f3f3;"><tr><tdstyle="text-align: center; vertical-align: top;"><!-- HEADER --><tablealign="center"cellspacing="0"cellpadding="0"border="0"style="background-color: #ffffff; "class="header"><tr><!-- Logo --><tdalign="left"style="display: inline-block; padding: 5px;"class="logo"><ahref="#"><imgwidth="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 --><tdalign="right"style="display: inline-block; padding: 5px;"class="logo"><ahref="#"><imgwidth="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 World

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?"