{"id":28254,"date":"2022-12-29T16:30:23","date_gmt":"2022-12-29T11:00:23","guid":{"rendered":"https:\/\/jassweb.com\/solved\/solved-div-css-layout-instead-of-tables-closed\/"},"modified":"2022-12-29T16:30:23","modified_gmt":"2022-12-29T11:00:23","slug":"solved-div-css-layout-instead-of-tables-closed","status":"publish","type":"post","link":"https:\/\/jassweb.com\/solved\/solved-div-css-layout-instead-of-tables-closed\/","title":{"rendered":"[Solved] DIV\/CSS Layout Instead of Tables [closed]"},"content":{"rendered":"

[ad_1]
\n<\/p>\n

\n
\n
<\/div>\n
\n
\n

You can try doing the below<\/p>\n

1)Remove the table
\n2)Replace your table columns<\/code> with div<\/code> and float<\/code> the divs<\/code>
\n3)clear<\/code> the floats<\/code> after the end<\/code> of the div<\/code>, so it does not screw your footer.<\/p>\n

HTML :<\/p>\n

<div class=\"content\">\n    <div class=\"column-1\">\n        <p><b>Welcome!<\/b><\/p>\n        <p>Lorem Ipsum is the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<\/p>    \n    <\/div>\n    <div class=\"column-2\">\n        <p><img src=\"https:\/\/stackoverflow.com\/questions\/20018606\/location.png\" alt=\"location\"><\/p>\n        <p><iframe src=\"\">....<\/iframe> <\/p>\n    <\/div>  \n  <div class=\"clr\"><\/div>      \n<\/div>\n<div class=\"clr\"><\/div>\n<div class=\"footer\"> Copyright  <\/div>\n<\/code><\/pre>\n
CSS:<\/p>\n
.column-1{\n     float:left;\n     width:60%; }\n.column-2{\n     float:right;\n     width:40%;}\n.clr{\n     clear:both;\n    }\n<\/code><\/pre>\n
You can refer the below link for clearing floats
\nClearing floats<\/a><\/p>\n<\/p><\/div>\n
<\/div>\n<\/div>\n
            5<\/span> <\/p><\/div>\n<\/div>\n
[ad_2]<\/p>\n
solved DIV\/CSS Layout Instead of Tables [closed] <\/p>\n","protected":false},"excerpt":{"rendered":"
[ad_1] You can try doing the below 1)Remove the table 2)Replace your table columns with div and float the divs 3)clear the floats after the end of the div, so it does not screw your footer. HTML : <div class=”content”> <div class=”column-1″> <p><b>Welcome!<\/b><\/p> <p>Lorem Ipsum is the 1960s with the release of Letraset sheets containing … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[320],"tags":[464,346],"class_list":["post-28254","post","type-post","status-publish","format-standard","hentry","category-solved","tag-css","tag-html"],"yoast_head":"\n[Solved] DIV\/CSS Layout Instead of Tables [closed] - JassWeb<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/jassweb.com\/solved\/solved-div-css-layout-instead-of-tables-closed\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"[Solved] DIV\/CSS Layout Instead of Tables [closed] - JassWeb\" \/>\n<meta property=\"og:description\" content=\"[ad_1] You can try doing the below 1)Remove the table 2)Replace your table columns with div and float the divs 3)clear the floats after the end of the div, so it does not screw your footer. HTML : <div class="content"> <div class="column-1"> <p><b>Welcome!<\/b><\/p> <p>Lorem Ipsum is the 1960s with the release of Letraset sheets containing ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jassweb.com\/solved\/solved-div-css-layout-instead-of-tables-closed\/\" \/>\n<meta property=\"og:site_name\" content=\"JassWeb\" \/>\n<meta property=\"article:published_time\" content=\"2022-12-29T11:00:23+00:00\" \/>\n<meta name=\"author\" content=\"Kirat\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kirat\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-div-css-layout-instead-of-tables-closed\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-div-css-layout-instead-of-tables-closed\/\"},\"author\":{\"name\":\"Kirat\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\"},\"headline\":\"[Solved] DIV\/CSS Layout Instead of Tables [closed]\",\"datePublished\":\"2022-12-29T11:00:23+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-div-css-layout-instead-of-tables-closed\/\"},\"wordCount\":57,\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"keywords\":[\"css\",\"html\"],\"articleSection\":[\"Solved\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-div-css-layout-instead-of-tables-closed\/\",\"url\":\"https:\/\/jassweb.com\/solved\/solved-div-css-layout-instead-of-tables-closed\/\",\"name\":\"[Solved] DIV\/CSS Layout Instead of Tables [closed] - JassWeb\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#website\"},\"datePublished\":\"2022-12-29T11:00:23+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-div-css-layout-instead-of-tables-closed\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/jassweb.com\/solved\/solved-div-css-layout-instead-of-tables-closed\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-div-css-layout-instead-of-tables-closed\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/jassweb.com\/solved\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"[Solved] DIV\/CSS Layout Instead of Tables [closed]\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/jassweb.com\/solved\/#website\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"name\":\"JassWeb\",\"description\":\"Build High-quality Websites\",\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/jassweb.com\/solved\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\",\"name\":\"Jass Web\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"contentUrl\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"width\":693,\"height\":132,\"caption\":\"Jass Web\"},\"image\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\",\"name\":\"Kirat\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775193939\",\"contentUrl\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775193939\",\"caption\":\"Kirat\"},\"sameAs\":[\"http:\/\/jassweb.com\"],\"url\":\"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"[Solved] DIV\/CSS Layout Instead of Tables [closed] - JassWeb","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/jassweb.com\/solved\/solved-div-css-layout-instead-of-tables-closed\/","og_locale":"en_US","og_type":"article","og_title":"[Solved] DIV\/CSS Layout Instead of Tables [closed] - JassWeb","og_description":"[ad_1] You can try doing the below 1)Remove the table 2)Replace your table columns with div and float the divs 3)clear the floats after the end of the div, so it does not screw your footer. HTML : <div class=\"content\"> <div class=\"column-1\"> <p><b>Welcome!<\/b><\/p> <p>Lorem Ipsum is the 1960s with the release of Letraset sheets containing ... Read more","og_url":"https:\/\/jassweb.com\/solved\/solved-div-css-layout-instead-of-tables-closed\/","og_site_name":"JassWeb","article_published_time":"2022-12-29T11:00:23+00:00","author":"Kirat","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Kirat","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/jassweb.com\/solved\/solved-div-css-layout-instead-of-tables-closed\/#article","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/solved-div-css-layout-instead-of-tables-closed\/"},"author":{"name":"Kirat","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31"},"headline":"[Solved] DIV\/CSS Layout Instead of Tables [closed]","datePublished":"2022-12-29T11:00:23+00:00","mainEntityOfPage":{"@id":"https:\/\/jassweb.com\/solved\/solved-div-css-layout-instead-of-tables-closed\/"},"wordCount":57,"publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"keywords":["css","html"],"articleSection":["Solved"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/jassweb.com\/solved\/solved-div-css-layout-instead-of-tables-closed\/","url":"https:\/\/jassweb.com\/solved\/solved-div-css-layout-instead-of-tables-closed\/","name":"[Solved] DIV\/CSS Layout Instead of Tables [closed] - JassWeb","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/#website"},"datePublished":"2022-12-29T11:00:23+00:00","breadcrumb":{"@id":"https:\/\/jassweb.com\/solved\/solved-div-css-layout-instead-of-tables-closed\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jassweb.com\/solved\/solved-div-css-layout-instead-of-tables-closed\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/jassweb.com\/solved\/solved-div-css-layout-instead-of-tables-closed\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jassweb.com\/solved\/"},{"@type":"ListItem","position":2,"name":"[Solved] DIV\/CSS Layout Instead of Tables [closed]"}]},{"@type":"WebSite","@id":"https:\/\/jassweb.com\/solved\/#website","url":"https:\/\/jassweb.com\/solved\/","name":"JassWeb","description":"Build High-quality Websites","publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/jassweb.com\/solved\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/jassweb.com\/solved\/#organization","name":"Jass Web","url":"https:\/\/jassweb.com\/solved\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/","url":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","contentUrl":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","width":693,"height":132,"caption":"Jass Web"},"image":{"@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31","name":"Kirat","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/","url":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775193939","contentUrl":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775193939","caption":"Kirat"},"sameAs":["http:\/\/jassweb.com"],"url":"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/"}]}},"_links":{"self":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/28254","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/comments?post=28254"}],"version-history":[{"count":0,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/28254\/revisions"}],"wp:attachment":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/media?parent=28254"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/categories?post=28254"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/tags?post=28254"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}