Newbie HTML5 & CSS3 issue with Locating some icons - html

Question

I am new to HTML5 & CSS and New since HTML when it first came to life
Anyhow I am working on learning how to code in HTML5 & CSS3 at the moment.. but have ran into a road block...
I want to get my Copy right information on the left of the footer background and my browser icons to the right of my footer background.... I have been playing with the problem for 9 hours I don't give up easily even tried some suggestions I found here which did not work...
If you would like to see actual page you can goto
http://cowboy0629.ddns.net/test
.mainFooter {
width: 97%;
float: left;
height: 40px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background-color: #141476;
margin: 2% 1.5% 2% 1.5%;
}
.footerIcons img.chrome {
width: auto;
height: 20px;
}
.footerIcons img.firefox {
width: auto;
height: 23px;
}
.footerIcons img.safari {
width: auto;
height: 23px;
}
.footerIcons {
float: right;
height: 9px;
}
.footerIcons ul {
float: right;
padding: 0;
margin: 0 auto;
}
.footerIcons li {
float: right;
list-style:none;
margin-left:5px;
}
.footerIcons span p {
height: 20px;
float: left;
color: #3399FF;
width: 97%;
margin: 9px;
}
<footer class="mainFooter">
<div class="footerIcons">
<span>
<p>Copyright © 2017 cowboyDesigns.com</p>
</span>
<ul>
<li>
<img class="chrome" src="images/icons/black-chrome-icon.png" alt="">
</li>
<li>
<img class="firefox" src="images/icons/black-firefox-icon.png" alt="">
</li>
<li>
<img class="safari" src="images/icons/black-safari-icon2.png" alt="">
</li>
</ul>
</div>
</footer>

Answer 1

You could use relative positioning on the <ul> element.
.footerIcons ul {
position: relative;
top: -47px;
}
This might be a sloppy solve than doing something like setting the container size to 30% and getting div alignment.

Answer 2

The solutions above will fix the issue but they seem more likely to be hacks,
p and ul are block elements and they won't be in the same line by default.
you need to replace the existing CSS rules with the set the CSS as below
.mainFooter p {
color: #3399FF;
display: inline-block;
margin: 9px;
}
.mainFooter ul {
display: inline-block;
float: right;
list-style: none;
margin: 0 auto;
}
.mainFooter img {
width: 30px;
height: 30px;
margin: 5px;
}
there is no need for separate rules for each browser icon and use icons of same width and height.

Answer 3

Just change the float setting to left in .floatericons in the css file for the copyright part.
.footerIcons {
float: left;
height: 9px; }
Add this part:
.footerIcons ul {
position: relative;
top: -47px;
left:600px;
float:right;}

Answer 4

There's multiple ways I can think of to accomplish this.
This works:
<footer class="mainFooter">
<ul>
<li style="float:left">Copyright © 2017 cowboyDesigns.com</li>
<li style="float:right"><img class="chrome" src="images/icons/black-chrome-icon.png" alt=""></li>
<li style="float:right"><img class="firefox" src="images/icons/black-firefox-icon.png" alt=""></li>
<li style="float:right"><img class="safari" src="images/icons/black-safari-icon2.png" alt=""></li>
</ul>
</footer>
It could use a little love with regards to vertical alignment, but it works.
I wouldn't set links in navigation bars to display:inline because it makes them harder to click (since they don't fill up the block around them)...I also use utility CSS float classes, not inline styles.
Floats and positioning are one of the hardest things to learn in CSS but there's an easy and fast way to get it sorted out.
Check out this video on using Chrome DevTools as an IDE
Not only can you see the changes in real time, you can even map them back to your source files so changes you make are saved.
Or you could just use a framework that has solutions for things like this baked right in. I'm a big fan on Foundation and the grid and alignment classes would be well-suited to this problem.
It seems you're doing this for school so maybe you can't use a framework but you can look at how they solved the problem and what code they used.

Answer 5

Just building on top what you have created you will have something similar to this:
footer {
width: 97%;
height: 40px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
background-color: #141476;
margin: 2% 1.5%;
}
footer p,
.footerIcons{
line-height: 20px;
margin: 9px;
}
footer p{
float: left;
color: #3399FF;
}
.footerIcons {
float: right;
}
.footerIcons img.firefox,
.footerIcons img.safari,
.footerIcons img.chrome{
width: auto;
height: 23px;
}
<footer>
<p>Copyright © 2017 cowboyDesigns.com</p>
<div class="footerIcons">
<img class="chrome" src="images/icons/black-chrome-icon.png" alt="">
<img class="firefox" src="images/icons/black-firefox-icon.png" alt="">
<img class="safari" src="images/icons/black-safari-icon2.png" alt="">
</div>
</footer>