Here when I increase the float left of #left class to beyond 58%, the ‘sidebar’ box goes down. While if i increase the float right of #right class to beyond 58%, the ‘sidebar’ again goes down. Why does the ‘content’ not go down?
It goes down because between the two widths and the padding, they exceeds 100% of the width and they can’t both fit on the same line.
The sidebar goes down because it is second of the inline elements. It writes the first one (the content) and then sees that there isn’t enough room to include the sidebar, so it puts it on the next line.
How HTML and CSS interact to format a page is a complex one with more than one way to skin a cat.
2 Likes
Hey there, thanks for your kind help. But can you please elaborate it a bit? It’d be helpful if you could kindly explain that width and padding interaction.
Adding padding makes it wider. If the window (just making up numbers here) is 200 px and your elements are 100px, fine, they can fix. If you add 1px around those elements, not they are too big to fit in the window, so one of them gets wrapped onto the next line. Whichever comes second in the order is going to get wrapped.
But just experiment for yourself. Mess with the padding and the widths and see what happens. You could also right click on one of the elements, open up the dev tools, and read the computer CSS values and see what is happening.
CSS layout is a complicated subject. There are a lot of the resources on the internet. I would advise not worrying about it too much at this point so you don’t get distracted.
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.