Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Navigation menu #2

Open
thomas-haslwanter opened this issue Aug 7, 2022 · 2 comments
Open

Navigation menu #2

thomas-haslwanter opened this issue Aug 7, 2022 · 2 comments

Comments

@thomas-haslwanter
Copy link

thomas-haslwanter commented Aug 7, 2022

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>

<title>Layout example</title>

Header

Left

abc

def

  • one
  • two
  • three

Right

abc

def

Footer
<script src="main.js"></script> ` one gets the attached result.

rwd_0402

@benfrain
Copy link
Owner

benfrain commented Aug 7, 2022

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
Copy link
Author

thomas-haslwanter commented Aug 11, 2022 via email

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants