A simple problem, although apparently not a simple solution.
Example here: http://myhideout.eu/new/
Basically, the site consists of two columns, although without wrappers or something like that, since I would very much like to do this as little as possible, partly for the sake of simplicity, but also use HTML5 semantics, which, in my opinion, do not include divs , regardless of how they should be named accordingly.
However, I would like the sidebar to fill the entire height of the adjacent column, which is not as simple as I thought at first. I know this is an old problem, but I was sure that I solved it earlier.
Anyway, I tried to figure out how to do this without using wrappers or JavaScript. JavaScript is not a race, but a different story. I was sure that there would be some kind of smart CSS3 function or something similar that would solve my problem without the need for a wrapper, but my search for this function very much required the rejection of epic proportions.
So, I said to myself: “Damn it! Oh, well, you just need to use a wrapper then.”
I was sure it would work. I tried different configurations, but no matter what I did, I could not get it to work without setting the absolute height of the surrounding wrapper. Imagine my disappointment, having failed again, when I was sure that I had done it before. So again I was looking for a solution that fits my needs. Although much more material appeared this time, it was a failure. A few solutions that I found were at least questionable.
So now I'm here again, asking another one of those questions that undoubtedly asked four times as many. I'm sorry about that, but I really don't know where else to go.
Hope you can help.
Thanks in advance and best regards.
edit:
This works exactly the same as me:
<!DOCTYPE html> <html> <head> <style type="text/css"> body { margin: 0 auto; width: 800px; } #wrapper { position: relative; width: 800px; } body > header, body > footer { background-color: red; width: 800px; } #wrapper > article { margin-right: 200px; width: 600px; background-color: blue; } #wrapper > aside { position: absolute; top: 0; bottom: 0; right: 0; width: 200px; background-color: green; } </style> </head> <body> <header>This is a header</header> <div id="wrapper"> <article> This is the content<br /><br /><br /><br />left<br /><br /><br /><br />left </article> <aside> And this is the sidebar! I dynamically make myself bigger based on the content on the left! </aside> </div> <footer>This is a footer</footer> </body> </html>
All that remains is to get rid of this damn div tag;)
edit: the display properties of the css table were indicated to me, and it really looks like what I'm looking for as an intelligent solution, but with several elements on one line and only one on the other, I can’t understand how it should be done.