This is my first time making a website and I can't seem to get my bookmark link "upcoming events" to work in my other page. It only works in the home page. Here is the code in my home page:
<nav>
<b>
Home
Rides
Info
Order
Upcoming Events
Related News
</b>
</nav>
<hr>
<h2>About Us</h2>
<p>Fun is always in season at Busch Gardens ® Williamsburg in Virginia. From thrilling coasters and kid-friendly attractions to world-class dining and shows, there’s something for the whole family.<br>
Busch Gardens is one of the my favorite amusment parks because of their setup. It's wonderful to be in the 'Germany' part of the park in one moment and then the "Roman" part the next! </p>
<hr>
<h3 id="UpcomingEvents">Upcoming Events</h3>
<p>Das Festhaus: March 31<br>
Britmania: June 30<br>
Summer Nights: July 1 - August 31<br>
Howl-O-Scream: September 23 - October 29</p>
<hr>
<h4 id="RelatedNews">Related Park News</h4>
<!-- include your links here -->
<p>Food and Wine Festival</p>
<p>Kidsiderate</p>
<p>Christmas Town</p>
And this is the code for my order page:
Home
Rides
Info
Order
Upcoming Events
Related News
<hr>
<h2>Order Information</h2>
<p>Our online ordering page is down currently. Please check back later in a few weeks.</p>
</body>
Based on the information you provided, the link on the non-working html should be changed to:
Upcoming Events
Related
How do you fix the size of the image in this code?
If you see it in my project,this is coming just in the middle of my footer,between the instagram icon nd my h6.
I also would like to ask some tips for the title,I find it bit boring,could you help me with this please guys!
How do you fix the size of the image in this code?
If you see it in my project,this is coming just in the middle of my footer,between the instagram icon nd my h6.
I also would like to ask some tips for the title,I find it bit boring,could you help me with this please guys!
<!DOCTYPE html>
<html>
<head>
<title>This is London</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=ZCOOL+XiaoWei&display=swap" rel="stylesheet">
</head>
<body>
<div id="nav">
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>Getting around</li>
<li>About</li>
<li>Contact</li>
</ul>
</div> <!-- End of nav -->
<div id="header">
<div id="header-text">
<h2>
Visiting London has never been easier with these ideas.
</h2>
<p>The capital of the United Kingdom is a thriving multicultural metropolis. The contrast between the spectacular historic sights and the lively cultural scene makes a visit to London an interesting and exciting adventure. </p>
</div> <!-- End of header-text -->
</div> <!-- End of header -->
<div id="middle">
<div id="mid-text">
<h1>- Getting around in London -</h1>
<h5>One of the world's most visited cities, London has something for everyone: from history and culture to fine food and good times.</h5>
<p>Immersed in history, London's rich seams of eye-opening antiquity are everywhere. The city's buildings are striking milestones in a unique and beguiling biography, and a great many of them – the Tower of London, Westminster Abbey, Big Ben – are instantly recognisable landmarks. There’s more than enough innovation (the Shard, the Tate Modern extension, the Sky Garden) to put a crackle in the air, but it never drowns out London’s seasoned, centuries-old narrative. Architectural grandeur rises up all around you in the West End, ancient remains dot the City and charming pubs punctuate the historic quarters, leafy suburbs and river banks. Take your pick.
Art & Culture
A tireless innovator of art and culture, London is a city of ideas and the imagination. Londoners have always been fiercely independent thinkers (and critics), but until not so long ago people were suspicious of anything they considered avant-garde. That’s in the past now, and the city’s creative milieu is streaked with left-field attitude, whether it's theatrical innovation, contemporary art, pioneering music, writing, poetry, architecture or design. Food is another creative arena that has become a tireless obsession in certain circles.
Diversity
This city is deeply multicultural, with one in three Londoners foreign-born, representing 270 nationalities and 300 tongues. The UK may have voted for Brexit (although the majority of Londoners didn't), but for now London remains one of the world's most cosmopolitan cities, and diversity infuses daily life, food, music and fashion. It even penetrates intrinsically British institutions; the British Museum and Victoria & Albert Museum have collections as varied as they are magnificent, while the flavours at centuries-old Borough Market run the full global gourmet spectrum.
A Tale of Two Cities
London is as much about wide-open vistas and leafy landscape escapes as it is high-density, sight-packed urban exploration. Central London is where the major museums, galleries and most iconic sights congregate, but visit Hampstead Heath or the Queen Elizabeth Olympic Park to flee the crowds and frolic in wide open green expanses. You can also venture further out to Kew Gardens, Richmond or Hampton Court Palace for beautiful panoramas of riverside London followed by a pint in a quiet waterside pub.</p>
<div id="img-mid">
<a href="https://goo.gl/maps/PSDhvQ25fRZBqWHC8" target="_blank">
<img src="images/Feature-images.jpg" alt="Map">
</a>
</div><!-- End of img-mid -->
</div> <!-- End of mid-text -->
</div> <!-- End of middle -->
<div id="footer">
<div class="credits">
<div class="credits_left">
<h6> Designed by Alba Heidari</h6>
</div>
<div class="credits_right"><img src="https://www.arct.cam.ac.uk/images/instagram-icon/image" class="social_icon">
</div>
</div> <!-- End of footer -->
</body>
</html>
Add this to your css file:
#img-mid{
height: 300px;
width: 300px;
}
#img-mid img{
max-width: 100%;
max-height: 100%;
min-height: 100%;
min-width: 100%;
object-fit: cover;
}
hi so iv been writing html for a website and was wondering if there is anyway someone could help me im trying to get my 2 sections " early history" and " european adoption" side by side above " modern cards " any recommendations? i dont know how to position them like this any help would be greatly appreciated
<!DOCTYPE html>
<html>
<head>
<title>History</title>
<link rel="stylesheet" type="text/css" href="../CSS/styles.css">
<style>
section {
margin: 10px
}
</style>
</head>
<body>
<!-- Page Header -->
<header>
<img class="imageBannerLeft" src="../images/bannerCardsLeft.png">
<img class="imageBannerRight" src="../images/bannerCardsRight.png">
<h1>Playing Cards</h1>
</header>
<!-- Navigation Bar -->
<nav>
<ul>
<li>Home</li>
<li>History</li>
<li>Multi-player</li>
<li>Single-player</li>
<li>Free Cards</li>
</ul>
</nav>
<!-- The main content of the page -->
<main>
<section>
<h2>Early history</h2>
<p>The first playing cards are recorded as being invented in China around the 9th century AD by the Tang dynasty author Su E who writes about the card game "leaf" in the text Collection of Miscellanea at Duyang. The text describes Princess Tongchang,
daughter of Emperor Yizong of Tang, playing leaf in 868AD with members of the family of the princess' husband.</p>
<p>The mass production of Cards became possible following the invention of wooden printing block technology. Early Chinese packs contained 30 cards with no suits.</p>
<p>The first cards may have doubled as actual paper currency being both the tools of gaming and the stakes being played for. This is similar to modern trading card games. Using paper money was inconvenient and risky so they were substituted by play
money known as "money cards".</p>
<p>The earliest dated instance of a game involving cards with suits and numerals occurred on 17 July 1294.</p>
</section>
<section>
<h2>European Adoption</h2>
<p>The first four-suited playing cards appeared in Europe in 1365. They are thought to originate from traditional latin decks whose suits included: cups, coins, swords, and polo-sticks. As Polo was not yet a European game, polo sticks became batons
(or cudgels). Wide use of playing cards is recorded from 1377 onwards.</p>
<p>Professional card makers in Ulm, Nuremberg, and Augsburg created printed decks. Playing cards even competed with devotional images as the most common uses for woodcuts in this period. These 15th-century playing cards were probably painted.</p>
<p>The Flemish Hunting Deck, held by the Metropolitan Museum of Art is the oldest complete set of ordinary playing cards made in Europe.</p>
<p>Cards were adapted in Europe to contain members of the royal court and by the 15th Century French and English packs of 56 cards contain the King, Queen and Knave cards.</p>
</section>
<section>
<img class="imageCardsRight" src="../images/germanPlayingCards.jpg">
<h2>Modern Cards</h2>
<p>Contemporary playing cards are grouped into three broad categories based on the suits they use: French, Latin, and Germanic. Latin suits are used in the closely related Spanish and Italian formats. The Swiss-German suits are distinct enough to merit
their subcategory. Excluding Jokers and Tarot trumps, the French 52-card deck preserves the number of cards in the original Mamluk deck, while Latin and Germanic decks average fewer.</p>
<p>Within suits, there are regional or national variations called "standard patterns" because they are in the public domain, allowing multiple card manufacturers to copy them. Pattern differences are most easily found in the face cards but the number
of cards per deck, the use of numeric indices, or even minor shape and arrangement differences of the pips can be used to distinguish them. Some patterns have been around for hundreds of years. Jokers are not part of any pattern as they are a
relatively recent invention and lack any standardized appearance so each publisher usually puts their own trademarked illustration into their decks. </p>
</section>
</main>
<!-- Page Footer -->
<footer>
<p> © Card Foundation <br> 2017 <br> Please provide feedback to: jlongridge#jlinternet.co.uk </p>
</footer>
</body>
</html>
Add a class to the first two sections and assign these rules to it:
.myClass {
display: inline-block;
width: 50%;
}
This will put them next to each other. Of course, if there are other factors that influence their width, you have to take that into account (and, for example, reduce the width accordingly)
You're looking for something along this lines, I think:
<!DOCTYPE html>
<html>
<head>
<title>History</title>
<style>
#parent {
float: left;
}
#parent section {
width: 45%;
float: left;
margin:10px
}
</style>
</head>
<body>
<!-- Page Header -->
<header>
<img class="imageBannerLeft" src="../images/bannerCardsLeft.png">
<img class="imageBannerRight" src="../images/bannerCardsRight.png">
<h1>Playing Cards</h1>
</header>
<!-- Navigation Bar -->
<nav>
<ul>
<li>Home</li>
<li>History</li>
<li>Multi-player</li>
<li>Single-player</li>
<li>Free Cards</li>
</ul>
</nav>
<!-- The main content of the page -->
<main>
<section id="parent">
<section>
<h2>Early history</h2>
<p>The first playing cards are recorded as being invented in China around the 9th century AD by the Tang dynasty author Su E who writes about the card game "leaf" in the text Collection of Miscellanea at Duyang. The text describes Princess Tongchang,
daughter of Emperor Yizong of Tang, playing leaf in 868AD with members of the family of the princess' husband.</p>
<p>The mass production of Cards became possible following the invention of wooden printing block technology. Early Chinese packs contained 30 cards with no suits.</p>
<p>The first cards may have doubled as actual paper currency being both the tools of gaming and the stakes being played for. This is similar to modern trading card games. Using paper money was inconvenient and risky so they were substituted by
play money known as "money cards".</p>
<p>The earliest dated instance of a game involving cards with suits and numerals occurred on 17 July 1294.</p>
</section>
<section>
<h2>European Adoption</h2>
<p>The first four-suited playing cards appeared in Europe in 1365. They are thought to originate from traditional latin decks whose suits included: cups, coins, swords, and polo-sticks. As Polo was not yet a European game, polo sticks became batons
(or cudgels). Wide use of playing cards is recorded from 1377 onwards.</p>
<p>Professional card makers in Ulm, Nuremberg, and Augsburg created printed decks. Playing cards even competed with devotional images as the most common uses for woodcuts in this period. These 15th-century playing cards were probably painted.</p>
<p>The Flemish Hunting Deck, held by the Metropolitan Museum of Art is the oldest complete set of ordinary playing cards made in Europe.</p>
<p>Cards were adapted in Europe to contain members of the royal court and by the 15th Century French and English packs of 56 cards contain the King, Queen and Knave cards.</p>
</section>
</section>
<section>
<img class="imageCardsRight" src="../images/germanPlayingCards.jpg">
<h2>Modern Cards</h2>
<p>Contemporary playing cards are grouped into three broad categories based on the suits they use: French, Latin, and Germanic. Latin suits are used in the closely related Spanish and Italian formats. The Swiss-German suits are distinct enough to
merit their subcategory. Excluding Jokers and Tarot trumps, the French 52-card deck preserves the number of cards in the original Mamluk deck, while Latin and Germanic decks average fewer.</p>
<p>Within suits, there are regional or national variations called "standard patterns" because they are in the public domain, allowing multiple card manufacturers to copy them. Pattern differences are most easily found in the face cards but the number
of cards per deck, the use of numeric indices, or even minor shape and arrangement differences of the pips can be used to distinguish them. Some patterns have been around for hundreds of years. Jokers are not part of any pattern as they are
a relatively recent invention and lack any standardized appearance so each publisher usually puts their own trademarked illustration into their decks. </p>
</section>
</main>
<!-- Page Footer -->
<footer>
<p> © Card Foundation <br> 2017 <br> Please provide feedback to: jlongridge#jlinternet.co.uk </p>
</footer>
</body>
</html>
I've wrapped your sections in another section (parent) and just adapted the CSS code a little bit.
I've put width:45% so you can keep your margin:10px. Otherwise I would probably have set width:50%
Try using display:flex; on parent div
main {
display: flex;
width: 100%;
}
<!DOCTYPE html>
<html>
<head>
<title>History</title>
<link rel="stylesheet" type="text/css" href="../CSS/styles.css">
</head>
<body>
<!-- Page Header -->
<header>
<img class="imageBannerLeft" src="../images/bannerCardsLeft.png">
<img class="imageBannerRight" src="../images/bannerCardsRight.png">
<h1>Playing Cards</h1>
</header>
<!-- Navigation Bar -->
<nav>
<ul>
<li>Home</li>
<li>History</li>
<li>Multi-player</li>
<li>Single-player</li>
<li>Free Cards</li>
</ul>
</nav>
<!-- The main content of the page -->
<main>
<section>
<h2>Early history</h2>
<p>The first playing cards are recorded as being invented in China around the 9th century AD by the Tang dynasty author Su E who writes about the card game "leaf" in the text Collection of Miscellanea at Duyang. The text describes Princess Tongchang,
daughter of Emperor Yizong of Tang, playing leaf in 868AD with members of the family of the princess' husband.</p>
<p>The mass production of Cards became possible following the invention of wooden printing block technology. Early Chinese packs contained 30 cards with no suits.</p>
<p>The first cards may have doubled as actual paper currency being both the tools of gaming and the stakes being played for. This is similar to modern trading card games. Using paper money was inconvenient and risky so they were substituted by play
money known as "money cards".</p>
<p>The earliest dated instance of a game involving cards with suits and numerals occurred on 17 July 1294.</p>
</section>
<section>
<h2>European Adoption</h2>
<p>The first four-suited playing cards appeared in Europe in 1365. They are thought to originate from traditional latin decks whose suits included: cups, coins, swords, and polo-sticks. As Polo was not yet a European game, polo sticks became batons
(or cudgels). Wide use of playing cards is recorded from 1377 onwards.</p>
<p>Professional card makers in Ulm, Nuremberg, and Augsburg created printed decks. Playing cards even competed with devotional images as the most common uses for woodcuts in this period. These 15th-century playing cards were probably painted.</p>
<p>The Flemish Hunting Deck, held by the Metropolitan Museum of Art is the oldest complete set of ordinary playing cards made in Europe.</p>
<p>Cards were adapted in Europe to contain members of the royal court and by the 15th Century French and English packs of 56 cards contain the King, Queen and Knave cards.</p>
</section>
</main>
<section>
<img class="imageCardsRight" src="../images/germanPlayingCards.jpg">
<h2>Modern Cards</h2>
<p>Contemporary playing cards are grouped into three broad categories based on the suits they use: French, Latin, and Germanic. Latin suits are used in the closely related Spanish and Italian formats. The Swiss-German suits are distinct enough to merit
their subcategory. Excluding Jokers and Tarot trumps, the French 52-card deck preserves the number of cards in the original Mamluk deck, while Latin and Germanic decks average fewer.</p>
<p>Within suits, there are regional or national variations called "standard patterns" because they are in the public domain, allowing multiple card manufacturers to copy them. Pattern differences are most easily found in the face cards but the number
of cards per deck, the use of numeric indices, or even minor shape and arrangement differences of the pips can be used to distinguish them. Some patterns have been around for hundreds of years. Jokers are not part of any pattern as they are a
relatively recent invention and lack any standardized appearance so each publisher usually puts their own trademarked illustration into their decks. </p>
</section>
<!-- Page Footer -->
<footer>
<p> © Card Foundation <br> 2017 <br> Please provide feedback to: jlongridge#jlinternet.co.uk </p>
</footer>
</body>
</html>
You could also try the css grid. It's very powerful in terms of building complex grid layout.
Documentation
.parentDiv {
display: grid;
}
.firstChild {
grid-column: 1;
background-color: yellow;
}
.secondChild {
grid-column: 2;
background-color: lime;
}
<div class="parentDiv">
<div class="firstChild">
Column 1
</div>
<div class="secondChild">
Column 2
</div>
</div>
I deleted footer code from the HTML file. However, when I run the HTML file, I still see the footer being displayed in the browser.
Could this be because I did not clear the web browser cache?
Please find below the HTML file and screenshot of web browser:
HTML file
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Charles Darwin - biography</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<link href='https://fonts.googleapis.com/css?family=Slabo+27px' rel='stylesheet' type='text/css'>
<link type="text/css" rel="stylesheet" href="Darwin.css"/>
</head>
<body>
<header>
<h1>Charles Darwin</h1>
<h3>(biography)</h3>
</header>
<section class="container">
<section class="jumbotron">
<div class="row">
<figure class="col-sm-5 сol-sm-7">
<img class="img-responsive center-block" src="image/Charles-Darwin.jpg" alt="CharlesDarwin" />
<figcaption>Biologist, Scientist (1809–1882)</figcaption>
<p class="desc">
<span class="dec3"> QUICK FACTS </span> <br><br>
<span class="dec"> FULL NAME </span> <br>
<span class="dec2">Charles Robert Darwin </span> <br>
<span class="dec"> BIRTH DATE </span> <br>
<span class="dec2">February 12, 1809 </span> <br>
<span class="dec"> DEATH DATE </span> <br>
<span class="dec2">April 19, 1882 </span> <br>
<span class="dec"> PLACE OF BIRTH </span> <br>
<span class="dec2">Shrewsbury, England </span> <br>
<span class="dec"> PLACE OF DEATH </span> <br>
<span class="dec2">Downe, England </span> <br>
<span class="dec"> EDUCATION </span> <br>
<span class="dec2">University of Edinburgh, Cambridge </span> </p>
</figure>
<figure>
<p><b>Synopsis</b></p>
<p>Naturalist Charles Darwin was born in Shrewsbury, England, on February 12, 1809. In 1831, he embarked on a five-year survey voyage around the world on the HMS Beagle. His studies of specimens around the globe led him to formulate his theory of evolution and his views on the process of natural selection. In 1859, he published On the Origin of Species. He died on April 19, 1882, in London.</p>
<blockquote class="blockquote-reverse"><i>“A man who dares to waste one hour of time has not discovered the value of life.”
<br>-Charles Darwin</i></blockquote>
<p><b>Early Life</b></p>
<p>Naturalist Charles Robert Darwin was born on February 12, 1809, in the tiny merchant town of Shrewsbury, England. He was the second youngest of six children. Darwin came from a long line of scientists. His father, Dr. R.W. Darwin, was as a medical doctor, and his grandfather, Dr. Erasmus Darwin, was a renowned botanist. Darwin’s mother, Susanna, died when he was only 8 years old. Darwin was a child of wealth and privilege who loved to explore nature.In October 1825, at age 16, Darwin enrolled at Edinburgh University along with his brother Erasmus. Two years later, Charles Darwin became a student at Christ's College in Cambridge. His father hoped he would follow in his footsteps and become a medical doctor, but the sight of blood made Darwin queasy. His father suggested he study to become a parson instead, but Darwin was far more inclined to study natural history.</p> <br>
<p><b>Voyage on the HMS Beagle</b></p>
<p>While Darwin was at Christ's College, botany professor John Stevens Henslow became his mentor. After Darwin graduated Christ's College with a bachelor of arts degree in 1831, Henslow recommended him for a naturalist’s position aboard the HMS Beagle. The ship, commanded by Captain Robert FitzRoy, was to take a five-year survey trip around the world. The voyage would prove the opportunity of a lifetime for the budding young naturalist.
<br>
On December 27, 1831, the HMS Beagle launched its voyage around the world with Darwin in tow. Over the course of the trip, Darwin collected a variety of natural specimens, including birds, plants and fossils. Through hands-on research and experimentation, he had the unique opportunity to closely observe principles of botany, geology and zoology. The Pacific Islands and Galapagos Archipelago were of particular interest to Darwin, as was South America.
<br>
Upon his return to England in 1836, Darwin began to write up his findings in the Journal of Researches, published as part of Captain FitzRoy's larger narrative and later edited into the Zoology of the Voyage of the Beagle. The trip had a monumental affect on Darwin’s view of natural history. He began to develop a revolutionary theory about the origin of living beings that was contrary to the popular view of other naturalists at the time.</p>
<p><b>Theory of Evolution</b></p>
<p>Darwin's exposure to specimens all over the globe raised important questions. Other naturalists believed that all species either came into being at the start of the world, or were created over the course of natural history. In either case, the species were believed to remain much the same throughout time. Darwin, however, noticed similarities among species all over the globe, along with variations based on specific locations, leading him to believe that they had gradually evolved from common ancestors. He came to believe that species survived through a process called "natural selection," where species that successfully adapted to meet the changing requirements of their natural habitat thrived, while those that failed to evolve and reproduce died off.</p>
<br>
<p>In 1858, after years of further scientific investigation, Darwin publically introduced his revolutionary theory of evolution in a letter read at a meeting of the Linnean Society. On November 24, 1859, he published a detailed explanation of his theory in his best-known work, <i> On the Origin of Species by Means of Natural Selection.</i></p>
<p><b>Death and Legacy</b></p>
<p>Following a lifetime of devout research, Charles Darwin died at his family home, Down House, in London, on April 19, 1882, and was buried at Westminster Abbey. During the next century, DNA studies revealed evidence of his theory of evolution, although controversy surrounding its conflict with Creationism—the religious view that all of nature was born of God—still abounds today.</p>
</figure>
<div class="row">
<figure class="col-sm-3 col-sm-6 col-sm-3 ">
</figure>
<figure class="col-sm-6">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" width="100%" height="100%" src="https://www.youtube.com/embed/A0VnuhHq5m0" frameborder="0" allowfullscreen></iframe>
</div>
</figure>
</div>
</section>
</section>
</body>
</html>
Screenshot of the HTML file as rendered in the web browser
If I have a two column layout
<div class="row">
<div class="large-8 push-4 columns">main content</div>
<div class="large-4 pull-8 columns">side nav</div>
</div>
If i have the below content in the main content div:
Introduction Text
Memorial Day is a US federal holiday wherein the men and women who died while serving in the United States Armed Forces are remembered.[1] The holiday, which is celebrated every year on the final Monday of May,[2] was formerly known as Decoration Day and originated after the American Civil War to commemorate the Union and Confederate soldiers who died in the Civil War. By the 20th century, Memorial Day had been extended to honor all Americans who have died while in the military service. It typically marks the start of the summer vacation season, while Labor Day marks its end.
History of the holiday
The practice of decorating soldiers' graves with flowers is an ancient custom.[5] Soldiers' graves were decorated in the U.S. before[6] and during the American Civil War. A claim was made in 1906 that the first Civil War soldier's grave ever decorated was in Warrenton, Virginia, on June 3, 1861, implying the first Memorial Day occurred there.[7] Though not for Union soldiers, there is authentic documentation that women in Savannah, Georgia, decorated Confederate soldiers' graves in 1862.[8] In 1863, the cemetery dedication at Gettysburg, Pennsylvania, was a ceremony of commemoration at the graves of dead soldiers. Local historians in Boalsburg, Pennsylvania, claim that ladies there decorated soldiers' graves on July 4, 1864.[9] As a result, Boalsburg promotes itself as the birthplace of Memorial Day.
Should the Introduction Text and the History of the holiday section each be in it's own row and column or should I be using the semantic tags? See below example:
<div class="row">
<div class="large-8 push-4 columns">
<div class="row">
<div class="large-12 columns">Introduction text and next paragraph</div>
</div>
<div class="row">
<div class="large-12 columns">History of the holiday and next paragraph</div>
</div>
</div>
</div>
<div class="row">
<div class="large-8 push-4 columns">
<section>
<div>Introduction text and next paragraph</div>
</section>
<section>
<div>History of the holiday and next paragraph</div>
</section>
</div>
</div>
According to the spec a section might be a little more semantic in this situation as you could want each section listed as a part of the document's outline. However, if you're just wrapping them for styling, a div is a better choice.
From the spec:
The section element represents a generic document or application section…The section element is not a generic container element. When an element is needed only for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element’s contents would be listed explicitly in the document’s outline.
I have two aside tags. One aside tag needs to be floated to the right, the other needs to be floated the left. They're both on the correct sides but the section won't let the asides go next to it, they are still below it.
Here's the html:
http://pastebin.com/BHtdYZfD
Here's the css:
http://pastebin.com/jhfLNNfS
Maybe, I left something out in the code. Any help would be greatly appreciated!
Here you go: just change the HTML-code a little bit like this:
<header>
<img src="town_hall_logo.gif" alt="Town Hall logo" height="80">
<hgroup>
<h1>San Joaquin Valley Town Hall</h1>
<h2>Celebrating our <span class="shadow">75<sup>th</sup></span> Year</h2>
</hgroup>
</header>
<aside class="aside2">
<h1>Event change for November 16</h1>
<p>SJV Town Hall is pleased to announce the addition of award-winning author Andrew Ross Sorkin.
The appearance of previously scheduled speaker, Greg Mortenson, has been postponed.</p>
</aside>
<aside>
<h1 id="speakers">2011-2012 Speakers</h1>
<h2>October 19, 2011<br>Jeffrey Toobin</h2>
<img src="toobin75.jpg" alt="Jeffrey Toobin photo">
<h2>November 16, 2011<br>Andrew Ross Sorkin</h2>
<img src="sorkin75.jpg" alt="Andrew Ross Sorkin photo">
<h2>January 18, 2012<br>Amy Chua</h2>
<img src="chua75.jpg" alt="Amy Chua photo">
<h2>February 15, 2012<br>Scott Sampson</h2>
<img src="sampson75.jpg" alt="Scott Sampson">
</aside>
<section>
<h1>Our Mission</h1>
<p>San Joaquin Valley Town Hall is a non-profit organization that is run by an all-volunteer board of directors. Our mission is to bring nationally and internationally renowned, thought-provoking speakers who inform, educate, and entertain our audience! As one or our members told us:</p>
<blockquote>“Each year I give a ticket package to each of our family members. I think of it as the gift of knowledge...and that is priceless.”</blockquote>
<h1>Speaker of the Month</h1>
<article>
<h1>Fossil Threads in the Web of Life</h1>
<img src="sampson_dinosaur.jpg" alt="Scott Sampson with Dinosaur">
<h2>February 15, 2012<br>Scott Sampson</h2>
<p>What's 75 million years old and brand spanking new? A teenage Utahceratops! Come to the Saroyan, armed with your best dinosaur roar, when Scott Sampson, Research Curator at the Utah Museum of Natural History, steps to the podium. Sampson's research has focused on the ecology and evolution of late Cretaceous dinosaurs and he has conducted fieldwork in a number of countries in Africa.</p>
<p>Read more. <b>Or meet us there!</b></p>
</article>
<h1>Our Ticket Packages</h1>
<ul>
<li>Season Package: $95</li>
<li>Patron Package: $200</li>
<li>Single Speaker: $25</li>
</ul>
</section><footer>
<p>© 2012, San Joaquin Valley Town Hall, Fresno, CA 93755</p>
</footer>
</body>
and then remove those CSS rules in section:
clear: left;
clear: both;