{"id":28787,"date":"2023-01-03T00:57:05","date_gmt":"2023-01-02T19:27:05","guid":{"rendered":"https:\/\/jassweb.com\/solved\/solved-positioning-section-and-div-closed\/"},"modified":"2023-01-03T00:57:05","modified_gmt":"2023-01-02T19:27:05","slug":"solved-positioning-section-and-div-closed","status":"publish","type":"post","link":"https:\/\/jassweb.com\/solved\/solved-positioning-section-and-div-closed\/","title":{"rendered":"[Solved] positioning section and div [closed]"},"content":{"rendered":"

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

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

You can simply use two div<\/code> elements to divide your page to 70% and 30%. I have edited a bit of your CSS<\/strong> and it works:<\/p>\n

CSS:<\/strong><\/p>\n

.sec\n{\nwidth:70%;\nfloat:left;\nbackground-color: red;  \nmargin-bottom: 3em;\n}\n.side\n{\nwidth:30%;\nfloat:left;\nbackground-color:Green;\n}\n<\/code><\/pre>\n
HTML:<\/strong><\/p>\n
<div id=\"wrapper\">\n\/\/your rest of HTML\n\n<div class=\"sec\">\n                            <h1>Last news<\/h1>\n                            <article>\n                                    <h1>News #1<\/h1>\n                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id velit deleniti ducimus, dolor architecto animi blanditiis laudantium quia fuga obcaecati, quibusdam maxime temporibus nihil porro, magnam doloribus explicabo, provident nesciunt! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla placeat odit eaque porro sint laudantium ad ipsam quisquam numquam error dolor, laboriosam saepe aperiam, rerum libero ullam fugit quidem, ab.<\/p>\n                            <\/article>\n                            <footer>\n                                    <ul>\n                                            <li>Author: admin<\/li>\n                                            <li>date: 31.12.2003<\/li>\n                                    <\/ul>\n                            <\/footer> <!-- date and author #1 -->\n                            <!-- news1 -->\n\n                            <article>\n                                    <h1>News #2<\/h1>\n                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id velit deleniti ducimus, dolor architecto animi blanditiis laudantium quia fuga obcaecati, quibusdam maxime temporibus nihil porro, magnam doloribus explicabo, provident nesciunt! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla placeat odit eaque porro sint laudantium ad ipsam quisquam numquam error dolor, laboriosam saepe aperiam, rerum libero ullam fugit quidem, ab.<\/p>\n                            <\/article>\n                            <footer>\n                                    <ul>\n                                            <li>Author: admin<\/li>\n                                            <li>date: 31.12.2003<\/li>\n                                    <\/ul>\n                            <\/footer>  <!-- date and author #2 -->\n                            <!-- news2 -->\n\n                            <article>\n                                    <h1>News #3<\/h1>\n                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id velit deleniti ducimus, dolor architecto animi blanditiis laudantium quia fuga obcaecati, quibusdam maxime temporibus nihil porro, magnam doloribus explicabo, provident nesciunt! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla placeat odit eaque porro sint laudantium ad ipsam quisquam numquam error dolor, laboriosam saepe aperiam, rerum libero ullam fugit quidem, ab.<\/p>\n                            <\/article>\n                            <footer>\n                                    <ul>\n                                            <li>Author: admin<\/li>\n                                            <li>date: 31.12.2003<\/li>\n                                    <\/ul>\n                            <\/footer>  <!-- date and author #3 -->\n                            <!-- news3 -->\n\n                    <\/div>\n                    <div class=\"side\">\n                            <h2>Most popular articles<\/h2>\n                            <ul>\n                                    <li>Example article #1<\/li>\n                                    <li>Example article #2<\/li>\n                                    <li>Example article #3<\/li>\n                                    <li>Example article #4<\/li>\n                                    <li>Example article #5<\/li>\n                                    <li>Example article #6<\/li>\n                                    <li>Example article #7<\/li>\n                                    <li>Example article #8<\/li>\n                                    <li>Example article #9<\/li>\n                                    <li>Example article #10<\/li>\n                            <\/ul>\n                    <\/div>\n\/\/your footer code here...\n<\/div>\n<\/code><\/pre>\n
DEMO<\/a><\/p>\n<\/p><\/div>\n
<\/div>\n<\/div>\n
            <\/span> <\/p><\/div>\n<\/div>\n
[ad_2]<\/p>\n
solved positioning section and div [closed] <\/p>\n","protected":false},"excerpt":{"rendered":"
[ad_1] You can simply use two div elements to divide your page to 70% and 30%. I have edited a bit of your CSS and it works: CSS: .sec { width:70%; float:left; background-color: red; margin-bottom: 3em; } .side { width:30%; float:left; background-color:Green; } HTML: <div id=”wrapper”> \/\/your rest of HTML <div class=”sec”> <h1>Last news<\/h1> <article> … 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-28787","post","type-post","status-publish","format-standard","hentry","category-solved","tag-css","tag-html"],"yoast_head":"\n[Solved] positioning section and div [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-positioning-section-and-div-closed\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"[Solved] positioning section and div [closed] - JassWeb\" \/>\n<meta property=\"og:description\" content=\"[ad_1] You can simply use two div elements to divide your page to 70% and 30%. I have edited a bit of your CSS and it works: CSS: .sec { width:70%; float:left; background-color: red; margin-bottom: 3em; } .side { width:30%; float:left; background-color:Green; } HTML: <div id="wrapper"> \/\/your rest of HTML <div class="sec"> <h1>Last news<\/h1> <article> ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jassweb.com\/solved\/solved-positioning-section-and-div-closed\/\" \/>\n<meta property=\"og:site_name\" content=\"JassWeb\" \/>\n<meta property=\"article:published_time\" content=\"2023-01-02T19:27:05+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=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-positioning-section-and-div-closed\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-positioning-section-and-div-closed\/\"},\"author\":{\"name\":\"Kirat\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\"},\"headline\":\"[Solved] positioning section and div [closed]\",\"datePublished\":\"2023-01-02T19:27:05+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-positioning-section-and-div-closed\/\"},\"wordCount\":40,\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"keywords\":[\"css\",\"html\"],\"articleSection\":[\"Solved\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-positioning-section-and-div-closed\/\",\"url\":\"https:\/\/jassweb.com\/solved\/solved-positioning-section-and-div-closed\/\",\"name\":\"[Solved] positioning section and div [closed] - JassWeb\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#website\"},\"datePublished\":\"2023-01-02T19:27:05+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-positioning-section-and-div-closed\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/jassweb.com\/solved\/solved-positioning-section-and-div-closed\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-positioning-section-and-div-closed\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/jassweb.com\/solved\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"[Solved] positioning section and div [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=1775798750\",\"contentUrl\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775798750\",\"caption\":\"Kirat\"},\"sameAs\":[\"http:\/\/jassweb.com\"],\"url\":\"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"[Solved] positioning section and div [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-positioning-section-and-div-closed\/","og_locale":"en_US","og_type":"article","og_title":"[Solved] positioning section and div [closed] - JassWeb","og_description":"[ad_1] You can simply use two div elements to divide your page to 70% and 30%. I have edited a bit of your CSS and it works: CSS: .sec { width:70%; float:left; background-color: red; margin-bottom: 3em; } .side { width:30%; float:left; background-color:Green; } HTML: <div id=\"wrapper\"> \/\/your rest of HTML <div class=\"sec\"> <h1>Last news<\/h1> <article> ... Read more","og_url":"https:\/\/jassweb.com\/solved\/solved-positioning-section-and-div-closed\/","og_site_name":"JassWeb","article_published_time":"2023-01-02T19:27:05+00:00","author":"Kirat","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Kirat","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/jassweb.com\/solved\/solved-positioning-section-and-div-closed\/#article","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/solved-positioning-section-and-div-closed\/"},"author":{"name":"Kirat","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31"},"headline":"[Solved] positioning section and div [closed]","datePublished":"2023-01-02T19:27:05+00:00","mainEntityOfPage":{"@id":"https:\/\/jassweb.com\/solved\/solved-positioning-section-and-div-closed\/"},"wordCount":40,"publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"keywords":["css","html"],"articleSection":["Solved"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/jassweb.com\/solved\/solved-positioning-section-and-div-closed\/","url":"https:\/\/jassweb.com\/solved\/solved-positioning-section-and-div-closed\/","name":"[Solved] positioning section and div [closed] - JassWeb","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/#website"},"datePublished":"2023-01-02T19:27:05+00:00","breadcrumb":{"@id":"https:\/\/jassweb.com\/solved\/solved-positioning-section-and-div-closed\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jassweb.com\/solved\/solved-positioning-section-and-div-closed\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/jassweb.com\/solved\/solved-positioning-section-and-div-closed\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jassweb.com\/solved\/"},{"@type":"ListItem","position":2,"name":"[Solved] positioning section and div [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=1775798750","contentUrl":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775798750","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\/28787","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=28787"}],"version-history":[{"count":0,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/28787\/revisions"}],"wp:attachment":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/media?parent=28787"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/categories?post=28787"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/tags?post=28787"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}