侧边栏的背景颜色，HTML,CSS

Question

I would like to ask you something that has been bothering me for a while. I currently learn HTML and CSS and we got this homework where we have to create a blog that has one article in the middle and two sidebars on the right, the background color of the site should be gray. the problem is that the main article and the two sidebars should have a white background color, so when I change the article's background color to white, it automatically takes control over 75% of the website, even outside the article. here is a screenshot.

What I am trying to make https://f.v1.n0.cdn.getcloudapp.com/items/0k300n0O0J0c1l1B3K2J/blog-1.png

What I get when I change the background color of the sidebars to white https://ctrlv.sk/WF4e

 .main-image { height: 260px; width: 670px; }.main { text-align: center; padding: 40px; margin-top: -10px; }.main2 { background-color: white; } body { background-color: rgb(243, 243, 243) }.line { margin-top: 50px; } hr { margin-top: -20px; }.back { background-color: white; }.box-post { background: white; margin-left: 70px; }.sideimage { float: right; margin-top: -340px; width: 350px; margin-right: 100px; display: block; }.sidetext { text-align: right; margin-top: -180px; margin-right: 160px; }

 <title>Blog</title> <link rel="stylesheet" href="styles.css"> <header> <div class="main2"> <h1 class="main"> <strong>Dopetrope</strong> </h1> </div> <hr> </header> <section id="main"> <article class="box-post"> <img class="main-image" src="pic01.jpg" alt="obrazocek"> <header> <h1>Right sidebar</h1> <h3>Lorem ipsum dolor sit amet feugiat</h3> <div> </div></header> <p> </p><section class="box"> <img class="sideimage" src="pic09.jpg"> <h1 class="sidetext2">Sed etiam lorem nulla</h1> <p class="sidetext"> Lorem ipsum dolor sit amet sit veroeros <br> sed amet blandit consequat veroeros <br> lorem blandit adipiscing et feugiat <br> phasellus tempus dolore ipsum lorem <br> dolore. </p> </section> <p> Vestibulum scelerisque ultricies libero id hendrerit. Vivamus malesuada quam faucibus ante <br> dignissim auctor hendrerit libero placerat. Nulla facilisi. Proin aliquam felis non arcu molestie at <br> accumsan turpis commodo. Proin elementum, nibh non egestas sodales, augue quam aliquet est, <br> id egestas diam justo adipiscing ante. Pellentesque tempus nulla non urna eleifend ut ultrices nisi <br> faucibus. <br><br><br> Praesent a dolor leo. Duis in felis in tortor lobortis volutpat et pretium tellus. Vestibulum ac ante <br> nisl, a elementum odio. Duis semper risus et lectus commodo fringilla. Maecenas sagittis convallis <br> justo vel mattis. placerat, nunc diam iaculis massa, et aliquet nibh leo non nisl vitae porta lobortis, <br> enim neque fringilla nunc, eget faucibus lacus sem quis nunc suspendisse, nec lectus sit amet <br> augue rutrum vulputate ut ut mi. Aenean elementum, mi sit amet portittor lorem ipsum dolor sit <br> amet, consecteur adipiscing elit. Lorem ipsum dolor sir amet nullam consequat feugiat dolore <br> tempus. </p> </article> </section>

Any idea on how to change this? I hope you understand what I am trying to acheive here. Also please don't mind the code too much if it's wrong, I am still pretty new to this stuff:D

Answer 1

I think you may need to change your layout, by using one DIV on the left, and two DIVs on the right, as follows

 .main { text-align: center; padding: 40px; margin-top: -10px; border-bottom:1px solid #DDDDDD; }.main2 { background-color: white; } body { background-color: rgb(243, 243, 243); margin:0; }.container { width:100%; padding:20px; }.leftbox { width:68%; float:left; background:#FFFFFF; }.image1 { padding:0px; background-image:url("https://i.stack.imgur.com/nhPHk.jpg"); height:160px;" }.image2 { padding:0px; background-image:url("https://i.stack.imgur.com/Vqklg.jpg"); height:50px; }.leftboxcontent { padding:20px; }.middlespace { width:3%; float:left; }.rightbox { width:25%; float:left; }.rightboxcontent1 { background-color:#FFFFFF; width:100%; }.rightboxcontent1a { padding:20px; }.rightboxcontent2 { background-color:#FFFFFF; width:100%; }.rightboxcontent2a { padding:20px; }

 <title>Blog</title> <body> <div class="main2"> <h1 class="main"> <strong>Dopetrope</strong> </h1> </div> <div class=container> <div class=leftbox> <div class=image1>&nbsp;</div> <div class=leftboxcontent> <h1>Right sidebar</h1> <h3>Lorem ipsum dolor sit amet feugiat</h3> <h4>Lorem ipsum dolor sit amet feugiat</h4> <h4>Lorem ipsum dolor sit amet feugiat</h4> <h4>Lorem ipsum dolor sit amet feugiat</h4> <h4>Lorem ipsum dolor sit amet feugiat</h4> <h4>Lorem ipsum dolor sit amet feugiat</h4> <h4>Lorem ipsum dolor sit amet feugiat</h4> <h4>Lorem ipsum dolor sit amet feugiat</h4> <h4>Lorem ipsum dolor sit amet feugiat</h4> </div> <div>&nbsp;</div> </div> <div class=middlespace>&nbsp;</div> <div class=rightbox> <div> <div class=image2>&nbsp;</div> <div class=rightboxcontent1> <div class=rightboxcontent1a> TESTTEST<BR>TESTTEST<BR> TESTTEST<BR>TESTTEST<BR> TESTTEST<BR>TESTTEST<BR> TESTTEST<BR>TESTTEST<BR> TESTTEST<BR>TESTTEST<BR> TESTTEST<BR>TESTTEST<BR> </div> </div> </div> <br><br> <div> <div class=rightboxcontent2> <div class=rightboxcontent2a> TESTTEST2<BR>TESTTEST2<BR> TESTTEST2<BR>TESTTEST2<BR> </div> </div> </div> </div> </div> </body>

Answer 2

It is good practise to start with a strong structure before filling it with content. If you have a good structure, then you have less debugging. Something like the template below.

Tip. The display:flex is more flexible then the float:left

 * { margin: 0; box-sizing: border-box; } #header { width: 100%; } #main { float: left; width: 70%; } #aside { float: left; width: 30%; } #footer { clear: both; width: 100%; } /* for test purpose only */.test { height: 80px; border: 1px solid orange; }

 <header id="header" class="test"> </header> <section id="main" class="test"> <article> </article> </section> <aside id="aside" class="test"> </aside> <footer id="footer" class="test"> </footer>