I am currently learning css. I was hoping to create a gallery of 3 images lined together under a short paragraph on top. However, I am having trouble lining the images on a single line, and scaling them.
This is the html:
<!DOCTYPE html>
<html>
<head>
<title> Wardrobe Inspiration </title>
<link rel="stylesheet" href="wardrobe.css">
</head>
<body style="background-color: gainsboro;">
<div>
<h1>Welcome to my gallery of ideas for your wardrobe</h1>
<p1> Get inspired and unleash your inner Coco Chanel! </p1>
</div>
<div>
<h3>The benefits of a minimalist wardrobe...</h3>
<div>
<ul>
<li>Gives you additional space in your room</li>
<li>Makes it quicker and easier to choose clothes in the morning</li>
<li>Helps your style get simpler and more elegant</li>
</ul>
</div>
</div>
<div ID="stefets-picture" ID="stefets-picture:hover" class="gallery-item">
<img src= "minimal1.jpeg">
</div>
<div ID="stefets-picture" ID="stefets-picture:hover" class="gallery-item">
<img src= "minimal2.jpeg">
</div>
<div ID="stefets-picture" ID="stefets-picture:hover"class="gallery-item" >
<img src= "minimal3.jpeg">
</div>
<footer>
<div class="checkout">
<p>Feel free to check out my</p>
<a href = "https://www.pinterest.fr/esploratempo/boards/" target="_blank" > Pinterest </a>
</div>
</footer>
</body>
</html>
And this is the associated css:
.gallery-item {
width: 25%;
padding: 5px;
border: 1px solid gray;
float: left;
margin-right: 10px;
}
.checkout{
text-align: center
}
p {
display: inline-block;
}
a {
float: center;
}
#stefets-picture {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
}
#stefets-picture:hover {
filter: none;
-webkit-filter: grayscale(0);
}
Where am I going wrong with the gallery? Any help is much much appreciated.
I had added some things and it works for me.
This is HTML
<!DOCTYPE html>
<html>
<head>
<title> Wardrobe Inspiration </title>
<link rel="stylesheet" href="wardrobe.css">
</head>
<body style="background-color: gainsboro;">
<div>
<h1>Welcome to my gallery of ideas for your wardrobe</h1>
<p1> Get inspired and unleash your inner Coco Chanel! </p1>
</div>
<div>
<h3>The benefits of a minimalist wardrobe...</h3>
<div>
<ul>
<li>Gives you additional space in your room</li>
<li>Makes it quicker and easier to choose clothes in the morning</li>
<li>Helps your style get simpler and more elegant</li>
</ul>
</div>
</div>
<div id="container" class="container">
<div ID="stefets-picture" ID="stefets-picture:hover" class="gallery-item">
<img src= "minimal1.jpeg" class="photo-class">
</div>
<div ID="stefets-picture" ID="stefets-picture:hover" class="gallery-item">
<img src= "minimal2.jpeg" class="photo-class">
</div>
<div ID="stefets-picture" ID="stefets-picture:hover"class="gallery-item">
<img src= "minimal3.jpeg" class="photo-class">
</div>
</div>
<footer>
<div class="checkout">
<p>Feel free to check out my</p>
<a href = "https://www.pinterest.fr/esploratempo/boards/" target="_blank" > Pinterest </a>
</div>
</footer>
</body>
</html>
And this is CSS
.gallery-item {
width: auto;
padding: 5px;
border: 1px solid gray;
float: left;
margin-right: 10px;
}
.checkout{
text-align: center
}
p {
display: inline-block;
}
a {
float: center;
}
#stefets-picture {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
}
#stefets-picture:hover {
filter: none;
-webkit-filter: grayscale(0);
}
.container::after {
content: "";
clear: both;
display: table;
}
.photo-class {
height: 200px;
width: auto;
}
This line:
.photo-class {
height: 200px;
width: auto;
}
gives you control of the height of your photos. All of them can be different size, but it will scale them to the hight of, in this case, 200px.
Also I have added "container" which will keep things organised and after displaying photos container class with ::after will clear the float and place footer underneath. Hope I halped. Good luck learning HTML and CSS ;)
here is a fix and solution for your page. the Galleries work on mobile view too, responsive size of each image
body {
background-color: gainsboro;
}
.gallery-items {
display: flex;
}
.gallery-item {
width: 33.33%;
}
img {
width: 100%;
}
.checkout {}
p {
text-align: center;
}
.stefets-picture {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
}
.stefets-picture:hover {
filter: none;
-webkit-filter: grayscale(0);
}
<div>
<h1>Welcome to my gallery of ideas for your wardrobe</h1>
<p1> Get inspired and unleash your inner Coco Chanel! </p1>
</div>
<div>
<h3>The benefits of a minimalist wardrobe...</h3>
<div>
<ul>
<li>Gives you additional space in your room</li>
<li>Makes it quicker and easier to choose clothes in the morning</li>
<li>Helps your style get simpler and more elegant</li>
</ul>
</div>
</div>
<div class="gallery-items">
<div class="stefets-picture gallery-item">
<img src="https://picsum.photos/200/300?random=1">
</div>
<div class="stefets-picture gallery-item">
<img src="https://picsum.photos/200/300?random=1">
</div>
<div class="stefets-picture gallery-item">
<img src="https://picsum.photos/200/300?random=1">
</div>
</div>
<footer>
<div class="checkout">
<p>
Feel free to check out my
</p>
<p>
Pinterest
</p>
</div>
</footer>
Related
I have attached my HTML along with my CSS code and a picture of the webpage. I can not figure out why there is a gap in the red background color at the bottom. Any help is much appreciated
/*
Landon Byrd
Fall 2021
Plain Red #f60d41
Rich Red #f6130d
Orioles Orange #f64d0d
Sunset Orange #f6870d
Golden Yellow #f6c10d
*/
/* Global settings */
h1 {
text-align: center;
font-family: Papyrus
}
h2 {
text-align: center;
color: #f6130d;
text-decoration: underline
}
.wrapper {
width: 85%;
margin: 0 auto;
max-width: 960px;
}
/* Nav Section */
.nav {
width: 85%;
margin: 0 auto;
background-color: #f6130d;
text-align: center;
}
.menu {
float: left;
width: 25%
}
/* Main section */
.banner {
justify-content: center;
background-color: #f6c10d;
text-align: center;
}
.bulletPoints {
text-align: center;
}
section {
background-color: #f6870d;
color: #f60d41;
font-style: italic;
margin: 25px 50px 75px;
}
body {
background-image: url("images/background.jpeg");
}
.image1 {
display: block;
margin-left: auto;
margin-right: auto;
}
figcaption {
text-align: center;
}
.row {
display: flex;
}
.column {
flex: 33.33%;
padding: 5px;
}
/* Footer section */
* {
box-sizing: border-box;
}
.footer {
text-align: center;
background-color: #f6130d;
color: #f6c10d;
}
.box {
float: left;
width: 33.33%
}
.footer::after {
content: "";
clear: both;
display: table;
}
/* Copyright section */
.copyright {
text-align: center;
background-color: #f6130d;
color: #f6c10d;
}
<!DOCTYPE html>
<head>
<title>Augie's Custom T-shirts</title>
<meta charset="utf-8">
<link href="Style.css" rel="stylesheet">
</head>
<body>
<nav class="nav">
<div class="menu">
<p>Home</p>
</div>
<div class="menu">
<p>Shop</p>
</div>
<div class="menu">
<p>Events</p>
</div>
<div class="menu">
<p>Contact Us</p>
</div>
<br/>
<br/>
</nav>
<main class="wrapper">
<div class="banner">
<h1><span class="name">Augie's Custom T-shirts</span></h1>
<h2>Custom T-shirts for you or your party.</h2>
<div class="bulletPoints">
<ul>
<li>Birthday parties</li>
<li>Vacation groups</li>
<li>Bachelorette Parties</li>
<li>Family reunions</li>
<li>Work team rewards</li>
<li>Business promotions</li>
</ul>
</div>
<br/>
</div>
<p id="Catch">
Do you have an event coming up, and want everyone to get in the spirit? T-shirts can bring a group together, make everyone feel connected, and let everyone know what you're celebrating.
</p>
<p>T-shirts can also be a great gift to someone that acknowledges their special interest or hobby.</p>
<p>Choose from one of our unique designs, or let us put your own design on a shirt for you.</p>
<div class="row">
<div class="column">
<img src="images/gorilla.jpg" alt="Gorilla" style="width:100%">
</div>
<div class="column">
<img src="images/pink.jpg" alt="Pink" style="width:100%">
</div>
<div class="column">
<img src="images/skull.jpg" alt="Skull" style="width:100%">
</div>
</div>
<p><strong>How it works:</strong></p>
<p>Browse our selection of unique designs, select the size and colors of the shirts you would like, and place your order. We will ship your shirts within three business days for in-stock shirts, or five days for custom size and colors.</p>
<figure>
<img src="images/t-shirt-colors.jpeg" alt="T-shirt colors" class="image1">
<figcaption>Choose from are variety of t-shirt colors!</figcaption>
</figure>
<p>Have a design of your own? Can't find the right sentiment? Call or email us to discuss the possibilities or get some ideas for your event.</p>
<p>Please note there will be a one time $15 charge for any custom graphics design.</p>
<h2><em>Contact us today!</em></h2>
</main>
<footer class="footer">
<div class="box">
<p>Augie's Custom T-shirts</p>
<p>(478) 555-1212</p>
<p>augieB#augiesTees.com</p>
<br/>
</div>
<div class="box">
<p>Check out are Social Media for updates!</p>
<p>Facebook:</p>
<p>Instagram:</p>
<p>Twitter:</p>
</div>
<div class="box">
<p>Locations:</p>
<br/>
<p>100 Tanger Dr, Locust Grove, GA</p>
<p>2954 Watson Blvd Suite 100, Warner Robins, GA</p>
</div>
</footer>
<div class="copyright">
<h3> #copyright: Landon Byrd</h3>
<p>Fall 2021, All Rights Reserved</p>
</div>
<p>
<a href="http://jigsaw.w3.org/css-validator/check/referer">
<img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" />
</a>
</p>
</div>
</body>
Side note my verified CSS checker image is also not showing up at the very bottom of the page and the HTML checker is giving me the following error
Error: Stray end tag div.
From line 123, column 1; to line 123, column 6
just add h3{ margin-top: 0px; } to your css code to remove the white line between the red divs at the bottom of the side
add the div with 'class=copyright' inside the footer and remove the extra </div> at last
that h3 tag in your .copyright div taking the default
margin-block-start: 1em;
margin-block-end: 1em;
you can use
.copyright h3{
margin-block:0;
}
this will remove the white space..
or you can use
*{
margin:0;
padding:0;
}
this will remove the default margin and padding from the page
I'm currently working on freecodecamp's first test, so my question is probably dumb. I would like to change the line-height of #titles to a smaller one, while keeping it's background color. It's probably the display element, but I can't figure out what to do. Also, I'd like to get rid of the white line surrounding my image, right before the border...
<div id="main">
<div id="titles">
<h1 id="title">A tribute to Ocelote</h1>
<h2 id="title2">The man who has done it all.</h2>
</div>
<hr>
<div id="img-div">
<img id="image" src="https://theshotcaller.net/wp-content/uploads/2017/09/IMG_5488-1.jpg" alt="A photo of Ocelote">
<div id="img-caption"> A story of how far can one go, if only the desire is
there.
</div>
<div id="tribute-info">
<br>
<br>
fgj
</div>
<a id="tribute-link" href="https://lol.gamepedia.com/Ocelote" target="_blank"> </a>
</div>
</div>
https://jsfiddle.net/deffciu/hrna0Lfs/
any help is appreciated
Adding the below two rules to #titles makes it work:
#titles {
display: block;
background: #6C7E95;
line-height: 5px;
/* Add the below two rules */
overflow: hidden;
padding: 0 0 20px;
}
You get this:
Snippet
html, body {
font-family: 'Oswald', sans-serif;
text-align: center;
background: white;
}
#title2 {
color: #052449;
margin-bottom: 0px;
}
#titles {
display: block;
background: #6C7E95;
line-height: 5px;
/* Add the below two rules */
overflow: hidden;
padding: 0 0 20px;
}
#image {
border: 8px solid #052449;
border-radius: 50%;
width: 500px;
height: 375px;
margin-top: 15px;
}
hr {
border-color: #486282;
margin-top:0px;
}
#img-caption {
margin-top: 20px;
font-style: italic;
font-size: 25px;;
}
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<div id="main">
<div id="titles">
<h1 id="title">A tribute to Ocelote</h1>
<h2 id="title2">The man who has done it all.</h2>
</div>
<hr>
<div id="img-div">
<img id="image" src="https://theshotcaller.net/wp-content/uploads/2017/09/IMG_5488-1.jpg" alt="A photo of Ocelote">
<div id="img-caption"> A story of how far can one go, if only the desire is there.
</div>
<div id="tribute-info">
<br>
<br>
fgj
</div>
<a id="tribute-link" href="https://lol.gamepedia.com/Ocelote" target="_blank"> </a>
</div>
</div>
For the white border issue, it's your body's margins. The below code will fix it.
body {margin: 0;}
I'm trying to decide the best way to automate adding text overlays onto images for a resource library I am creating. I have hundreds of these kinds of resources where I grab a "sample image" of the item that I then manually, in a graphics program, add the resource name overlay. It would be great if I could just upload the image and then in the HTML add the resource name and have it overlay the name and round the corners of the image and make it look right. An example of what I am trying to do is at http://digitallearning.pcgus.com/Pepper/PPB/General/leadership.html. This is all manual at this point and the more I can automate the better the process of creating this will be. Thanks in advance for any advice/code I could use.
thanks for asking on SO!
In future, we would all appreciate it if you could add your code at the moment, if any.
There are multiple ways to do this, it all depends on how you write code.
The way I would do it is using a bootstrap row (for inline images), then insert this code (modify for your application):
HTML:
<div class="col-xs-4">
<div class="imageTextContainer">
<div class="imagePart">
<img src="imgSrcHere" />
</div>
<p>Your text here</p>
</div>
</div>
<div class="col-xs-4">
<div class="imageTextContainer">
<div class="imagePart">
<img src="img2SrcHere" />
</div>
<p>Your text here</p>
</div>
</div>
<div class="col-xs-4">
<div class="imageTextContainer">
<div class="imagePart">
<img src="img3SrcHere" />
</div>
<p>Your text here</p>
</div>
</div>
Custom CSS:
.imageTextContainer {
height: 250px;
background-color: #0000FF
}
.imagePart {
height: 230px;
}
.imagePart > img {
height: 100%;
}
Hope this helps.
The reason this works is because the div containing the images and text is 250px high, however the images are set to 100% of 230px, so you get 20px for text. You can obviously modify these values however
This is what I ended up with that seems to have addressed my particular needs.
.wrap {
/* force the div to properly contain the floated images: */
position:relative;
float:left;
clear:none;
overflow:hidden;
}
.wrap img {
position:relative;
z-index:2;
width:200px;
height:125px;
border:2px solid #1F497D;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
z-index:1;
}
.wrap img:hover {
-webkit-filter: brightness(70%);
-moz-filter: brightness(70%);
-o-filter: brightness(70%);
-ms-filter: brightness(70%);
filter: brightness(70%);
}
.wrap .desc {
display:block;
position:absolute;
width:100%;
top:55%;
left:0;
background-color: rgba(31,73,125,0.85);
font-family: 'Arvo', serif;
font-size:11px;
color: #FFF;
text-shadow: 1px 1px #111111;
font-weight:normal;
display:flex;
text-align:center;
justify-content:center;
align-items:center;
bottom: -5%;
-webkit-border-radius: 0px 0px 10px 10px;
-moz-border-radius: 0px 0px 10px 10px;
border-radius: 0px 0px 10px 10px;
z-index: 1;
}
<!DOCTYPE html>
<html>
<head><title>Client Resources</title>
<link href="learningmat.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Arvo|Alice|Roboto|Roboto+Condensed|Alegreya:700">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
</head>
<body>
<div class="list">
<h1 class="list2">Client Resources</h1>
<hr class="list2">
<p>SOME KIND OF DESCRIPTION</p>
<img src="imgs/spacer.png" class="spacer2">
<a href="docs/03 - How do we define urgency.pdf" target="_blank">
<div class="wrap">
<img src="imgs/Urgency.jpg" />
<h3 class="desc">How Do We Define Urgency?</h3>
</div>
</a>
</div>
</body>
</html>
If anyone sees any improvements or changes, please let me know.
I was following this tutorial video I reached about the time 23:46 and I'm not ending up with the same outcome.
Below is the html code I wrote - which I thought was exactly what he had in the tutorial, for some reason the div "pageTopWrap" is not contained in "pageTop", it seems that it's ending up underneath it.
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<title> Teyta social network tutorial demo </title>
<style type="text/css">
body { margin: 0px; }
#pageTop {
background:url(style/headerSliver.png) repeat-x;
height: 90px
}
#pageTop > #pageTopWrap {
width: 1000px;
margin: 0px auto;
height: 90px;
}
#pageTop > #pageTopWrap > #pageTopLogo {
float: left;
height: 90px;
width: 108px;
}
#pageTop > #pageTopWrap > #pageTopRest {
float: left;
height: 90px;
width: 892px;
}
#pageTop > #pageTopWrap > #pageTopRest {
height: 43px;
background:#CCC;
border:#F00 1px solid;
}
</style>
<body>
<div id="pageTop"></div>
<div id="pageTopWrap">
<div id="pageTopLogo">
<a href="http://www.teyta.com">
<img src="images/logo.png" alt="logo" title="Teyta social network" />
</a>
</div>
<div id="pageTopRest">
<div></div>
<div></div>
</div>
</div>
<div id="pageMiddle"></div>
<div id="pageBottom"></div>
</body>
</html>
<div id="pageTop"></div>
That is because you have not nested pageTopWrap inside pageTop.
Notice how you have created the div and closed it in the same line.
Proper Nesting
<div id="pageTop">
<div id="pageTopWrap">
<div id="pageTopLogo">
<a href="http://www.teyta.com">
<img src="http://placehold.it/100x100" alt="logo" title="Teyta social network" />
</a>
</div>
<div id="pageTopRest">
<div></div>
<div></div>
</div>
</div>
</div>
<!-- end #pageTop -->
<div id="pageMiddle"></div>
<div id="pageBottom"></div>
The guy above is absolutely right. You must nest properly your conditions in CSS.
NOTE: I would prefer not having to use things like DOCTYPE and having a style tag. If you're watching a tutorial, you should add in a link rel tag so you can have more space when programming!
Also, why are you trying to make a menu at the tab, when you can just make a click-able link table with onMouse events? a lot cooler, quicker, and more code effiecient!
Hey everyone I am having an issue where my social media buttons for my website are not staying in the nav header area. I have tried using the float attribute and it wont stay in the header here are some images to show you what I am talking about.
http://imgur.com/zwmtXju
as you can see in this image the social media buttons wont stay in the header area, any help would be appreciated. Thanks in advance.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<div id="container">
<header>
<nav class="clearfix">
<a href="#" id="brand">
<h1>Skull</h1>
</a>
<ul class="clearfix">
<li>Moonshine</li>
<li>Recipes</li>
<li>The Blog</li>
<li>The Store</li>
<div id="socialMedia">
<img src="imgs/fbsm.png" alt=""/>
<img src="imgs/tsm.png" alt=""/>
<img src="imgs/psm.png" alt=""/>
</div>
</ul>
Skull®
</nav>
</header>
<div id="content">
<div id="story">
<p id="ourStory">Our Story</p>
<h1 id="bootleg">Bootlegging</h1>
<p id="storyBoard">
<span class="storyTelling">This is our history,</span>
<span class="storyTelling">our story,</span>
<span class="storyTelling">of how we became one of the greatest</span>
<span class="storyTelling">moonshine brands on the planet.</span>
<span class="storyTelling">A story of struggle,</span>
<span class="storyTelling">and independence,</span>
<span class="storyTelling">accompanied by expert craftmanship.</span>
<span class="storyTelling">Using years as chapters of our book of life</span>
<span class="storyTelling">we will show you what makes our moonshine so great.</span>
<span class="storyTelling">Scroll down and enjoy.</span>
</p>
</div>
<div id="timeLine">
<div id="present">
<h1>Here and Now</h1>
<p>Now in 2014 we are a globally recognized brand that many people know and love. </p>
<img src="imgs/skullBrand.png" alt=""/>
</div>
<div id="2000">
<h1>2000</h1>
<p>In 2000, bars started buying our moonshine to make drinks with. This was a huge milestone for Skull®
Because, it brought our brand to the attention of many people that were not yet customers of our great alcohol. </p>
<img src="imgs/skullBrand.png" alt=""/>
</div>
<div id="1960">
<h1>1960</h1>
<p>By 1960 we were booming with popularity. Skull alcohol became a recognized brand.</p>
<img src="imgs/skullBrand.png" alt=""/>
</div>
<div id="1933">
<h1>1933</h1>
<p>By 1933 Prohibition was repealed, and the market grew thin. But that didn't stop us. Skull alcohol was born.
With our superior craftsmanship skills, and our excellent customer satisfaction our legacy continued</p>
<img src="imgs/prohibitionends.jpg" width="263" height="185" alt=""/>
</div>
<div id="1920">
<h1>1920</h1>
<p>By the early 1900s, states began passing laws that banned alcohol sales, and consumption. in 1920,
nationwide Prohibition went in to effect. It was the greatest thing moonshiners could have asked for.
Because there was no legal alcohol available, the demand for moonshine shot up like a rocket. Moonshiners
had so much business they couldn't even keep up with the demand. Hidden saloons called speakeasies were even
opened in every city. they were used to sell the illegal whisky.</p>
<img src="imgs/dry.jpg" height="200" alt=""/>
</div>
<div id="1860">
<h1>1860</h1>
<p>The hatred from the Whisky Rebellion escalated in to the 1860s as the government continued
to try and collect excise tax to fund the Civil War. At this time Moonshiners and many other anti-governmental
groups, such as the KKK, joined forces to kill anyone who would release the location of their stills and attack IRS officials and
their families.</p>
<img src="imgs/kkk.jpg" width="263" height="185" alt=""/>
</div>
<div id="1794">
<h1>1794</h1>
<p>The American people, who had just fought a war to get out from under oppressive British taxes
(among other things), were not particularly pleased. So, they decided to just keep making their own
whisky, completely ignoring the federal tax. All the resentment that the citizens had toward the
government eventually exploded when several hundred angry citizens took over the city of Pittsburgh,
Pennsylvania. President George Washington called apon the militia, a group of 13,000 troops to disperse
The angry mob. The Whiskey Rebellion was a failure.</p>
<img src="imgs/wr.jpg" alt=""/>
</div>
<div id="1791">
<h1>1791</h1>
<p>Moon shining began very early in American history. Shortly after the Revolution,
the United States found itself struggling to pay for the expense of fighting a long war.
The solution was to place a federal tax on liquors and spirits that would soon be known
as the whisky tax.</p>
<img src="" alt=""/>
</div>
</div>
</div>
<footer>
<div class="footerContent"></div>
<div class="footerContent"></div>
<div class="footerContent"></div>
</footer>
</div><!--containerEnd-->
</body>
</html>
/* Clearfix */
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
body {
width: 1920px;
background-color: #202021;
}
#container{
width: 100%;
margin: 0;
background: url('../imgs/565.jpeg') repeat-y center center fixed ;
}
header{
width: 100%;
height: 100px;
}
nav{
width: 100%;
height: 100px;
position: relative;
border-bottom: 2px solid #cccccc;
}
#brand{
margin-top:15px;
width: 250px;
height: 70px;
float: left;
background: url('../imgs/skullAlcoholText.png') no-repeat;
}
#brand h1{
display: none;
}
nav ul{
padding: 0;
margin: 0 auto;
width: 600px;
height: 100px;
list-style: none;
color: #fff;
border-bottom: 2px solid #cccccc;
}
nav li{
display: inline;
float: left;
}
nav a{
color: #fff;
display:inline-block;
width: 150px;
text-align: center;
text-decoration: none;
line-height: 100px;
}
nav li a{
border-right: 1px solid #cccccc;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
nav li:first-child a{
border-left: 1px solid #cccccc;
}
nav a:hover, nav a:active {
color: #ffffff ;
}
#socialMedia{
width: 320px;
float: right;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
#socialMedia a:first-child{
}
#socialMedia a{
width: 100px;
}
nav a#pull {
display: none;
}
#content {
text-align: center;
}
#story{
margin: auto;
line-height: 2;
width: 300px;
height: 200px;
}
#ourStory, #bootleg, #storyBoard{
text-align: center;
color: #ffffff;
}
Your nav ul width is 600px. It's too small to contain all these elements. Therefore div is on next row. I also prefer to change div on something more semantic, like ul.
Put your code in table
<table width="646" border="0">
<tr><td width="98"><ul class="clearfix"><li>Moonshine</li></td><td width="82"><li>Recipes</li></td><td width="88"><li>The Blog</li></td><td width="110"><li>The Store</li></td>``<td width="78"><div id="socialMedia"><img src="imgs/fbsm.png" alt=""/></div></td><td width="78"><div id="socialMedia"><img src="imgs/tsm.png" alt=""/></div></td><td width="82"><div id="socialMedia"><img src="imgs/psm.png" alt=""/></div></td></tr></table></ul>