ZestSync

I imagine I'm just being stupid, but I'm really confused why the SVG images in my code are not floating to the left/right - as if they have some built in padding.

Could anyone help me to fix this and explain why this happens please?

I've uploaded some code here: https://jsfiddle.net/a328gf3y/7/

header #branding{ float:left; } header nav{ float: right; } 

Thanks

1 Answer

Ok, there's 2 things happening here, one is to do with SVG sizing the other is to do with floats and text aligning.

It looks like you want the branding to be flush with the left side of the page. The reason this is being pushed away is kinda related to (as you put it) built in padding. SVGs have an attribute called viewBox this defines it's aspect ratio and how it can be scaled.

The viewbox values of the branding SVG are viewBox="0 0 362.3 66.91", but in the HTML you set the width and height to height="57px" width="476px" the aspect ratios of these sizes don't match - so the browser does a best fit and adds padding inside the SVG element. A simple solution is to set the width and height in the HTML to height="67px" width="363px".

So that's thing 1, thing 2 is about floats.

It looks like you want to the nav elements to be aligned to the right, so you set float: right in the nav element. The browser dutifully floated the nav element to the right, however the elements inside still have a default text alignment of left. The quick solution to this is to set text-align: right to header nav

I've made some changes to your fiddle here, I hope that helps 👍🏻

If you want to deep dive into the SVG viewBox and coordinate system - Sara Soueidan has a great post about it ✌🏻

ncG1vNJzZmirpJawrLvVnqmfpJ%2Bse6S7zGiorp2jqbawutJoa3JrZG1%2FcXyOrK2gZZmirqixjKKqZqafqXqnuM6aq6Kml2LBsHnLnp2tZZmjeqnAzKVknKeUmg%3D%3D