Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by kask
kask
7,509 Points

Help with my footer

Ok so how do you make the images side by side in the footer. Like its not allowing me to add add any margin or display-inline block. It keeps going under the first image i put down in the footer

The html code: 

    <!-- Above footer music player -->

    <div class="musicpool">
      <div class="player">
        <div class="playerstyle"> 

        <a id="play"><img src="img/com-icons/play.png"></a>

        <a id="rwd"><img src="img/com-icons/rwd.png"></a>

/**Music player**/

.musicpool {
   position:fixed;
   left:0px;
   bottom:0px;
   height:60px;
   width:100%;
   background:#FA58AC;
}

.player, .playerstyle {
    height: 50px;
    width: 50px;
    clear: both;
}

.playerstyle {
    display: block;
    width: 60px;
}

#play {
    display:inline-block;
    margin-left:auto;
    margin-right:auto;
}

#rwd {
    display:inline-block;
    margin-left:auto;
    margin-right:auto;
}
Christian Andersson
Christian Andersson
8,712 Points

Hey kask,

I'd be happy to help you, but you need to fix your post a bit.

To make the code snippets, you need to make sure everything is indented at least 4 spaces. Also, please remove any css that is irrelevant to the piece of codethat you're having problems with. You just dumped a 400-line css file expecting that people will go through it all for you.

So please help us help you. :)

kask
kask
7,509 Points

Yes i was thinking that alright i will do that give me 10 minutes please :)

Christian Andersson
Christian Andersson
8,712 Points

Even better, since your problem is more complex than just a row or two, I'd recommend making a code-pen at http://codepen.io. It will be easier that way.

kask
kask
7,509 Points

So want me to add what i did up their only or?

Christian Andersson
Christian Andersson
8,712 Points

Just show us the conflicting code. So if your footer has an issue, remove the music player for example and any css related to that. Remove as much as possible that's not related or impacts the footer.

kask
kask
7,509 Points

http://codepen.io/DevKask/pen/VYZQWj

1 Answer

Christian Andersson
Christian Andersson
8,712 Points

I found your problem.

Your .player and .playerstyle classes have some issues. The issue that breaks your code is that they are only 50px wide and you're trying to squeeze in 2 images that are nearly 130px each. That's why they go vertical. Give them some breathing-room.

.player, .playerstyle {
   height: 50px;
   width: 100%;
}

 .playerstyle {
   display: block;
   width: 100%;
}

Though I must say that you're not writing css is the most efficient way. You give each and every element a class or id which is unnecessary and in the long run can make some huuuuge css files (not to mention the pain to debug). You should look up on how to refer to them relative to their parent elements.

kask
kask
7,509 Points

Yeah i am just doing this for the prototype it will not be going on the web and after i do this i am finishing up on the css foundations course and then moving to php then back to the front-end course to finish off the javascript and other things.

Thank you for helping me

Christian Andersson
Christian Andersson
8,712 Points

Sounds good. Good luck! :)

kask
kask
7,509 Points

So i add 130px or more and it still doesn't do anything hmm

Christian Andersson
Christian Andersson
8,712 Points

They are each 128px. So two of them would be 256px. Then if you have any margin it could go up a bit more. Try 300 or something.

kask
kask
7,509 Points

I tried all the way up to 500px and still nothing

Christian Andersson
Christian Andersson
8,712 Points

Are you sure you modified:

.player, .playerstyle {
  height: 100%;
  width: 260px;
}

AND

.playerstyle {
  display: block;
  width: 260px;
}

?

I tried with the above code and it works. (though height: 100% is not what you want)

kask
kask
7,509 Points

Yep i did that and it still doesn't work

Christian Andersson
Christian Andersson
8,712 Points

Not sure what to say. If you go the codepen and just edit the 2 width's it works.

kask
kask
7,509 Points

I did update it on codepen it not working

Christian Andersson
Christian Andersson
8,712 Points

http://codepen.io/anon/pen/PwYQQO

Copy-pasted what I got. 2 buttons are next to eachother here, right?

kask
kask
7,509 Points

I got it to work somehow.. But also: What is better starting from left side of page and work your way to the right side of page or do right side first and left side last?

kask
kask
7,509 Points

Yep now they are right next to each other

Christian Andersson
Christian Andersson
8,712 Points

I wouldn't say that there is any right or wrong... though left->right is definetly the convensional way.

kask
kask
7,509 Points

Yeah because some of the right side of the page needs to be higher than the left side elements and then the bottom of the right side page needs to be lower than the left side.

Christian Andersson
Christian Andersson
8,712 Points

try building top->bottom

kask
kask
7,509 Points

Alright will do, thanks for the help