Title: CSS alignment issue? Last modified: August 20, 2016 --- # CSS alignment issue? * [feygraphica](https://wordpress.org/support/users/feygraphica/) * (@feygraphica) * [14 years, 3 months ago](https://wordpress.org/support/topic/css-alignment-issue/) * I need to have a CD image, the player and then 2 icons all in one row on my page. For some reason I cannot get the icons (which come right after the player) to stay on the same line with the player… they pop down to the next line. * Is this a style sheet issue? I cannot find where I can force them to stay on the same line. Please help if anyone has an answer… I’m new to all this and not a programmer. * [http://www.feygraphica.com/blog/static-test-page/buy-the-music/](http://www.feygraphica.com/blog/static-test-page/buy-the-music/) * [http://wordpress.org/extend/plugins/haiku-minimalist-audio-player/](http://wordpress.org/extend/plugins/haiku-minimalist-audio-player/) Viewing 15 replies - 1 through 15 (of 19 total) 1 [2](https://wordpress.org/support/topic/css-alignment-issue/page/2/?output_format=md) [→](https://wordpress.org/support/topic/css-alignment-issue/page/2/?output_format=md) * [peredur](https://wordpress.org/support/users/peredur/) * (@peredur) * [14 years, 3 months ago](https://wordpress.org/support/topic/css-alignment-issue/#post-2591610) * I take it you mean the ‘Available for purchase at’ + icons that follow the flash players. * Your problem is that the div holding the player is closed before the span element that holds the text. So the div takes up the full width of its parent leaving no room for the following content. * Ideally, you should ensure that the span element and the following icons come within the div element that contains the player. * Failing that, you could try setting a width on `div.grandmusic` * HTH * PAE * Thread Starter [feygraphica](https://wordpress.org/support/users/feygraphica/) * (@feygraphica) * [14 years, 3 months ago](https://wordpress.org/support/topic/css-alignment-issue/#post-2591668) * Being a bumbling idiot newbie, I have no idea how to accomplish either one of those things. Where do I find div.grandmusic? I’ve been through the page html, theme css… the php files are a mystery to me. Find the right file to edit to is half my problem, I think… * Ugh, I seriously need to figure this out.. it’s my last stumbling block. Help me, Obie Won… * [peredur](https://wordpress.org/support/users/peredur/) * (@peredur) * [14 years, 3 months ago](https://wordpress.org/support/topic/css-alignment-issue/#post-2591718) * That’s the point. The rule doesn’t exist. You need to create it. * You appear to be using the twentyeleven theme. That being the case, you really need to make any changes in a [Child Theme](http://codex.wordpress.org/Child_Themes). Child themes are the only recommended way of making modifications to themes. In the case of default themes like twentyeleven, they are the only way you can do it without risking your changes being overwritten by an update, for example. I also understand that certain types of support require that your installation has the default themes present in an unchanged state. * So you firstly need to create a child theme if you haven’t already done so and, if you’ve already made any changes you need to transfer them to your child theme. You should then reinstall an original version of twentyeleven. * When that’s done, you can add a new rule to the end of your child theme’s style sheet something like: * ``` div.grandmusic { width: /* whatever width fixes the problem */; } ``` * You’ll have to use a bit of trial and error to find the necessary width. * I’m not even going to begin suggesting how you might implement my preferred solution. It would involve messing with at least one of the PHP files and it doesn’t sound as if you’re up for that. * If you decide not to use a child theme, on your own head be it, but you could add the new rule to the end of twentyeleven’s style sheet. * HTH * PAE * Thread Starter [feygraphica](https://wordpress.org/support/users/feygraphica/) * (@feygraphica) * [14 years, 3 months ago](https://wordpress.org/support/topic/css-alignment-issue/#post-2591720) * Okay, that all makes sense to me. I’ve been editing the css file for the theme and it sounds like maybe I shouldn’t have. I’ll go look up how to do the child theme and go from there, after making a backup of all of this. Learning something new is always so painful. LOL 🙂 * [peredur](https://wordpress.org/support/users/peredur/) * (@peredur) * [14 years, 3 months ago](https://wordpress.org/support/topic/css-alignment-issue/#post-2591721) * Fortunately, making a child theme is trivially easy: 1. Create a directory for it in wp-content/themes 2. Create a style.css file for it (on your local computer) 3. Add the mandatory comment block. You just need the name of your child theme( an arbitrary name), and the parent theme’s directory name ‘twentyeleven’ 4. Add an import statement directly under the comment block. It should just say` @import url('../twentyeleven/style.css');` 5. Add any style rule changes you previously made in the parent’s style sheet, to the child’s style sheet, immediately after the import statement 6. Upload the style.css file to your child theme’s directory 7. Open your Dashboard and go to Appearance –> Themes 8. Activate your child theme 9. Check all your settings. In particular, you will need to reset the main navigation menu back to your custom menu (if you have one). You may also have to redo stuff like backgrounds and header images * And that’s it. Everything should look just as it does now. * Now you need to make a copy of the modified parent style sheet, just to be on the safe side, and download it to your computer for safekeeping. Next, download a brand new copy of twentyeleven to your local computer and upload its style. css file over the existing one. Revisit your site. It should look just the same. If it doesn’t you must have missed some rules you changed in the old style sheet. Search for them in your copy, and and use Dashboard –> Appearance –> Edit to add them back into the child style sheet. * Once this is all done, you can start adding new rules to your child theme’s style sheet. * One thing you should not do, is to copy the parent’s style sheet into your child. That would just be adding bloat. * If you need to make changes to PHP files, just copy the parent’s version into the child theme’s directory and then edit them in Dashboard –> Appearance –> Editor. * And finally, you can create a functions.php file as well for any new functions you might want to write. Having an empty one ready and waiting doesn’t hurt. * HTH * PAE * Thread Starter [feygraphica](https://wordpress.org/support/users/feygraphica/) * (@feygraphica) * [14 years, 3 months ago](https://wordpress.org/support/topic/css-alignment-issue/#post-2591722) * well, see, that’s where it’s going to be hairy. Not knowing css or any scripting as I should (I have a book I still haven’t started) I’ve been hunting and changing using the trial and error method as far as color goes… at least I know the color numbers and can hunt those down fairly quickly. * The only way I read to get rid of the white header bar at the top of the theme was to delete it from a php file… it worked but geez… this could be quite a mess I’ve made. I’ve been tweaking all over the place. * [esmi](https://wordpress.org/support/users/esmi/) * (@esmi) * [14 years, 3 months ago](https://wordpress.org/support/topic/css-alignment-issue/#post-2591723) * Try using Firefox with the Firebug add-on for this kind of CSS work. [http://getfirebug.com/](http://getfirebug.com/) * [peredur](https://wordpress.org/support/users/peredur/) * (@peredur) * [14 years, 3 months ago](https://wordpress.org/support/topic/css-alignment-issue/#post-2591724) * You shouldn’t have needed to get rid of anything from a PHP file. You can almost always make cosmetic changes using CSS. For example, you can make an element invisible, or set its display property to none. * As long as you keep your old style sheet (i.e. the one you’ve altered), it shouldn’t be too hard to redo the changes. Even if you have to redo them one-by-one. * I think I’d be tempted to just return to a vanilla twentyeleven setup (after you’ve saved the altered style sheet), do the child theme—a minimal one that changes nothing—and then redo your changes – in the child. * Any problems you have getting the effects you want you can post in new threads. Getting rid of the ‘white header bar’ for example. * It’s a bit of a pain, but hey! you’ll have learnt something. Just think of yourself as a guru in the making. * 🙂 * And esmi’s right about firebug. If you’re not already familiar with it, you should get familiar with it. I couldn’t live without it. * Cheers * PAE * Thread Starter [feygraphica](https://wordpress.org/support/users/feygraphica/) * (@feygraphica) * [14 years, 3 months ago](https://wordpress.org/support/topic/css-alignment-issue/#post-2591725) * OMG I JUST read about and downloaded Firebug 2 days ago… poked around with it some. I think my biggest help would be to learn CSS instead of just “figuring out” what I need when I need it. * [peredur](https://wordpress.org/support/users/peredur/) * (@peredur) * [14 years, 3 months ago](https://wordpress.org/support/topic/css-alignment-issue/#post-2591726) * This might give you a start [pdf]: * [http://peredur.net/csscoursereport.pdf](http://peredur.net/csscoursereport.pdf) * It’s a bit out of date. Twentyeleven uses HTML5/CSS3, which is not covered. But the principals haven’t changed; and it’s not that difficult to be honest. * Cheers * PAE * [esmi](https://wordpress.org/support/users/esmi/) * (@esmi) * [14 years, 3 months ago](https://wordpress.org/support/topic/css-alignment-issue/#post-2591728) * And bookmark [http://www.w3schools.com/css/](http://www.w3schools.com/css/) as an online reference. * Thread Starter [feygraphica](https://wordpress.org/support/users/feygraphica/) * (@feygraphica) * [14 years, 3 months ago](https://wordpress.org/support/topic/css-alignment-issue/#post-2591839) * Is there any reason I can’t duplicate the whole blog folder into a fresh directory, thereby not intalling a fresh of WP/theme? And then making a child theme inside that new directory/content, making a duplicate of the style.css I have been altering to work off of? I’ve made so many changes, and this is actually a project that will have to go live soon… I’m worried I’ll mess it all up and be in hot water. * I have a backup on my drive, but I’d like to not mess with the current version that the “client” is able to see online as I work. I was thinking I could do as you’ve instructed on a copy of the whole thing that I’ve placed in a new directory on my server, and do as you’ve instructed there. That way if I blow it up, the client won’t know it as I work through it all. Thoughts? Or do I have to literally install a fresh WP and theme in the new directory, and add the style.css file I’ve been using (as a child). * [esmi](https://wordpress.org/support/users/esmi/) * (@esmi) * [14 years, 3 months ago](https://wordpress.org/support/topic/css-alignment-issue/#post-2591840) * > Is there any reason I can’t duplicate the whole blog folder into a fresh directory * Yes – that’s not how WordPress works. You’d have to run a new install using a fresh database (or different table prefixes). * [peredur](https://wordpress.org/support/users/peredur/) * (@peredur) * [14 years, 3 months ago](https://wordpress.org/support/topic/css-alignment-issue/#post-2591842) * As esmi says, you can’t go copying WP about the place. * That’s what’s so good about child themes. You make all your changes there, in one place, and then when you’re ready, you upload the theme to a folder under wp-content on the live server, and activate the theme. * You’d have to redo some Dashboard settings, but as long as you know what the current settings are, it shouldn’t be hard to put them back. The ones you normally have to deal with are things like resetting the theme’s header and background, and resetting your custom menu, if you have one, as the main navigation menu. * HTH * PAE * Thread Starter [feygraphica](https://wordpress.org/support/users/feygraphica/) * (@feygraphica) * [14 years, 3 months ago](https://wordpress.org/support/topic/css-alignment-issue/#post-2591843) * Hmmm. but I also have all kinds of plugins and widgets and stuff. My concern grows. LOL Viewing 15 replies - 1 through 15 (of 19 total) 1 [2](https://wordpress.org/support/topic/css-alignment-issue/page/2/?output_format=md) [→](https://wordpress.org/support/topic/css-alignment-issue/page/2/?output_format=md) The topic ‘CSS alignment issue?’ is closed to new replies. * 19 replies * 3 participants * Last reply from: [feygraphica](https://wordpress.org/support/users/feygraphica/) * Last activity: [14 years, 3 months ago](https://wordpress.org/support/topic/css-alignment-issue/page/2/#post-2591847) * Status: not resolved ## Topics ### Topics with no replies ### Non-support topics ### Resolved topics ### Unresolved topics ### All topics