CSS help needed.. *(HTML file provided below) <!DOCTYPE html> <html> <head lang=
ID: 3789673 • Letter: C
Question
CSS help needed..
*(HTML file provided below)
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>COSC 360 Lab 4</title>
<link rel="stylesheet" href="lab4.css" />
</head>
<body>
<header id="masthead">
<h1>Travel Posts from Web Dev</h1>
</header>
<div id="main">
<article id="right-sidebar">
<p>Bacon ipsum dolor sit amet kielbasa officia ribeye tri-tip sausage, swine salami occaecat biltong. Strip steak shoulder rump swine sunt commodo turducken sint eu ut kielbasa meatball duis. Do chicken laboris officia ut. </p>
<p>Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular.
</p>
</article>
<article id="center">
<h1>Robert Paulson's Travel Posts</h1>
<div class="entry">
<figure>
<img src="images/travel/9498358806.jpg" alt="" />
<figcaption>Florence</figcaption>
<img src="images/travel/new-banner.png" alt="" class="overlayed"/>
</figure>
<div>
<h2>Florence Tour</h2>
<p>Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues. It va esser tam simplic quam Occidental in fact, it va esser Occidental.</p>
<div class="right">
<a href="#" class="linkbutton">Read More</a>
</div>
</div>
</div>
<div class="entry">
<figure>
<img src="images/travel/9504449928.jpg" alt="" />
<figcaption>Florence</figcaption>
</figure>
<div>
<h2>Lovin' Tuscany</h2>
<p>Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar custosi traductores. At solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles.</p>
<div class="right">
<a href="#" class="linkbutton">Read More</a>
</div>
</div>
</div>
<div class="entry">
<figure>
<img src="images/travel/9494472443.jpg" alt="" />
<figcaption>Venice</figcaption>
<img src="images/travel/new-banner.png" alt="" class="overlayed"/>
</figure>
<div>
<h2>Love in Venezia</h2>
<p><p>Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules.</p>
<div class="right">
<a href="#" class="linkbutton">Read More</a>
</div>
</div>
</div>
</article>
</div>
<footer>
<div class="footer-related">
<h2>Related Posts</h2>
<div>
<img src="images/travel/tiny/9495574327.jpg" /><img src="images/travel/tiny/9496787858.jpg" /><img src="images/travel/tiny/9502740177.jpg" /><img src="images/travel/tiny/9504609042.jpg" /><img src="images/travel/tiny/9505536014.jpg" /><br/>
<img src="images/travel/tiny/9505893300.jpg" /><img src="images/travel/tiny/8710247776.jpg" /><img src="images/travel/tiny/8710320515.jpg" /><img src="images/travel/tiny/9494282329.jpg" /><img src="images/travel/tiny/9494464567.jpg" />
</div>
</div>
<div class="footer-section">
<h2>About Us</h2>
<p>Bacon ipsum dolor sit amet kielbasa officia ribeye tri-tip sausage, swine salami occaecat biltong. Strip steak shoulder rump swine sunt commodo turducken sint eu ut kielbasa meatball duis. Do chicken laboris officia ut. </p>
<p>Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular.</p>
<p>© Copyright 2017 Company X
</div>
</footer>
</body>
</html>
Explanation / Answer
<!DOCTYPE html>
<html>
<head>
<style>
header {
padding:1em;
color: black;
background-color: #f5f5f5;
clear: left;
text-align: center;
}
.column {
float: left;
padding: 15px;
}
aside {
float: left;
max-width: 160px;
margin: 10;
padding: 1em;
background-color: #f5f5f5;
clear: left;
}
article {
margin-left: 170px;
padding: 1em;
overflow: hidden;
}
.footer {
background-color: grey;
color: white;
padding: 15px;
clear: left;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>Travel Posts from Web Dev</h1>
</header>
<div>
<aside>
<p>Bacon ipsum dolor sit amet kielbasa officia ribeye tri-tip sausage, swine salami occaecat biltong. Strip steak shoulder rump swine sunt commodo turducken sint eu ut kielbasa meatball duis. Do chicken laboris officia ut. </p>
<p>Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular.
</p>
</aside>
</div>
<article id="center">
<h1>Robert Paulson's Travel Posts</h1>
<div class="column">
<h2>Florence Tour</h2>
<figure>
<img src="images/travel/9498358806.jpg" alt="" />
<figcaption>Florence</figcaption>
<img src="images/travel/new-banner.png" alt="" class="overlayed"/>
</figure>
<div>
<p>Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues. It va esser tam simplic quam Occidental in fact, it va esser Occidental.</p>
<div class="right">
<a href="#" class="linkbutton"><button type="button">Read More
</button></a>
</div>
</div>
</div>
<div class="entry">
<h2>Lovin' Tuscany</h2>
<figure>
<img src="images/travel/9504449928.jpg" alt="" />
<figcaption>Florence</figcaption>
</figure>
<div>
<p>Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar custosi traductores. At solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles.</p>
<div class="right">
<a href="#" class="linkbutton"style="float:right"><button type="button">Read More </button></a>
</div>
</div>
</div>
<div class="entry">
<h2>Love in Venezia</h2>
<figure>
<img src="images/travel/9494472443.jpg" alt="" />
<figcaption>Venice</figcaption>
<img src="images/travel/new-banner.png" alt="" class="overlayed"/>
</figure>
<div>
<p><p>Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules.</p>
<div class="right">
<a href="#" class="linkbutton"style="float:right"><button type="button">Read More </button></a>
</div>
</div>
</div>
</article>
<footer>
<aside>
<div class="footer">
<h2>Related Posts</h2>
<div>
<img src="images/travel/tiny/9495574327.jpg" /><img src="images/travel/tiny/9496787858.jpg" /><img src="images/travel/tiny/9502740177.jpg" /><img src="images/travel/tiny/9504609042.jpg" /><img src="images/travel/tiny/9505536014.jpg" /><br/>
<img src="images/travel/tiny/9505893300.jpg" /><img src="images/travel/tiny/8710247776.jpg" /><img src="images/travel/tiny/8710320515.jpg" /><img src="images/travel/tiny/9494282329.jpg" /><img src="images/travel/tiny/9494464567.jpg" />
</div>
</div>
<div class="footer">
<h2>About Us</h2>
<p>Bacon ipsum dolor sit amet kielbasa officia ribeye tri-tip sausage, swine salami occaecat biltong. Strip steak shoulder rump swine sunt commodo turducken sint eu ut kielbasa meatball duis. Do chicken laboris officia ut. </p>
<p>Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular.</p>
<p>© Copyright 2017 Company X
</div>
</aside>
</footer>
</div>
</body>
</html>