Here is the problem: the Whole2 element in the css portion is supposed to be a container for the other divs, but it doesn't create the border or padding around he other elements. If anyone can tell me what I am doing wrong, please do.
By the way, the content is nonsense, ignore it.
This is my css:
<style>
.Whole2{
border:4px solid black;
padding: 1em;
}
.Title{
border: 1px solid;
background: lightblue;
text-align: right;
width: 57.9em;
height: 8em;
padding: .5em;
}
.Subtitle {
font-size: 0.8em;
}
.Blog1 {
width: 44em;
height: 20em;
border:1px solid black;
background: lightgreen;
text-align: justify;
padding: .5em;
}
.Blog2 {
width: 44em;
height: 20em;
border:1px solid black;
background: lightgreen;
text-align: justify;
padding: .5em;
}
.Friends {
border:1px solid black;
background: purple;
width: 12em;
height: 12em;
position: absolute;
top:10em;
left:0.5em;
padding: .5em;
}
.clears{
clear: both;
}
.theImg{
float: right;
padding: .5em;
}
.Blogs{
position: absolute;
top:10em;
left:14.4em;
}
.blogtext{
font-size: 18px;
}
.Whole2 {
border:4px solid black;
padding: 1em;
}
</style>
This is my html:
<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="lab1.css">
<div class="Whole2">
<head>
<div Class="Title">
<h1> Title thing </h1>
<div class="Subtitle">
<h2> Subtitle thing </h2>
</div>
</div>
</head>
<h3 class="clears"></h3>
<div class="Friends">
<head>
<h1> Friends</h1>
</head>
<body>
<table>
<th>
Friends
</th>
<tr>
<td>
Leo Bloom
</td>
</tr>
<tr>
<td>
Leo Bloom
</td>
</tr>
<tr>
<td>
Leo Bloom
</td>
</tr>
</table>
</body>
</div>
<h3 class="clears"></h3>
<div class="Blogs">
<div class="Blog1">
<head>
<h1> <span><time>2015-02-11</time></span>: Moose Day</h1>
</head>
<body>
<div class="theImg">
<img src="http://ia.media-imdb.com/images/M/MV5BMjE0ODk2NjczOV5BMl5BanBnXkFtZTYwNDQ0NDg4._V1_SY317_CR4,0,214,317_AL_.jpg" height="200" width="200">
</div>
<h2>
<div class="blogtext">
The moose (North America) or elk (Europe), Alces alces, is the largest extant species in the deer family. Moose are distinguished by the palmate antlers of the males; other members of the family have antlers with a dendritic ("twig-like") configuration. Moose typically inhabit boreal and mixed deciduous forests of the Northern Hemisphere in temperate to subarctic climates. Moose used to have a much wider range but hunting and other human activities greatly reduced it over the years. Moose have been reintroduced to some of their former habitats. Currently, most moose are found in Canada, Alaska, Scandinavia and Russia.
</div>
</h2>
</body>
</div>
<h3 class="clears"></h3>
<div class="Blog2">
<head>
<h1> <span><time>2015-03-11</time></span>: Second Moose Day</h1>
</head>
<body>
<div class="theImg">
<img src="http://ia.media-imdb.com/images/M/MV5BMjE0ODk2NjczOV5BMl5BanBnXkFtZTYwNDQ0NDg4._V1_SY317_CR4,0,214,317_AL_.jpg" height="200" width="200">
</div>
<h2>
<div class="blogtext">
Their diet consists of both terrestrial and aquatic vegetation. The most common moose predators are wolves, bears, and humans. Unlike most other deer species, moose are solitary animals and do not form herds. Although generally slow-moving and sedentary, moose can become aggressive and move surprisingly quickly if angered or startled. Their mating season in the autumn can lead to spectacular fights between males competing for a female.
</div>
</h2>
</body>
</div>
</div>
</div>
</html>
First, put <div class="Whole2"> inside the body.
Second, you only can have one <head> and one <body>. And I think that you are confounding <head> with <header>.
Related
I have a project and it was good before changing in style, but after adding shadow to the #container it gives me this message from the grader:
The trading card page has a list of new facts
Each fact should have a corresponding label: expected 4 to equal 8
What have I done wrong?
Here is the card.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Building the Prototype</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="container">
<h1>Panda</h1>
<!-- photo credit: wikipedia.org, image taken by Ritik -->
<img src="https://c402277.ssl.cf1.rackcdn.com/photos/18315/images/hero_full/Medium_WW230176.jpg?1576168323" alt="panda">
<div id="card" class="animal-info">
<p id="interesting-fact">Pandas live mainly in temperate forests high in the mountains of southwest China, where they subsist almost entirely on bamboo. They must eat around 26 to 84 pounds of it every day, depending on what part of the bamboo they are eating. They use their enlarged wrist bones that function as opposable thumbs.</p>
<ul id="facts">
<li>
<span class="lable">Scientific Name</span>: <span class="value">Ailuropoda melanoleuca</span>
</li>
<li>
<span class="lable">Average Length</span>: <span class="value">4 to 5 feet</span>
</li>
<li>
<span class="lable">Average Lifespan</span>: <span class="value">20 years</span>
</li>
<li>
<span class="lable">Habitat</span>: <span class="value">Eating in a relaxed sitting posture</span>
</li>
</ul>
<p id="summary">A newborn panda is about the size of a stick of butter—about 1/900th the size of its mother—but females can grow up to about 200 pounds, while males can grow up to about 300 pounds as adults. These bears are excellent tree climbers despite their bulk.
</p>
</div>
</div>
</body>
</html>
And here is the styles.css:
#container{
width: 513;
height: 796;
object-fit: contain;
border: 1px solid #e0e0e0;
box-shadow: 0 5px 5px 5px #e0e0e0;
padding: 20px;
font-family: sans-serif;
}
#container img {
width: 300px;
height: auto;
border: 1px solid #e0e0e0;
padding: 1px;
}
#container h1{
padding: 20px;
}
#card #interesting-fact {
font-style: italic;
}
.animal-info{
}
#facts .lable {
font-weight: bold;
}
#facts .value{
font-style: italic;
}
#card ul {
list-style-type: none;
}
#card {
border: 1px solid #e0e0e0;
padding: 20px;
}
Okay ..
I had to put the list values without the <span class="value"></span>
That's it :)
This is my html coding. When I run the webpage in firefox there is no color or formating at all it is just the info I entered. I tried typing the code differently and still does not work. I went into developer in firefox and the css does not show up, when I add it the webpage is formatted. How do I fix this so I do not need to go into developer to add the css everytime?
<!DOCTYPE html>
<html>
<head>
<title> Penn State Health St. Joseph Radiology Employee Reference</title>
<!-- Author: Brie Rennig -->
<!-- Date: 08/24/2016 -->
<link rel="stylesheet" type="text/css" href="rem.css">
</head>
<body>
<div id="wrapper">
<h1>
Penn State Health St. Joseph Radiology Employee Reference
</h1>
</div>
<nav>
<ul>
<li>Home</li>
<li>Workflow</li>
<li>Uniforms</li>
<li>Protocols</li>
<li>PACS</li>
<li>Resources</li>
<li>Students</li>
<li>About Us</li>
</ul>
</nav>
<main>
<center>
<img src="ps_health.jpg" id="ps_health">
</center>
<br>
<div id="Statement_Health">
<center>
<h2>
Mission Statement
</h2>
<!-- This text is emphasised as it is the mission statement for Penn State Health -->
<em>
The Mission of St. Joseph's is to nurture the healing ministry of the Church, supported by education and research. <br/>
Fidelity to the Gospel urges us to emphasize human dignity and social justice as we create healthier communities. <br/>
<br/>
</em>
</center>
</div>
<br/>
<div id="Prayer">
<h3>
Radiologic Technologist Prayer
</h3>
<em>
Almighty and merciful Lord, <br/>
I thank thee for giving me this day <br/>
That I may be able to serve my brethren.<br/>
<br/>
Thou give me a keen of mind, <br/>
To be able to formulate appropriate factor <br/>
Just enough kVp to penetrate <br/>
And mAs for density <br/>
To produce a good quality radiograph. <br/>
<br/>
Grant that I may also possess <br/>
A hand with a tender touch <br/>
That I may not intensify the suffering <br/>
as I position the patient.. <br/>
<br/>
Lastly Lord, let me wear a sweet smile, <br/>
And speak soft and pleasant words <br/>
which may sooth the afflicted <br/>
And that they may have confidence in me. <br/>
<br/>
For the honor and glory of Thy kingdom <br/>
Amen. <br/>
<br/>
</em>
</div>
<footer>
<ul>
<li>Home</li>
<li>Workflow</li>
<li>Uniforms</li>
<li>Protocols</li>
<li>PACS</li>
<li>Resources</li>
<li>Students</li>
<li>About Us</li>
</ul>
<br />
<p> <font face="algerian"> <font color= "#CCCCFF"> Posted by: Brianna Rennig </font> </p> </font>
<p> <font color= "#CCCCFF"> Contact Information: <a href="mailto:btr130#psu.edu">btr130#psu.edu</>.</font> </p>
Penn State Health St. Joseph
</footer>
</div>
</body>
</html>
and this is my CSS
body {
background: linear-gradient(to bottom, #f5f5f5, #0045cc);
}
#ps_health
{
}
#ballon_quote
{
border:5px;
border-style:ridge;
border-color:dark-blue;
width:60%;
height:50%;
}
#sms_MobileOnly
{
display: none;
}
#Statement_Health
{
margin-left: auto;
margin-right: auto;
width:90%;
border: 2px solid; black;
background-color: #CCCCFF;
}
#Prayer
{
margin-left: 25%;
margin-right: auto;
width:50%;
border: 2px solid; black;
background-color: #CCCCFF;
text-align: center;
}
footer ul
{
list-style-type: none;
}
footer li
{
display: inline;
}
footer a
{
text-decoration: none;
color: black;
}
nav ul
{
list-style-type: none;
}
nav a
{
text-decoration: none;
}
#wrapper
{
width: 80%;
margin-left: auto;
margin-right: auto;
background-color: #EAEAEA;
}
header
{
background-color: #CCCCFF;
margin-left: auto;
margin-right: auto;
width: 100%;
font-size: 24px;
font-family: Verdana;
font-weight: 900;
text-transform: uppercase;
text-align: center;
}
main
{
margin-left: 200px;
padding: 10px;
background-color: #FFFFFF;
font-family: Times New Roman ;
}
footer
{
text-align: center;
background-color: #CCCCFF;
margin-left: auto;
margin-right: auto;
width: 100%;
font-family: Verdana;
font-weight: 900;
text-transform: uppercase;
}
nav
{
float: left;
width: 250px;
}
I am trying to get my "more" links to all line up straight. I was wondering if I should make a separate div for them? Otherwise I don't really know what to do. I'm new at this so do not judge too harshly. Thank You! I added a jsfiddle but I know that I didn't properly do it...I hope you can just look at the code though. I'll add a picture of what I'm having problems with: https://jsfiddle.net/uxnLsxxk/
<div class="box1">
<div class="column-left">
<h2> Content</h2>
You can use good'old tables too
<table width="100%">
<tr>
<td>
<table width="100%">
<tr>
<td>
<h2> Content</h2>
</td>
</tr>
<tr>
<td>
<p>GCOM 366 is designed to teach intermediate web design. Building on the beginning
skills you’ve mastered in GCOM266, you will learn the current development tools
commonly used in front end web development. Subjects will include web hosting,
text editors such as the Atom, HTML, CSS, jQuery, Responsive Design, and UI/UX,
and Forms. You will learn through lectures, demonstrations, reading assignments,
and hands-on experiences. We will be working with a variety of materials, typically in a teaching presentation and assignments, with listed resources</p>
</td>
</tr>
<tr>
<td>
<a id="button1" href="about.css">More</a>
</td>
</tr>
</table>
</td>
<td>
<table width="100%">
<tr>
<td>
<h2> Objectives</h2>
</td>
</tr>
<tr>
<td>
<p>GCOM 366 is designed to teach intermediate web design. Building on the beginning
skills you’ve mastered in GCOM266, you will learn the current development tools
commonly used in front end web development. Subjects will include web hosting,
text editors such as the Atom, HTML, CSS, jQuery, Responsive Design, and UI/UX,
and Forms. You will learn through lectures, demonstrations, reading assignments,
and hands-on experiences. We will be working with a variety of materials, typically in a teaching presentation and assignments, with listed resources</p>
</td>
</tr>
<tr>
<td>
<a id="button1" href="about.css">More</a>
</td>
</tr>
</table>
</td>
<td>
<table width="100%">
<tr>
<td>
<h2> Project</h2>
</td>
</tr>
<tr>
<td>
<p>GCOM 366 is designed to teach intermediate web design. Building on the beginning
skills you’ve mastered in GCOM266, you will learn the current development tools
commonly used in front end web development. Subjects will include web hosting,
text editors such as the Atom, HTML, CSS, jQuery, Responsive Design, and UI/UX,
and Forms. You will learn through lectures, demonstrations, reading assignments,
and hands-on experiences. We will be working with a variety of materials, typically in a teaching presentation and assignments, with listed resources</p>
</td>
</tr>
<tr>
<td>
<a id="button1" href="about.css">More</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
Check the output in Jsbin
#media only screen and (min-width: 961px) {
/*-----CONTENT -----*/
figure.adjustable {
width: 29%;
}
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 100px; /* bottom = footer height */
font-family: 'Arapey', serif;
/*font-family: 'Courier New', sans-serif;*/
font-weight: 300;
font-size: 20px;
}
header {
position: fixed;
z-index: 1000;
width: 100%;
top: 0px;
text: black;
background-color:#670809;
height:70px;
text-align: center;
letter-spacing:1px;
line-height: 55px;
}
header, h1, h2{
font-family: 'Yatra One', cursive;
}
nav ul li a {
display:inline-block;
text-align: center;
padding: 1 px;
color: #fff;
letter-spacing: 1 px;
text-decoration:none;
text-transform: uppercase;
margin: .55em;
font-size: 5 px;
float: right;
}
nav ul li.active a {
/*background-color: none;*/
color: white;
}
nav ul li a:hover {
/*background-color:none;*/
color: white;
}
nav ul li a:visited {
color:white;
}
/* header tags */
h1 {
text-align: center;
color:#013397;
font-size: 40px;
margin: 5px;
}
h2{
text-align: center;
color:#670809;
font-size: 30px;
margin: 5px;
}
p{
text-align: center;
}
.column-left{
float: left;
width: 30%;
padding: 1%;
}
.column-right{
float: right;
width: 30%;
padding: 1%;
}
.column-center{
display: inline-block;
width: 30%;
padding: 1%;
}
section{
text-align: center;
width: 100%;
}
footer {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
margin: 0;
height: 50px;
background-color:#670809;
font-family: 'Yatra One', cursive;
/* text */
padding-left: 10px;
padding-top: 10px;
color: #ffffff;
font-size: 15px;
text-align:center;
}
a { color: white; }
a, a:hover, a:active, a:visited { color: white; }
.box1{
border-width:thick;
border-style:solid;
border-color:#287EC7;
}
#button1{
color:black;
float: left;
width: 30%;
padding: 1%;
font-weight:bold;
}
#button2{
color:black;
display: inline-block;
width: 30%;
padding: 1%;
font-weight:bold;
}
#button3{
float: right;
width: 30%;
padding: 1%;
color:black;
font-weight:bold;
}
.more{
position:relative;
left:-120px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<header>
Home
About
Contact
MSUM
</header>
<div id="content">
<!--msum logo-->
<figure class="stayssame">
<video controls loop poster="placeholder.png" autoplay>
<source src="video.mp4" type="video/mp4">
<!-- <source src="movie.ogg" type="video/ogg">-->
Your browser does not support the video tag.
</video>
</figure>
<object type="image/svg+xml" data="newsvg.svg" ></object>
<div class="video-txt" ></div>
<section>
<section>
<h1> GCOM 366 Overview</h1>
<div class="box1">
<div class="column-left">
<h2> Content</h2>
<img class="img" src="techpic4.jpg" alt="example web page" width="200" height="200" />
<p>GCOM 366 is designed to teach intermediate web design. Building on the beginning
skills you’ve mastered in GCOM266, you will learn the current development tools
commonly used in front end web development. Subjects will include web hosting,
text editors such as the Atom, HTML, CSS, jQuery, Responsive Design, and UI/UX,
and Forms. You will learn through lectures, demonstrations, reading assignments,
and hands-on experiences. We will be working with a variety of materials, typically in a teaching presentation and assignments, with listed resources.
<br>
<!-- <a id="button1" href="about.css">More</a>-->
</p>
</div>
<br>
<div class="column-center">
<h2>Objectives</h2>
<img class="img" src="techpic1.jpg" alt="html code" width="200" height="200" />
<p>Upon successful completion of the course the student will:
1) Demonstrate competency in the following computer software applications or
practices;
a. HyperText Markup Language (HTML5)
b. Cascading Style Sheets (CSS3)
c. Photoshop
d. IFirefox, Chrome, Safari, IE
e. FTP clients (Fetch, Filezilla, etc.)
2. Design web pages of various complexities.
3. Understand terminology used in web publishing.
4. Discuss the importance of graphic applications and their relationship to the graph
-
ic communications industry.
<br>
<!--<a id="button2" href="contact.css">More</a>-->
</p>
</div>
<div class="column-right">
<h2> Project</h2>
<img class="img" src="techpic2.jpg" alt="keyboard" width="200" height="200" />
<p>The course centers around weekly projects that will feed into the development of a
final project. A website must a have a clear purpose and established brand students will develop their plan for this, and execute it with skills learned in the class.
The website must be well organized, competitively designed, and skillfully coded
<br>
<a id="button3" href="msum.css" class="more">More</a>
</p>
</div>
</section>
</div>
<footer>
</footer>
</body></html>
</body>
</html>
This code should do it.
HTML
<div class="text-container">
<p class="overview-text">
... your text ...
</p>
<div class="more-link">
More
</div>
</div>
CSS
.overview-text, .more-link {
text-align: center;
}
Place the HTML after the img tags.
Set min-height for overview-text class. And i hope it will fix your issue. for example
CSS:
.overview-text{
min-height: 200px
}
At: http://www.fmancoding.com their is a section under "featured game of the week" that displays all the games, then the title and description of it. It looks exactly what I would like it to, except on a mobile device. On a mobile device the images are being tabbed in and touching each other.
Does anyone know why this is happening? I have breaks inbetween each div and I believe div's automatically are created on a new line, like a paragraph. Also, I added padding and margin to see if this would fix the problem, but it did not.
HTML:
<html>
<head>
<link href="Styles.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="Javascript.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<title>Fman Coding</title>
</head>
<body>
<center id="headerBox">
<h1 id="header">Welcome To Fman Coding</h1>
<h2 id="header">Most Games Are Mobile Friendly, And Can Be Used Offline!</h2>
</center>
<div id="MG">
<div id="FG">
<p id="ft">This Week's Featured Game!</p>
<img src="Games/Murderer.jpeg" width="100%" height="30%" alt="Miji">
<!-- Game Name & Description -->
<p id="FGD">Miji! Input Your Number Of Players And It Will Automatically Generate Everyone's Job!</p>
</div>
<div id="gLibrary">
<!-- Games -->
<div id="gameFrame"><img id="float" src="Games/Murderer.jpeg" width="15%" height="15%"><br/>
<h4 id="gameTitle">Miji</h4>
<span id="desc">This game auto selects your positions based on the number of people playing!</span>
</div>
<!-- Next Game -->
<br/>
<!-- Next Game -->
<div id="gameFrame"><img id="float" src="Games/RPS.jpg" width="15%" height="15%"><br/>
<h4 id="gameTitle">Rock, Paper, Scissors</h4>
<span id="desc">You can play Rock, Paper, Scissors, Shoot against a computer!</span>
</div>
<!-- Next Game -->
<br/>
<!-- Next Game -->
<div id="gameFrame"><img id="float" src="MC/Click.jpg" width="15%" height="15%"><br/>
<h4 id="gameTitle">Minecraft Player Finder</h4>
<span id="desc">Create groups for certain games and find players to play, or help you build stuff!</span>
</div>
</div>
</div>
</body>
</html>
CSS:
#header{
text-align: center;
color: aqua;
}
#headerBox{
border: 1px black solid;
margin: 0px;
padding-top: 0px;
padding-bottom: 0px;
background-image: url('matrixCode.jpeg');
}
#gLibrary{
color: #989898;
margin: 15px;
display: inline;
}
#gLibrary p a{
text-decoration: none;
color: aqua;
display: inline;
}
#FG{
border: 3px gold solid;
}
#FGD{
color: red;
text-align: center;
}
#MG{
border: 1px purple solid;
background-color: #333;
}
#ft{
text-align: center;
font-size: 16px;
background-color: #333;
color: red;
}
#gameTitle{
color: aqua;
}
#float{
float: left;
}
#desc{
color: crimson;
}
#gameFrame{
margin-top: 1%;
margin-bottom: 1%;
padding-top: 1%;
padding-bottom: 1%;
}
Just found out this solution in wordpress by Tobiasbg.
The cause for this basically is that your theme is hiding all HTML tags (using display: none;) in it’s CSS file.
You can either correct it in the theme's CSS file or give ,
br{
display:block !important;
}
if you want only specific div's br to be shown give the div's class name prior to br in thre above code.
#gLibrary should be displayed as block, not inline :
#gLibrary{
color: #989898;
margin: 15px;
display: block;
}
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>