Creating a horizontal list of images objects and links - html

Question

So to start this off I would like to just say that any help is appreciated, I'm not looking for the entire code laid out for me. I have tried to create this but fail every time as something disappears of it breaks the entire layout of the page. I am fairly new to programming but I have a pretty good grasp of concepts and I'm open to learning new things.
I would like to create a top bar like in this website, with the logo and social icons. No search bar.
http://www.complex.com/
Thank you to anyone for any help

Answer 1

First, as a general tip: Whenever you see something you want to recreate, right click on it in chrome and select "inspect element". Then you can look at the css used to create it.
To have social icons up like your example site, they've simple floated them right.
So HTML:
<div class="header">
<div class="leftThing">
</div>
<div class="rightThing">
</div>
</div>
CSS:
.leftThing { float:left;}
.rightThing { float:right;}
The float will cause the element to go as far to the side you select as it can, then sit there. Here is a good css tricks article on the concept: http://css-tricks.com/all-about-floats/

Answer 2

I made you a litte JS-Fiddle to show you how to fix the header on top of the screen when you scroll down. Hope it helps a bit!
HTML:
<div id="WebContent" class="Content">
<img src='http://apod.nasa.gov/apod/image/9712/orionfull_jcc_big.jpg'></img>
</div>
CSS:
.Header{
top: 0px;
left: 0px;
min-height: 50px;
max-height: 50px;
min-width: 1024px;
background-color: #2C2C2C;
color: white;
position: fixed;
}
.icon{
height: 50px;
}
.Content{
max-width: 300;
max-height: 300;
overflow-y: auto;
}
Fiddle: http://jsfiddle.net/wujood/pgqeLr7s/
Or you can just insert a fixed position to your header:
<div class="header" style="position:fixed">
<div class="leftThing">
</div>
<div class="rightThing">
</div>
</div>

Answer 3

Apply either CSS float: left or display: inline-block to your elements.
http://jsfiddle.net/njoh7x73/
CSS code
.menu {
background-color: #333;
}
.menu div.item {
width: 64px;
height: 16px;
background-color: #888;
}
.menu .item {
float: left;
padding: 10px;
margin: 5px;
}
.menu .item:hover {
background-color: #555;
}
HTML code
<div class="menu">
<a class="item" href="#">LINK</a>
<div class="item"></div>
<a class="item" href="#">LINK</a>
<div class="item"></div>
<div style="clear:both"></div>
</div
If you use this approach (floating elements), don't forget to clear them.