In this code why the sidebar is not coming besides the main content?

Question

https://code.sololearn.com/WpoeYnXZEOHO/?ref=app

Answer 1

Knowledge Pedia
Wrap the two floating div elements within their own <main/> element like so:
----
<div id="container">
<div id="header"/>
<main>
<div id="knowledgepedia" />
<div id="sidebar" />
</main>
<div id="footer"/>
</div>
----
This can be any block element you want to use. I'm just using <main/>.

----
Then, update your CSS to reflect the following:

On Line 5: Add `main,` above `#container`:
----
main,
#container{
...
}
----

On Lines 20 and 22: Make the following edits:
----
#knowledgepedia {
...
width: 550px;
...
float: right;
}
----

That should get things working with little changes.

https://code.sololearn.com/W3NlFCFKiSPt/?ref=app

Answer 2

anyway, 'float' css property is not the better way to achieve that goal nowadays... I advise you to learn modern flex and/or grid, wich are more... flexible ^^ to do advanced layout ;)

Answer 3

Knowledge Pedia
Also, I would use HTML5 semantic elements rather than the <div> with id attributes as shown below:
----
<section>
<header />
<main>
<article />
<aside />
</main>
<footer />
</section>
----

You'll want to update your CSS so these elements replace the original #id-names { ... }.

This doesn't necessarily change how it renders, but it will clean up the markup.

Hopefully, this makes sense.

Answer 4

visph Indeed... There are better ways to control the layout than using float. 😉👌

I'm assuming the OP is still learning how everything works and it's still important to have a firm understanding of how float works in case there's a need to take the element out of the normal flow.

This is good exercise to practice on and probably a concept many people skip and never get a firm understanding of.

Heck... I get the sense that a significant number of developers don't move beyond the basics of CSS, which is unfortunate as it's a powerful skill that isn't difficult to master.

So... I encourage the OP to learn using floats before moving on to flexbox and grid.

Answer 5

In your css style sheet you used float:left for #knowledgepedia and after that you gave float : left to #sidebar. Change float:left to be float:right in #knowledgepedia .
//Here is your correct code//
#knowledgepedia {
background: darkorange;
color: black;
width: 600px;
padding: 10px;
float: right;
}
And one advise is use hex color code instead of name it is more browser freindly.
Good luck

Answer 6

David Carroll can you please explain the reason also why mine earlier code was not working?
Also I am watching a course which is s year or 2 year older could it be a reason that code isn't working as there are some updates on html or CSS?

And thanks for your answer it worked👍👍

Answer 7

David Carroll I can't tell you that you wrong, but initially 'float' isn't designed for that kind of purpose, but rather to let text wrap around elements... it was kind of a hack to do layout with it, as was the use of <table> element in past time before html5 was introduced (even 'display' property with 'table' family values are from more to more useless) and becomes mature...

also, I think that 'float' is overused by new comers, often uselessly removing elements from flow (as positionning is miss/overused too) ^^

If time would be invested to learn css, flex and grid give a lot to do in addition to other modern css properties / selectors to learn, and I think 'float' is not as important and could be studied when required ;P

anyway, everyone is free to follow the path they want in the big css forest ;)

Answer 8

visph You make some compelling points and offer some fresh perspectives regarding recent learners, which I'm personally unable to relate to anymore.

I've been working with CSS since the earliest days and lived through that nightmare when browsers were inconsistent and the war between W3C and WhatWG caused much pain for the web development community.

It took years for the remnants of old browsers in the enterprise space to eventually phase out so we could begin utilizing flexbox without incompatibility concerns.

Having built several micro sized mobile first responsive web design frameworks from scratch, it was always painful having to cater to the lowest common denominator as recently as a few years ago.

Things are much better now. While most learners are overwhelmed trying to jam all this information in at once, I've had about 25 years to develop an intuition for how it all works as it was all evolving.

So... thanks for helping me appreciate how this might be for the new generation of developers. 😉

Answer 9

David Carroll :D I'm not really of new generation of developers: I'm also using web development since the early days, but not as professional... so I also growing myself with web evolution, even if always only as amateur, and not always at full time ^^

I good know as you the pain to find "the lowest common denominator", even if I certainly get less deeper than you in that way (I often choosed to develop for only my own devices/browsers), but my curiosity helped me to try the most possible to do cross browser compatible codes ;P

Just to say, I had started my programing path before web started to emerge in the middle-end of the 90's: my first computer experience was with a TRS-80, my first own an Amstrad CPC, and I've keeped from that time a high taste for developing from scratch rather than using ready-made / easiest solutions wich you doesn't have as many control than with your own tools (and less satisfaction to have build something all by yourself) ;)