Title: Fix my float! CSS horizontal menu question Last modified: August 18, 2016 --- # Fix my float! CSS horizontal menu question * [Dgold](https://wordpress.org/support/users/dgold/) * (@dgold) * [20 years, 3 months ago](https://wordpress.org/support/topic/fix-my-float-css-horizontal-menu-question/) * Hello, help please, I don’t know CSS, just mucking around in there. I followed The Codex and made a horizontal menu which I like, I learned my first bits of CSS from this. * Menu looks like this in my header: Home | Lyrics | Instrumentals | Covers ANOTHER LINE: Site Admin | Logout * I want menu to look like this: [FLUSH LEFT: Home | Etc | Etc][FLUSH RIGHT: Site Admin | Etc] * In other words I want the 2 areas of my horizontal menu on the same line, with 4 of the menu options left-justified, then some blank space, then 2 menu options right-justified. All on one line. * I learned that I might need Floats for this, but don’t have time to learn all about floats right now. Can someone do me a huge favor and just write the CSS for me, please? * Here is my CSS file, sorry it is based on Kubrick, I am a novice, [http://pastebin.com/567307](http://pastebin.com/567307) Viewing 12 replies - 1 through 12 (of 12 total) * Thread Starter [Dgold](https://wordpress.org/support/users/dgold/) * (@dgold) * [20 years, 3 months ago](https://wordpress.org/support/topic/fix-my-float-css-horizontal-menu-question/#post-342868) * 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 * [marcy](https://wordpress.org/support/users/marcy/) * (@marcy) * [20 years, 3 months ago](https://wordpress.org/support/topic/fix-my-float-css-horizontal-menu-question/#post-342870) * 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 * ` * Thread Starter [Dgold](https://wordpress.org/support/users/dgold/) * (@dgold) * [20 years, 3 months ago](https://wordpress.org/support/topic/fix-my-float-css-horizontal-menu-question/#post-342895) * 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. * [marcy](https://wordpress.org/support/users/marcy/) * (@marcy) * [20 years, 3 months ago](https://wordpress.org/support/topic/fix-my-float-css-horizontal-menu-question/#post-342899) * 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. * [moshu](https://wordpress.org/support/users/moshu/) * (@moshu) * [20 years, 3 months ago](https://wordpress.org/support/topic/fix-my-float-css-horizontal-menu-question/#post-342900) * Try adding `display: block;` to the #navwrapper * [marcy](https://wordpress.org/support/users/marcy/) * (@marcy) * [20 years, 3 months ago](https://wordpress.org/support/topic/fix-my-float-css-horizontal-menu-question/#post-342903) * Just out of curiosity — isn’t the #navwrapper automatically going to display as block since it’s a div? * [tsguitar](https://wordpress.org/support/users/tsguitar/) * (@tsguitar) * [20 years, 3 months ago](https://wordpress.org/support/topic/fix-my-float-css-horizontal-menu-question/#post-342904) * 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](http://www.codingforums.com/) 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. * [marcy](https://wordpress.org/support/users/marcy/) * (@marcy) * [20 years, 3 months ago](https://wordpress.org/support/topic/fix-my-float-css-horizontal-menu-question/#post-342905) * Ah that makes sense. I didn’t use a list when I was testing out the solution I offered. * Thread Starter [Dgold](https://wordpress.org/support/users/dgold/) * (@dgold) * [20 years, 3 months ago](https://wordpress.org/support/topic/fix-my-float-css-horizontal-menu-question/#post-342907) * 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 * [moshu](https://wordpress.org/support/users/moshu/) * (@moshu) * [20 years, 3 months ago](https://wordpress.org/support/topic/fix-my-float-css-horizontal-menu-question/#post-342908) * A good place to start: [http://www.w3schools.com/css/default.asp](http://www.w3schools.com/css/default.asp) but I am sure there are many others, too. Good resources – [CSS](http://codex.wordpress.org/CSS). * # = id . = class * [vkaryl](https://wordpress.org/support/users/vkaryl/) * (@vkaryl) * [20 years, 3 months ago](https://wordpress.org/support/topic/fix-my-float-css-horizontal-menu-question/#post-342909) * If you’ve got $25 to spare you cannot do better than lvsonline classes, [http://lvsonline.com/](http://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…. * [tsguitar](https://wordpress.org/support/users/tsguitar/) * (@tsguitar) * [20 years, 3 months ago](https://wordpress.org/support/topic/fix-my-float-css-horizontal-menu-question/#post-342912) * 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: [http://www.toddseal.com/tests/navfloat.phtml](http://www.toddseal.com/tests/navfloat.phtml) * Another site, particularly for floats and a site I visit all the dang time, is Floatutorial: [http://css.maxdesign.com.au/floatutorial/index.htm](http://css.maxdesign.com.au/floatutorial/index.htm) Viewing 12 replies - 1 through 12 (of 12 total) The topic ‘Fix my float! CSS horizontal menu question’ is closed to new replies. ## Tags * [floats](https://wordpress.org/support/topic-tag/floats/) * [horizontal](https://wordpress.org/support/topic-tag/horizontal/) * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/) * 12 replies * 5 participants * Last reply from: [tsguitar](https://wordpress.org/support/users/tsguitar/) * Last activity: [20 years, 3 months ago](https://wordpress.org/support/topic/fix-my-float-css-horizontal-menu-question/#post-342912) * Status: not resolved ## Topics ### Topics with no replies ### Non-support topics ### Resolved topics ### Unresolved topics ### All topics