Basic CSS object alignment on the both sides

It’s something extremely basic, yet, I don’t know how. I’ve tried position: relative; and position: absolute, I’ve tried float, I could try display: flex; but the site needs to compatible with stuff like IE8 and IE9.

Could someone lean me hand on it? I need the <nav> on the right side, in the darker box. Instead it renders “outside”. But I do seek most compatible one.

How are you expecting the menu to appear, vertically, or as a horizontal line? One issue you may be having though, is that the <menu> tag is experimental according to MDN, and has very limited browser support.

Horizontally. The red block on the left (it will be replaced with logo), the <nav> item on the right, and links within horizontally.

1 Like

Hi there Webkitnote,

does this help…

[code]

untitled document * { margin: 0; } body { background-color: #eee; } #maincontainer { width: 90%; margin: 1em auto; background-color: rgba(0,0,0,0.5); } menu { padding: 0.625em 0.625em 0; background-color: rgba(0,0,0,0.1); overflow:hidden; } #logo { float: left; width: 100%; max-width: 15.625em; height: 3.25em; margin:0 1.25em 0.625em 0; background-color: #f00; } nav { float: right; width:100%; max-width: 15.625em; background-color: #fff; margin:0 0 0.625em 1.25em ; } nav a { display:inline-block; padding:0.5em; margin:0 0.2em; }
ABC DEF GHI JKL
[/code]

coothead

3 Likes

o_O
I’m reading your code and stripping it, but I still can’t find what makes your code work, and not mine.

Can someone tell me why code written by me fails. And his is correct?

Yes, it is the solution, but I also need to learn to avoid this mistake in future. Could someone explain this? I really can’t see it. I tried float it didn’t work for me, but it did for him.

You set the logo to display:inline-block buit as the next element (nav) is a block element then nav starts on the next line therefore your inline-block was irrelevant. If you had also set nav also to display:inline-block then both would be on the same line although both would be aligned left.

Coothead floated the logo left and the nav to the right thus both are on the same line. The parent was set to overflow:hidden to contain the floated children (overflow othr than auto creates a new block formatting context and in this context contains floats automatically).

Floats must come before the static content you want to wrap so you could have floated the logo to the left and set nav to text-align:right instead (now width and no float needed). There are many ways to do this in css :smile:

4 Likes

I’m still a little leary of using that <menu> tag, and would prefer to see the much better supported <header> tag used here; your choice either way though. I threw a Codepen together taking this approach.

I also ran it through their built in linter. It’s still complaining a little about the use of ID’s, and the lack of a back-up for RGBA colours, though I did set the various properties in alphabetical order like it suggested. Lastly, I ordered the CSS rules from lowest to highest specificity.

1 Like

I’m still a little leary of using that <menu> tag, and would prefer to see the much better supported <header>
Wait, there’s a tag called <header>? :smiley:

It’s still complaining a little about the use of ID’s
Why? There are no collisions.

and the lack of a back-up for RGBA colours
Yea, this is pretty early stage. Let me finish making it first, then I’ll upgrade the 8 rules :stuck_out_tongue:

though I did set the various properties in alphabetical order like it suggested. Lastly, I ordered the CSS rules from lowest to highest specificity.
Why is that? Would that help someone? Does this speed things up? Does it help in maintenance?

There’s one called <menu>?
I had not heard of that one until I saw this thread. But I don’t think it’s time yet.
The <header> tag has been around a while and is better supported.

1 Like

There is indeed.

As I understand things, the recommendation is to steer clear of ID’s as far as possible and use classes for preference. I’m a bit hazy on why, but think it’s because the idea is not to let your code get to specific too fast. Certainly the linter suggests keeping away from them and points you at this search “Don’t user ID’s in selectors” - I’ve yet to read it up on it myself.

Of course

It helps avoid stepping on your own CSS toes, by setting a rule, then overriding it later. The easiest explanation, I’ve seen to make sense of it is a video of a talk Harry Roberts did on ITCSS (Inverted Triangle CSS)

This is why I use nesting… which you’ve deleted.

The CSS I used came from Coothead’s code above - I don’t believe I’ve changed that, other than the re-ordering. Though there wasn’t a great deal of nesting in your version, you should be careful of going too far, as it can become prone to breaking if you should re-structure your HTML at some point down the line.

Edit: Here’s a link from CSSlint on the advice they dispense - http://csslint.net/about.html

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.