Fix my float! CSS horizontal menu question

Did I phrase my question badly?

I figured this would take one of you CSS gurus about 5 minutes to show me how!

I would ask on another Forum since it’s mainly a CSS question not WP, but, this is the only code forum I’m on where I know people understand some CSS and care about valid code, please point me to another CSS forum if that’s better

Try this:

#navwrapper
{
width: 100%;
margin: auto;
}

#navleft
{
width: 50%;
float: left;
}

#navright
{
text-align: right;
width: 50%;
float: right;
}

In the HTML document, you’d have

<div id="navwrapper">
<div id="navleft">(your left links)
</div>
<div id="navright">(your right links)
</div>
</div>

Thanks for the help. It’s not quite working how I want (the navright is flush-right but still appearing 1 line down from the navleft, not directly beside it) but this gave me enough to work with.

You might play around with the widths and see if that helps — especially if you’ve added borders, margins, or padding. Also, if you temporarily assign a background color to each div, you can see if they are overlapping or not.

Try adding
display: block;
to the #navwrapper

Just out of curiosity — isn’t the #navwrapper automatically going to display as block since it’s a div?

It won’t display as a block element if it’s a list. I’m assuming that, since it’s navigation, it’s a list.

And CodingForums is a good board to hop on that cares about valid code and knows about CSS.

I think a link to your page that’s not working correctly would help generate a response here.

Ah that makes sense. I didn’t use a list when I was testing out the solution I offered.

Thanks for the input. I’m just really new at CSS and I’m not sure about some of the basics. When I was attempting to insert the above code, I think I was messing up the nesting order. Basically I ended up having a few close-div’s in a row, and things got jumbled in my header.

So the way I have it now, I’m using the div id=”navright” but I’m not even using the “navleft”, cuz when I tried to put it in there it messed up.

I already had #navmenu wrapping around it all, and it redefines ul and li to display:inline, so I was trying to combine that with the #navwrapper idea from Marcy above.

Where would be a good place to learn the very-basics of CSS, like how to do nesting, and how to write the { } stuff properly (cuz it’s done in different ways in examples I have been given)? Also I need to learn how classes work, cuz some of my CSS starts with # and some of it starts with a period.

By the way I’ve just been editing my CSS inside WordPress Theme Editor, cuz I’m not sure what I should do it with otherwise. I have access to Dreamweaver & FF with “DOM Inspector” but no idea how to integrate them in the workflow.

If anyone can give me more hints – thank you

A good place to start:
https://www.w3schools.com/css/default.asp
but I am sure there are many others, too.
Good resources – CSS.

# = id
. = class

If you’ve got $25 to spare you cannot do better than lvsonline classes, https://lvsonline.com/. These are instructor-led and quite excellent. The self-study courses are good too, but some of us (me for instance!) need the instructor input in order to JUST DO IT….

Here’s something I slapped together. This works as you describe in the original request for help on Mac OS X, Netscape 7.2, Opera 1.3.2:
https://www.toddseal.com/tests/navfloat.phtml

Another site, particularly for floats and a site I visit all the dang time, is Floatutorial:
https://css.maxdesign.com.au/floatutorial/index.htm