Trying to get main nav and sub nav text to line up, tricky problem

HTML & CSS
1

on this test page http://phpby.me/testcss/

if you click “main link” the sub nav will pop up.

I’m trying to get the ‘M’ in ‘main link’ to line up vertically with the ‘S’ in “Sub nav x”, no matter how wide the viewport.

“main link” is 30% of viewport width. Where as “sub nav x” is 100% of the parent width. so I can’t apply the same amount of padding or text indent % because it’s a percentage of different widths.

1 idea I had was close… If I wrap the sub nav text in <span> and give that <span> a width of 30% ( and the text would overflow if need be ) to match the “main link” width I could apply the same, left padding for example. But “main link” is centered text, so it would only work if the main and sub nav text was the same font size and length, which probably won’t be the case.

Is it possible to make the text line up in this case?

2

The problem is that you are trying to maintain different things in different ways. The main nav text is centred but you are using percent for the subnav so they will never match up.

I’d probably cheat and do this instead.


nav a{text-align:left;text-indent:40%}
li.showSub > ul > li > a {text-indent:12%}

Then throw a media query in for the smaller viewport to reduce those numbers.

3

Thanks Paul!

How did you arrive at 40% and 12%?

4

I used flawed math :slight_smile:

Actually, I just used firebug and pressed the up arrow key on the percentage values until the layout matched.

It’s not a perfect solution but may be good enough.