HTML header

Question

I want to put an image on the left, a header in the middle and a vertical nav bar on the right of my header. Does anybody have any suggestions what CSS I should look at to achieve this? I'm currently using display:inline but the spacing looks very unorganised.
Thanks 👍

Answer 1

You could try "display: inline-block;" instead, but I think "float: left;" for the image and "float: right;" for the nav bar should get you pretty far. CSS grid is relatively new (powerful, but young) so I generally prefer to implement with an eye for maximizing backwards-compatibility.

Floats are tricky though, so be patient with it and read about its various caveats at

https://www.w3schools.com/css/css_float.asp

and

https://css-tricks.com/all-about-floats/

If you have any additional questions, please don't hesitate to reach out!

Answer 2

Thank you both for your input. I'll give them a look and let you know how I get on 😁

Answer 3

For displaying elements in HTML like that, I would recommend looking into the CSS grid as it allows for you to move elements across your entire screen while keeping them evenly spaced out.

I created a small little template that works with CSS grid, if you want to check it out:
https://code.sololearn.com/Wgt43Ka56THc/?ref=app