benfrain
commented
2 years ago Hi @thomas-haslwanter
The example was really only meant to give an illustration of the off-canvas pattern. However, if you want to stop the issue you are seeing, the simplest solution from that point would be adding vertical-align: top to the .Left and .Right selectors.
If you have read through the Chapter on Grid, you'll likely have a few other ideas of how you might approach this layout.
The chapter code and repo for the third edition is actually at: https://github.com/PacktPublishing/Responsive-Web-Design-with-HTML5-and-CSS-Third-Edition/issues (which should be linked up from the 3rd Edition website: https://rwd.education
Best, Ben
thomas-haslwanter
Hi Ben, since I don't know where else to post it, I send the comment here: In the 3rd ed of your book RWD, code example 04-02 does not work well in real life. By simply adding some content, the alignment of the elements gets quite messed up. Try for example, with the the following index.html ` <!doctype html>
Header
Left
abc
def
Right
abc
def
` one gets the attached result.