The news div initially had an outline property. but as soon as I added the #main h2{} line the outline disappeared. I needed to replace it with the border property and give it a rounded border. I have done this with the help of w3schools.com guide, but the border still isn't showing.
Edit: I have updated my code, but it has now cleared my entire news div.
#main {
float: right;
width: 45%;
margin: 0 2.5%;
outline: 2px dashed #0053ae;
}
#main h2 {
font-family: 'Oswald', sans-serif;
}
#news {
float: right;
width: 22.5%;
margin: 0 0 0 2.5%;
border: 5px dashed #FF6600;
border-radius: 10px;
}
Here is the full code:
<!DOCTYPE HTML>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<meta charset="utf-8">
<title>
Mount Olympus News
</title>
<style>
#wrapper {
width: 960px;
margin: 0 auto;
}
#header {
background-color: #CCC;
padding: 15px;}
#links {
float: right;
width: 22.5%;
margin: 0 2.5% 0 0 ;
outline: 2px dashed #dd0009;
}
#links h2 {
font-family: 'Oswald', sans-serif;
}
#main {
float: right;
width: 45%;
margin: 0 2.5%;
outline: 2px dashed #0053ae;
}
#main h2 {
font-family: 'Oswald', sans-serif;
}
#news {
float: right;
width: 22.5%;
margin: 0 0 0 2.5%;
border: 5px dashed #FF6600;
border-radius: 10px;
}
#news h2 {
font-family: 'Oswald', sans-serif;
}
#footer {
clear: right;
padding: 15px;
background: #CCC;}
body {
font-family: verdana, sans-serif;
/* font-size: small; */
margin: 0;
padding: 0;}
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
margin-top: 1em;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>Mount Olympus News</h1>
</div>
<div id="links">
<h2>Links to Stories</h2>
<ul id="stories">
<li>Jupiter & His Mighty Company</li>
<li>The Golden Age</li>
<li>The Story of Prometheus</li>
<li>The Flood</li>
<li>The Story of Io</li>
<li>The Wonderful Weaver</li>
<li>Cadmus and Europa</li>
<li>The Quest for Medusa's Head</li>
<li>The Story of Atlanta</li>
<li>The Horse and the Olive</li>
</ul>
</div>
<div id="main">
<h2>Prometheus Heats Things Up</h2>
<p>Prometheus did not care to live amid the clouds on the mountain top. He was too
busy for that. While the Mighty Folk were spending their time in idleness, drinking
nectar and eating ambrosia, he was intent upon plans for making the world wiser and
better than it had ever been before.</p>
<p>He went out amongst men to live with them and help them. Ah, how very poor and wretched they were! He found
them living in caves and in holes of the earth, shivering with the cold because there
was no fire, dying of starvation, hunted by wild beasts and by one another-the most
miserable of all living creatures.</p>
<p>"If they only had fire," said Prometheus to himself, "they could at least warm
themselves and cook their food; and after a while they could learn to make tools and
build themselves houses. Without fire, they are worse off than the beasts."</p>
<p>Then he went boldly to Jupiter and begged him to give fire to men, that so they
might have a little comfort through the long, dreary months of winter.</p>
<p>"Not a spark will I give," said Jupiter. "No, indeed! Why, if men had fire they
might become strong and wise like ourselves, and after a while they would drive us
out of our kingdom. It
is best for them to be poor and ignorant, that so we Mighty Ones may thrive and be
happy."</p>
<p>Prometheus made no answer; but he had set his heart on helping mankind, and he did
not give up. He turned away, and left Jupiter and his mighty company forever.</p>
<p>As he was walking by the shore of the sea he found a reed, or, as some say, a tall
stalk of fennel, growing; and when he had broken it off he saw that its hollow center
was filled with a dry, soft pith which would burn slowly and keep on fire a long
time. He took the long stalk in his hands, and started with it towards the dwelling
of the sun in the far east.</p>
<p>"Mankind shall have fire in spite of the tyrant who sits on the mountain top," he
said.</p>
<!-- <p>He reached the place of the sun in the early morning just as the glowing, golden
orb was rising from the earth and beginning his daily journey through the sky. He
touched the end of the long reed to the flames, and the dry pith caught on fire and
burned slowly. He called some of the shivering men from their caves and built a fire for them,
and showed them how to warm themselves by it and how to build other fires from the
coals. Soon there was a cheerful blaze in every rude home in the land, and men and
women gathered round it and were warm and happy, and thankful to Prometheus for the
wonderful gift which he had brought to them from the sun.</p>
<p>It was not long until they learned to cook their food and so to eat like men
instead of like beasts. They began at once to leave off their wild and savage habits;
and instead of lurking in the dark places of the world, they came out into the open
air and the bright sunlight, and were glad because life had been given to them.</p> -->
</div>
<div id="news">
<h2>News</h2>
<ul>
<li><strong>Pandora opens the box!</strong><br /> Disease and sorrow released to plague mankind for eternity. More...</li>
<li><strong>Welcome to Hellenes.</strong><br /> Son of Prometheus escapes the great flood and creates a new society from tossed stones. More...</li>
<li><strong>A Tangled Web</strong><br />
Arachne loses weave-off; is changed into a spider. More...</li>
</ul>
</div>
<div id="footer">
<p>Content taken from <cite>Old Greek Stories</cite> by James Baldwin (1914). It is a copyright free text available at Project Gutenberg.</p>
</div>
</div>
</body>
</html>
You're not closing the CSS tag after defining styles for:
#main h2 {
font-family: 'Oswald', sans-serif;
)
The parenthesis above should be replaced by a curly bracket like this:
#main h2 {
font-family: 'Oswald', sans-serif;
}
Secondly, there's no border-style property of bold which is why your border isn't appearing. You can instead use:
#news {
float: right;
width: 22.5%;
margin: 0 0 0 2.5% ;
border: 5px solid #FF6600;
border-radius: 25px;
}
You can take a look at all the available border-style's, which you can use, over here.
I copied your code into the snippet feater, edit:
#main h2 {
font-family: 'Oswald', sans-serif;
)
to
#main h2 {
font-family: 'Oswald', sans-serif;
} <---
Related
For my project, I have created a fake beachside hotel accommodation website. As of now, I feel like I have successfully completed my website in terms of it's content. However, one issue still remains within the development of this website. I have recently discovered that when I reduce the size of the google window when displaying my website will cause the content within it to not display correctly (not be responsive). This specifically affects the header and the footer This is the same deal when I tested my website on a laptop with a much smaller resolution than my computer monitor, and in order for the website to look neat was to zoom out at around 75%. I've seen tutorials on how to do it, and it's mostly to do with using this meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
I've also seen that using the min-height tag can help, but to me it doesn't work.
This is affecting mainly the header image and the footer since it has social media icons within it, along with a span tag to separate a link to a contact form. I think the issue might have to do with the placement of my code's more specifically in terms of where I have placed the div's and class's. It may also have to do with the two-column layout present within the code. I also think the solution is simple but I obviously can't figure it out. Any help is appreciated as always. Also keep in mind the code below is only for the Home Page. The styling for other pages are slightly different, but I think I might be able to figure out how to fix the other pages as well after the home page solution has been given to me. If you need screenshots of it I'll happily upload them.
<!DOCTYPE html>
<html>
<head>
<meta lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="styles.css">
<title>Home - Sorento by the Sea</title>
</head>
<div class="container">
<div id="header">
<a href="index.html" style="text-decoration: none;">
<img src="images/sorrento_by_the_sea_logo.jpg" alt="Our Logo" title="Our Logo">
</a>
</div>
<div id="nav">
<ul>
Home
|
Getting There
|
The Apartment
|
Pricing and T&C
</ul>
</div>
<body>
<div class="column-layout">
<div class="main-column">
<h1>Who are we?</h1>
<p><b>Sorrento by the Sea</b> is a luxary apartment located on the picturesque <b>Mornington Pennisula</b>, an approximate one-hour scenic drive from Melbourne, and right next door to Portsea.
Our apartment is a lazy 10-minute walk from the relaxed township of Sorrento that offers restaurants, cafes, a chemist, a supermarket, a butcher and lots more. It is located in a quiet avenue, just 4 houses from the beach. It is in easy walking distance of the ocean beaches and surf.</p>
<p>Your <b>private luxury apartment</b> consists of a spacious living area with <b>leather lounge suite</b> overlooking a sun drenched, tree-filled private garden.</p>
<p>A <b>separate kitchenette</b> has everything you need to make your stay relaxed and comfortable. A <b>queen sized bedroom</b> and an amazing bathroom complete with <b>free standing black bath</b> entices you to relax and unwind.</p>
<p>Two TVs are sure to make everyone happy! An <b>undercover BBQ area</b> with seating offers plenty of space to stretch out and enjoy that cup of freshly brewed coffee or a glass of wine.</p>
<h2 style="color:#4d1d18;padding-left:220px;font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;">This is the perfect place for a home away from home</h2>
<img src="images/back_beach.jpg" alt="Back Beach" title="Back Beach" style="width:690px;margin-left: 210px;">
<div class="pet">
<h1>Pet Friendly</h1>
<p>We understand that pets are an important part of the family.
<b>We are pet friendly by arrangement</b> - so please talk to us about your needs.
We offer a <b>fully enclosed backyard, shady trees, water bowls, food bowls and a lead if you forget one</b>.</p>
</div>
</div>
<div class="tests">
<h1>Testimonials</h1>
<q>So sorry we had to go home after only one night. We will definitely stay two nights next time!</q>
<br>
<q>This apartment is close to everything. We didn't need the car as the walks were amazing"</q>
<br>
<q>Your attention to detail made our stay so relaxed and comfortable. It was such a shame we had to drive back to our little flat, which is smaller than your apartment. We want to move in!</q>
<br>
<q>Cosy and comfortable. We imagined we owned it and enjoyed being spoilt. Thank you</q>
<br>
<q>What a magical stay at such an amazing place. Completely self-contained and very private. We loved it and will return again and again.</q>
<br>
<q>Never felt so spoilt. A perfect get away and so close to everything. We had the best bath ever!</q>
<br>
<q>A few minutes’ walk from the beach, picnic basket in hand and towel over the shoulder - can't think of anything better except that wonderful breakfast. That bacon is the best in Melbourne!</q>
<br>
<q>Relaxing in that sunny garden watching our dog chasing balls. Let me stay forever!</q>
</div>
</div>
<div class="flex-container">
<img src="images/ocean_beach.jpg" alt="Ocean Beach" title="Beach with Rocks" style="max-width:100%;height:auto;margin:0 60px 0 60px;">
<br>
<img src="images/back_beach_sorrento.jpg" alt="Ocean Beach 2" title="Beach Walkway" style="max-width:100%;height:auto;margin-right:60px;">
<br>
<img src="images/ocean_beach3.jpg" alt="Ocean Beach 3" title="Dark Blue Ocean" style="max-width:100%;height:auto;">
</div>
</body>
<footer>
<div class="social-media">
<ul>
<img src="images/facebook_small.png">
<img src="images/instagram_small.png">
<img src="images/twitter_small.png">
<img src="images/youtube-variation_small.png">
<img src="images/paypal_small.png">
</ul>
<span>
Contact form
</span>
</div>
</footer>
</div>
</html>
And this is the CSS:
* {
font-family: Helvetica, sans-serif;
background-color: lightsteelblue;
}
p {
line-height: 150%;
}
.container {
height:auto;
max-width: 100%;
}
#header {
margin: 220px, 250px;
}
#header img {
max-width:100%;
height:auto;
margin-left: 500px;
}
#nav {
text-decoration:none;
text-align:right;
padding-right:20px;
border: 3.55px solid #4d1d18;
border-radius:10px;
margin-top: 5px;
background-color: lightsteelblue;
max-width:100% ;
}
a {
text-decoration: none;
color:#4d1d18
}
a:visited {
color: #4d1d18;
}
a:hover {
color: #555;
}
a:active {
color: #555;
}
h1 {
color:#87423c;
font-size: 36px;
}
h2 {
font-size: 24px;
color: #4d1d18;
}
/*---------footer-----*/
footer {
background-color: lightsteelblue;
color: #443;
}
.social-media{
text-align: center;
border: 3px solid #4d1d18;
border-radius: 15px;
padding: 5px 15px;
margin-top: 15px;
}
.social-media span {
text-align: right;
margin-left: 1300px;
border: 1px solid #682721;
border-radius: 5px;
padding: 10px;
}
.social-media img {
padding-right: 20px;
}
/*--------Home----------*/
.column-layout {
line-height: 1.60;
padding: 20px 20px;
display:flex;
background-color: lightsteelblue;
border-radius: 10px;
border: 1px
}
.main-column {
display:flex;
flex-direction:column;
text-align:left;
margin-top:20px;
margin-bottom:30px;
margin-right:80px;
margin-left:20px;
}
.tests {
display: flex;
flex-direction: column;
margin-top: 140px;
border: 5px solid #4d1d18;
border-radius:20px;
height: 800px;
padding: 0px 30px 0px 30px;
}
q {font-style:italic;}
.flex-container {
display: flex;
background-color: lightsteelblue;
}
.pet {
border: dotted #4d1d18;
border-radius: 10px;
padding: 0px 20px 10px 30px;
margin-top: 50px;
}
ul {
display:inline-block;
}
Use max-height: 100%; on your image. As you did with max-widthon your image.
I think it is a good practice to wrap your image <img> in a container <div>. You have to set the container's width and height to some values (either with flex or percent values or fixed values) and then set the image's width and height as a percent, relative to its container. You can also try and use the object-fit: contain; css property on the image. You can also consider using media queries for different screen resolutions. I found this stackoverflow QA useful in this topic.
Edit: Along with object-fit: contain; you can use max-width: 100%; and max-height: 100%; on the image.
So I've been trying to make my blog page sidebar look something like this:
A sidebar with space between each link and image, a visible border and a title.
However, I seem to be having difficulty finding a tutorial online on how to do so with only css and html, therefore I have came to here to ask for the help of the community.
Here is my code:
* {
box-sizing: border-box;
}
#font-face {
src: url(fonts/WaywardSans-Regular.otf);
font-family: wayward;
}
body {
margin: 0;
background: #fff;
font-family: wayward;
font-weight: 100;
height: 100%;
overflow-x: hidden;
overflow-y: scroll;
display: flex;
flex-wrap: wrap;
}
header {
background: #55d6aa;
flex: 0 0 100%;
}
header::after {
content: '';
display: table;
clear: both;
}
.logo {
float: left;
padding: 10px 0;
margin-left: 30px;
}
nav {
float: right;
}
nav ul {
margin-right: 60px;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-left: 100px;
padding-top: 30px;
position: relative;
}
nav a {
color: #444;
text-decoration: none;
text-transform: uppercase;
font-size: 20px;
}
nav a:hover {
color: #000;
}
nav a::before {
content: '';
display: block;
height: 5px;
background-color: #444;
position: absolute;
top: 0;
width: 0%;
transition: all ease-in-out 250ms;
}
nav a:hover::before {
width: 100%;
}
h1 {
margin: 10px;
}
img {
max-width: 100%;
}
#sidebar {
flex: 0 0 25%;
max-width: 250px;
background-color: #DDD;
list-style-type: none;
}
.review {
line-height: 29.25px;
padding-top: 5px;
text-align: center;
border-width: 1px;
margin: 10px;
padding: 5px;
word-wrap: break-word;
flex: 1;
}
.text-wrapper {
max-width: 800px;
margin: auto;
}
<header>
<div class="container">
<div class="logo">
<img src="logo.png" height="90" width="280">
</div>
<nav>
<ul>
<li> Our Top Picks</li>
<li>Wall of Shame</li>
<li>Movies</li>
<li>Tv Shows</li>
</ul>
</nav>
</div>
</header>
<div id="sidebar">
<ul>
<li> Star wars movie review</li>
<li>E.T movie review</li>
<li>Happy Death Day Movie review</li>
<li>Thor ragnorok movie review</li>
</ul>
</div>
<div class="review">
<h1>Titanic Movie Review 1996</h1>
<h3>-By Some random guy</h3>
<div class="thumbnail">
<img src="https://static3.srcdn.com/wordpress/wp-content/uploads/2020/01/Rose-DeWitt-Bukater-and-Jack.png?q=50&fit=crop&w=767&h=450&dpr=1.5" alt="An Image of Jack holding rose from behind">
</div>
<div class="text-wrapper">
<p>
The Titanic is a classic movie filmed in 1996, with jack and rose, it is a classic tradgedy and feautures kate and leonardo da vinci, one is poor, one is rich, the girl has a expensive random amulet that look quite cool i think, yeah, and then the ships
crashes and they all die! except for rose. And heres a random movie review from somewhere:<br><br> Like a great iron Sphinx on the ocean floor, the Titanic faces still toward the West, interrupted forever on its only voyage. We see it in the
opening shots of “Titanic,” encrusted with the silt of 85 years; a remote-controlled TV camera snakes its way inside, down corridors and through doorways, showing us staterooms built for millionaires and inherited by crustaceans.<br><br> These shots
strike precisely the right note; the ship calls from its grave for its story to be told, and if the story is made of showbiz and hype, smoke and mirrors--well, so was the Titanic. She was “the largest moving work of man in all history,” a character
boasts, neatly dismissing the Pyramids and the Great Wall. There is a shot of her, early in the film, sweeping majestically beneath the camera from bow to stern, nearly 900 feet long and “unsinkable,” it was claimed, until an iceberg made an irrefutable
reply.<br><br> James Cameron's 194-minute, $200 million film of the tragic voyage is in the tradition of the great Hollywood epics. It is flawlessly crafted, intelligently constructed, strongly acted and spellbinding. If its story stays well within
the traditional formulas for such pictures, well, you don't choose the most expensive film ever made as your opportunity to reinvent the wheel.<br><br> We know before the movie begins that certain things must happen. We must see the Titanic sail
and sink, and be convinced we are looking at a real ship. There must be a human story--probably a romance--involving a few of the passengers. There must be vignettes involving some of the rest and a subplot involving the arrogance and pride of the
ship's builders--and perhaps also their courage and dignity. And there must be a reenactment of the ship's terrible death throes; it took two and a half hours to sink, so that everyone aboard had time to know what was happening, and to consider
their actions.<br><br> All of those elements are present in Cameron's “Titanic,” weighted and balanced like ballast, so that the film always seems in proportion. The ship was made out of models (large and small), visual effects and computer animation.
You know intellectually that you're not looking at a real ocean liner--but the illusion is convincing and seamless. The special effects don't call inappropriate attention to themselves but get the job done.<br><br> The human story involves an 17-year-old
woman named Rose DeWitt Bukater (Kate Winslet) who is sailing to what she sees as her own personal doom: She has been forced by her penniless mother to become engaged to marry a rich, supercilious snob named Cal Hockley (Billy Zane), and so bitterly
does she hate this prospect that she tries to kill herself by jumping from the ship. She is saved by Jack Dawson (Leonardo DiCaprio), a brash kid from steerage, and of course they will fall in love during the brief time left to them.<br><br> The
screenplay tells their story in a way that unobtrusively shows off the ship. Jack is invited to join Rose's party at dinner in the first class dining room, and later, fleeing from Cal's manservant, Lovejoy (David Warner), they find themselves first
in the awesome engine room, with pistons as tall as churches, and then at a rousing Irish dance in the crowded steerage. (At one point Rose gives Lovejoy the finger; did young ladies do that in 1912?) Their exploration is intercut with scenes from
the command deck, where the captain (Bernard Hill) consults with Andrews (Victor Garber), the ship's designer and Ismay (Jonathan Hyde), the White Star Line's managing director.<br><br>
</p>
</div>
</div>
Please feel free to edit, the image is a what I'm trying to accomplish.
One way: Simply by top/bottom padding and borders.
Sometimes it's useful to use :first-child and :last-child selectors (If first/last child design is different) + Flexbox for the card layout.
One more important issue - it's better to wrap the all card with a tag (Better UI).
* {
box-sizing: border-box;
}
aside .articles{
list-style-type: none;
padding: 0px;
margin-top:0px;
}
.articles > li.card{
border-left: 1px solid lightgray;
border-right: 1px solid lightgray;
border-bottom: 1px solid lightgray;
}
.articles h3, .articles p {
margin-top: 0px;
margin-bottom: 5px;
}
.articles .content_col{
margin-left: 10px;
}
.card-link{
/* remove deafult link color + underline */
color: initial;
text-decoration: none;
/* change a display from deafult inline to block (all card area is clickbale) */
display: block;
/* transition */
transition: background-color 0.5s ease;
/* flex setting */
display: flex;
align-items: center;
/* extra padding around the card */
padding: 10px;
}
.card-link:hover{
background: #f3f3f3;
}
/* width setting - layout*/
.image_col{
flex-basis: 20%;
max-width: 200px;
min-width: 100px;
align-self: flex-start;
}
.content_col{
flex-grow: 1;
}
/*responsive image */
.image_col img{
width: 100%;
height: auto;
}
<aside>
<h2>Last news</h3>
<div style="height:5px; background: black;"></div>
<ul class="articles">
<!-- card 1 -->
<li class="card">
<a href="#" class="card-link">
<div class="image_col">
<img src="https://picsum.photos/400/300" />
</div>
<div class="content_col">
<h3>Article heading</h3>
<p>Short description</p>
<button>Read more</button>
</div>
</a>
</li>
<!-- card 2 -->
<li class="card">
<a href="#" class="card-link">
<div class="image_col">
<img src="https://picsum.photos/400/301" />
</div>
<div class="content_col">
<h3>Article heading</h3>
<p>Short description</p>
<button>Read more</button>
</div>
</a>
</li>
</ul>
</aside>
You can achieve the layout using flexbox and other CSS properties. I'll focus my answer purely on the CSS, but in reality, you can do a lot to simplify your HTML.
For example, you're nesting links inside list elements inside nav and div containers. That's really not necessary anymore with the advent of HTML5. It's a lot of extra code. Bottom line, you can make your HTML much lighter (removing about 25%) by taking advantage of semantically meaningful tags.
Here's a more detailed explanation: Centering flex items inside a list
So here's one solution to the problem (again, addressing the CSS side only). Add this to your code:
#sidebar {
display: flex;
}
#sidebar > ul {
display: flex;
flex-direction: column;
margin: 0;
padding: 0;
}
#sidebar > ul > li {
flex: 0 0 100px; /* adjust height as desired */
display: flex;
list-style-type: none;
border-bottom: 1px solid gray;
}
#sidebar > ul > li > a {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 25px;
}
* {
box-sizing: border-box;
}
#font-face {
src: url(fonts/WaywardSans-Regular.otf);
font-family: wayward;
}
body {
margin: 0;
background: #fff;
font-family: wayward;
font-weight: 100;
height: 100vh; /* adjustment; https://stackoverflow.com/a/31728799/3597276 */
overflow-x: hidden;
overflow-y: scroll;
display: flex;
flex-wrap: wrap;
}
header {
background: #55d6aa;
flex: 0 0 100%;
}
header::after {
content: '';
display: table;
clear: both;
}
.logo {
float: left;
padding: 10px 0;
margin-left: 30px;
}
nav {
float: right;
}
nav ul {
margin-right: 60px;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-left: 100px;
padding-top: 30px;
position: relative;
}
nav a {
color: #444;
text-decoration: none;
text-transform: uppercase;
font-size: 20px;
}
nav a:hover {
color: #000;
}
nav a::before {
content: '';
display: block;
height: 5px;
background-color: #444;
position: absolute;
top: 0;
width: 0%;
transition: all ease-in-out 250ms;
}
nav a:hover::before {
width: 100%;
}
h1 {
margin: 10px;
}
img {
max-width: 100%;
}
#sidebar {
flex: 0 0 25%;
max-width: 250px;
background-color: #DDD;
display: flex; /* new */
}
/* new */
#sidebar > ul {
display: flex;
flex-direction: column;
margin: 0;
padding: 0;
}
/* new */
#sidebar > ul > li {
flex: 0 0 100px; /* adjust height as desired */
display: flex;
list-style-type: none;
border-bottom: 1px solid gray;
}
/* new */
#sidebar > ul > li > a {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 25px;
}
.review {
line-height: 29.25px;
padding-top: 5px;
text-align: center;
border-width: 1px;
margin: 10px;
padding: 5px;
word-wrap: break-word;
flex: 1;
}
.text-wrapper {
max-width: 800px;
margin: auto;
}
<header>
<div class="container">
<div class="logo">
<img src="logo.png" height="90" width="280">
</div>
<nav>
<ul>
<li> Our Top Picks</li>
<li>Wall of Shame</li>
<li>Movies</li>
<li>Tv Shows</li>
</ul>
</nav>
</div>
</header>
<div id="sidebar">
<ul>
<li> Star wars movie review</li>
<li>E.T movie review</li>
<li>Happy Death Day Movie review</li>
<li>Thor ragnorok movie review</li>
</ul>
</div>
<div class="review">
<h1>Titanic Movie Review 1996</h1>
<h3>-By Some random guy</h3>
<div class="thumbnail">
<img src="https://static3.srcdn.com/wordpress/wp-content/uploads/2020/01/Rose-DeWitt-Bukater-and-Jack.png?q=50&fit=crop&w=767&h=450&dpr=1.5" alt="An Image of Jack holding rose from behind">
</div>
<div class="text-wrapper">
<p>
The Titanic is a classic movie filmed in 1996, with jack and rose, it is a classic tradgedy and feautures kate and leonardo da vinci, one is poor, one is rich, the girl has a expensive random amulet that look quite cool i think, yeah, and then the ships
crashes and they all die! except for rose. And heres a random movie review from somewhere:<br><br> Like a great iron Sphinx on the ocean floor, the Titanic faces still toward the West, interrupted forever on its only voyage. We see it in the
opening shots of “Titanic,” encrusted with the silt of 85 years; a remote-controlled TV camera snakes its way inside, down corridors and through doorways, showing us staterooms built for millionaires and inherited by crustaceans.<br><br> These shots
strike precisely the right note; the ship calls from its grave for its story to be told, and if the story is made of showbiz and hype, smoke and mirrors--well, so was the Titanic. She was “the largest moving work of man in all history,” a character
boasts, neatly dismissing the Pyramids and the Great Wall. There is a shot of her, early in the film, sweeping majestically beneath the camera from bow to stern, nearly 900 feet long and “unsinkable,” it was claimed, until an iceberg made an irrefutable
reply.
<br><br> James Cameron's 194-minute, $200 million film of the tragic voyage is in the tradition of the great Hollywood epics. It is flawlessly crafted, intelligently constructed, strongly acted and spellbinding. If its story stays well within the
traditional formulas for such pictures, well, you don't choose the most expensive film ever made as your opportunity to reinvent the wheel.<br><br> We know before the movie begins that certain things must happen. We must see the Titanic sail and
sink, and be convinced we are looking at a real ship. There must be a human story--probably a romance--involving a few of the passengers. There must be vignettes involving some of the rest and a subplot involving the arrogance and pride of the ship's
builders--and perhaps also their courage and dignity. And there must be a reenactment of the ship's terrible death throes; it took two and a half hours to sink, so that everyone aboard had time to know what was happening, and to consider their actions.<br><br> All of those elements are present in Cameron's “Titanic,” weighted and balanced like ballast, so that the film always seems in proportion. The ship was made out of models (large and small), visual effects and computer animation. You know intellectually
that you're not looking at a real ocean liner--but the illusion is convincing and seamless. The special effects don't call inappropriate attention to themselves but get the job done.<br><br> The human story involves an 17-year-old woman named Rose
DeWitt Bukater (Kate Winslet) who is sailing to what she sees as her own personal doom: She has been forced by her penniless mother to become engaged to marry a rich, supercilious snob named Cal Hockley (Billy Zane), and so bitterly does she hate
this prospect that she tries to kill herself by jumping from the ship. She is saved by Jack Dawson (Leonardo DiCaprio), a brash kid from steerage, and of course they will fall in love during the brief time left to them.<br><br> The screenplay tells
their story in a way that unobtrusively shows off the ship. Jack is invited to join Rose's party at dinner in the first class dining room, and later, fleeing from Cal's manservant, Lovejoy (David Warner), they find themselves first in the awesome
engine room, with pistons as tall as churches, and then at a rousing Irish dance in the crowded steerage. (At one point Rose gives Lovejoy the finger; did young ladies do that in 1912?) Their exploration is intercut with scenes from the command
deck, where the captain (Bernard Hill) consults with Andrews (Victor Garber), the ship's designer and Ismay (Jonathan Hyde), the White Star Line's managing director.<br><br>
</p>
</div>
</div>
jsFiddle demo
I'm trying to make a website where the main content is on the left and miscellaneous things on the right. The two divs are wrapped inside another div that centers the page and leave some white space on both side. However the right div always go below the left one even though there's clearly still room for the the right one to fit. I know this problem is pretty common but I tried many solutions like display:inline-block, and it doesn't work at all. Here's what my page looks like right now: https://hongweichen0.github.io/
body {
font-family: "Roboto", sans-serif;
margin: 0px;
padding: 0px;
background-color: rgb(220, 240, 230);
}
.banner {
text-align: center;
background: rgb(20, 16, 16);
position: fixed;
top: 0px;
width: 100%;
}
.banner h1 {
color: rgb(255, 255, 255);
font-weight: bold;
font-style: italic;
}
.centerPage {
background-color: rgb(255, 249, 249);
width: 80%;
margin: auto;
margin-top: 60px;
}
.content {
float: left;
width: 70%;
padding: 20px;
border: 5px solid black;
}
.contentRight {
width: 10%;
}
.clear {
width: 100%;
line-height: 0px;
clear: both;
}
.content p,
.content ul {
width: 100%;
line-height: 1.5em;
text-align: justify;
}
.content h2 {
width: 100%;
border-bottom: 2px solid black
}
.content img {
float: left;
margin: 10px;
margin-top: 0px;
clear: both;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hong Wei Chen's Website</title>
<link rel="stylesheet" type="text/css" href="main.css" />
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>
<div class="banner">
<h1>Hong Wei Chen</h1>
</div>
<div class="centerPage">
<div class="content">
<h2>Introduction</h2>
<p>
My name is Hong Wei Chen. I'm currently enrolled in Midwood High School as a Junior. I created this personal website for fun just to show off what I learned about HTML/CSS from KhanAcademy. Still pretty new to web design and I plan to learn more about
how to implement Javascript into websites. There's still a lot for me to learn but I plan to keep on going and become a badass programmer. My ultimate goal is to become expert in both front-end and back-end development. Now, let me show off as
much as I can. No one will visit this site anyway.
</p>
<h2>Useless Info (not personal)</h2>
<ul>
<li>First Name: Hong Wei</li>
<li>Last Name: Chen</li>
<li>Age: 16</li>
<li>Favorite Food: EGGS!!!</li>
<li>Favorite Movie: "Groundhog Day", "Interstellar"</li>
<li>Cats or Dogs: Dogs</li>
<li>Favorite Companies: SpaceX, Google, Tesla</li>
<li>Favorite Color: Blue</li>
</ul>
<h2>My Incredible Works</h2>
<img src="Abstract%20Fish.PNG" alt="Abstract Fish. A random fish painter program." width="200">
<p>This is an intro to Javascript project I made on Khan Academy during my early stages of learning. The idea is that when the user clicks on the canvas, a fish with random size and color will be drawn on the position of the cursor. This lesson is
about functions and how to call them with parameters. In this case, the parameter is the x and y position, which is provided by the user's mouse click. This worked out pretty well and I even took a screen shot of it and used it as my avatar for
many websites. It's a piece of art made with Processing JS.</p>
<img src="Shooting%20Star.PNG" alt="Shooting Star. A shooting star and explosion animation" width="200">
<p>This one is also from the Intro to Javascript course on Khan Academy. I love their free courses, probably the best ones out there. Anyway, this is actually an animation using the draw function. I did this on the second day I started this course
and it took me a solid 2 hours to finish. I went way pass the expectation and added a bunch of stuffs. At the end I was saying to myself, "hey, this is fun". I finally realized how amazing and fun programming can be.</p>
</div>
<div class="clear"></div>
<div class="contentRight">
<h1>Cool Buttons!</h1>
</div>
</div>
<script type="text/javascript" src=script.js></script>
</body>
</html>
You can use flexbox to handle the positioning of the left and right containers. Please see the code snippet below.
body {
font-family: "Roboto", sans-serif;
margin: 0px;
padding: 0px;
background-color: rgb(220, 240, 230);
}
.banner {
text-align: center;
background: rgb(20, 16, 16);
position: fixed;
top: 0px;
width: 100%;
}
.banner h1 {
color: rgb(255, 255, 255);
font-weight: bold;
font-style: italic;
}
.centerPage {
background-color: rgb(255, 249, 249);
width: 80%;
margin: auto;
margin-top: 60px;
display: flex;
flex-direction: row;
}
.content {
flex: 1 1 auto;
padding: 20px;
border: 5px solid black;
}
.contentRight {
flex: 0 0 80px;
padding: 20px 0 0 0;
}
.clear {
width: 100%;
line-height: 0px;
clear: both;
}
.content p,
.content ul {
width: 100%;
line-height: 1.5em;
text-align: justify;
}
.content h2 {
width: 100%;
border-bottom: 2px solid black
}
.content img {
float: left;
margin: 10px;
margin-top: 0px;
clear: both;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hong Wei Chen's Website</title>
<link rel="stylesheet" type="text/css" href="main.css" />
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>
<div class="banner">
<h1>Hong Wei Chen</h1>
</div>
<div class="centerPage">
<div class="content">
<h2>Introduction</h2>
<p>
My name is Hong Wei Chen. I'm currently enrolled in Midwood High School as a Junior. I created this personal website for fun just to show off what I learned about HTML/CSS from KhanAcademy. Still pretty new to web design and I plan to learn more about
how to implement Javascript into websites. There's still a lot for me to learn but I plan to keep on going and become a badass programmer. My ultimate goal is to become expert in both front-end and back-end development. Now, let me show off as
much as I can. No one will visit this site anyway.
</p>
<h2>Useless Info (not personal)</h2>
<ul>
<li>First Name: Hong Wei</li>
<li>Last Name: Chen</li>
<li>Age: 16</li>
<li>Favorite Food: EGGS!!!</li>
<li>Favorite Movie: "Groundhog Day", "Interstellar"</li>
<li>Cats or Dogs: Dogs</li>
<li>Favorite Companies: SpaceX, Google, Tesla</li>
<li>Favorite Color: Blue</li>
</ul>
<h2>My Incredible Works</h2>
<img src="Abstract%20Fish.PNG" alt="Abstract Fish. A random fish painter program." width="200">
<p>This is an intro to Javascript project I made on Khan Academy during my early stages of learning. The idea is that when the user clicks on the canvas, a fish with random size and color will be drawn on the position of the cursor. This lesson is
about functions and how to call them with parameters. In this case, the parameter is the x and y position, which is provided by the user's mouse click. This worked out pretty well and I even took a screen shot of it and used it as my avatar for
many websites. It's a piece of art made with Processing JS.</p>
<img src="Shooting%20Star.PNG" alt="Shooting Star. A shooting star and explosion animation" width="200">
<p>This one is also from the Intro to Javascript course on Khan Academy. I love their free courses, probably the best ones out there. Anyway, this is actually an animation using the draw function. I did this on the second day I started this course
and it took me a solid 2 hours to finish. I went way pass the expectation and added a bunch of stuffs. At the end I was saying to myself, "hey, this is fun". I finally realized how amazing and fun programming can be.</p>
</div>
<div class="clear"></div>
<div class="contentRight">
<h1>Cool Buttons!</h1>
</div>
</div>
<script type="text/javascript" src=script.js></script>
</body>
</html>
Why do you have div.clear between them? When I removed it, it works. Clear specifies on which side are floating elements not allowed to float. Also, you can use flexbox for this.
I've tried to create a right sidebar within my div, but it's not working. It keeps sitting outside of my main wrapper. Any suggestions?
HTML:
<div id="wrapper">
<h1>Hogan Flying Service</h1>
<img src="Images/CincinnatiSectional.png" width="800" height="97" alt="CincySectional" />
<div class="bodytext">
<h2>About Hogan Flying Service:</h2>
<p>While Hogan Flying Service setup operations at HAO in 2009, it was founded in 1991 by Tom Hogan, after a long history and tradition of aviation in the Hogan family. Uncle Joe and Bernie started flying in 1929, and bought their first Waco 10 in 1932. In that same year, my grandparents William and Emma Hogan purchased the Hamilton Airport and farming careers turned into aviation careers.</p>
<p>A few years later, my father Art and Uncle Bill learned to fly and soon became flight instructors supporting the CPT programs during WWII. My Aunts Lauretta, Katie and Mary also were involved in the many aspects of running an airport. Through the years, the Hogan family was involved in many flying aviation activities including flight instruction, barnstorming, an on-field restaurant, air taxi, air charter, maintenance shop, aircraft restoration, pilot services and laying the foundation of the Butler County Regional Airport as you see it today.</p>
<div class="sideright">
<ul>
<li>Private Pilot</li>
<li> Private Pilot</li>
<li>Commercial Pilot</li>
<li>Instrument Rating</li>
<li>Light Sport Pilot LSA</li>
<li>Tailwheel endorsements</li>
<li>Currency requirements</li>
<li>Biennial Flight Reviews</li>
<li>Ground School Instruction</li>
<li>Aircraft rental</li>
</ul>
</div><!--sidebar end-->
CSS:
#wrapper {
width: 800px;
margin: 60px auto;
background-color: #182228;
border: medium groove #000;
z-index: 1000;
position: relative;
box-shadow: 3px 3px 5px 0px #000;
}
.bodytext {
margin: 10px 320px 10px 10px;
padding: 20px;
}
.sideright {
float: right;
width:260px;
padding:10px;
margin-top:10px;
margin-bottom: 10px;
margin-left:10px;
float:right
}
Here's my fiddle: https://jsfiddle.net/5w8xprqg/2/
If you are content with a fixed width layout, here are the minimum changes to your fiddle that need to be made to get the sidebar where it should be. If you want a responsive layout, you will have to switch over to defining widths and such with percentages.
CSS
wrapper {display:table
}
.body-text {margin: 10px;
float: left;
width: 470px;
}
And the updated jsfiddle. https://jsfiddle.net/5w8xprqg/3/
One mistake was using a 320px margin on the right of your body text which would never let your sidebar flow up next to the body text. Use width to do that kind of thing instead. Also using float:left on elements higher up the DOM usually works better than trying to float:right elements further down. Note you don't really need the float on the .side-right element, but it works.
On a separate note there are other ways that your problems can be avoided and get a superior layout with less css.
One problem I believe you were experiencing was the text overflowing the at the bottom of the wrapper. This can usually be prevented by adding display:table;or overflow:hidden What the last one does is not what you would expect, but instead of the overflowing text being hidden it forces the container to stretch down and contain it.
Also using percentages for your widths today is a better practice.
See this jsfiddle, and notice how little css is necessary to get the layout in the working properly. http://jsfiddle.net/5w8xprqg/4/ Also resize the results box to see how the text adjusts to fit the width.
To get even better layout at very narrow widths, you would want to add in media queries.
There are many ways to do this, and it depends if you want your bodytext to wrap your sidebar. Here is one way, where I created a left side with set width, and right side with set width. Fiddle here: http://jsfiddle.net/t0837grw/
#wrapper {
width: 800px;
margin: 60px auto;
background-color: #ccc;
border: medium groove #000;
z-index: 1000;
position: relative;
box-shadow: 3px 3px 5px 0px #000;
}
.bodytext {
margin: 10px;
padding: 20px;
}
.sideleft
{
display: inline-block;
width: 65%;
}
.sideright {
display: inline-block;
vertical-align: top;
width:30%;
margin: 0 10px;
}
Here is alternate fiddle with set widths: http://jsfiddle.net/6e6btgds/
In the context of the code in the question, the simplest solution might be to swap the locations of the .bodytext and .sideright elements in the mark-up.
#charset "UTF-8";
/* CSS Document */
body {
background-color: #2c3439;
color: #FFF;
}
#wrapper {
width: 800px;
margin: 60px auto;
background-color: #182228;
border: medium groove #000;
z-index: 1000;
position: relative;
box-shadow: 3px 3px 5px 0px #000;
}
#topnav ul {
margin: -11px -10px 10px -10px;
text-align: center;
padding: 1%;
background-color: #000;
color: #FFF;
}
#topnav li {
display: inline;
margin: 0px 40px;
}
.centerimage {
margin: 10px 165px;
}
p {
text-indent: 2.5em;
}
.bodytext {
margin: 10px 320px 10px 10px;
padding: 20px;
}
.sideright {
float: right;
width: 260px;
padding: 10px;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 10px float: right
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link href="all.css" rel="stylesheet" type="text/css" />
</head>
<body>
<nav id="topnav">
<ul>
<li>Home</li>
<li>Aircraft Rental</li>
<li>Contact Us</li>
<li>Flight Training</li>
</ul>
</nav>
<div id="wrapper">
<h1>Hogan Flying Service</h1>
<img src="Images/CincinnatiSectional.png" width="800" height="97" alt="CincySectional" />
<div class="sideright">
<ul>
<li>Private Pilot</li>
<li>Private Pilot</li>
<li>Commercial Pilot</li>
<li>Instrument Rating</li>
<li>Light Sport Pilot LSA</li>
<li>Tailwheel endorsements</li>
<li>Currency requirements</li>
<li>Biennial Flight Reviews</li>
<li>Ground School Instruction</li>
<li>Aircraft rental</li>
</ul>
</div>
<!--sidebar end-->
<div class="bodytext">
<h2>About Hogan Flying Service:</h2>
<p>While Hogan Flying Service setup operations at HAO in 2009, it was founded in 1991 by Tom Hogan, after a long history and tradition of aviation in the Hogan family. Uncle Joe and Bernie started flying in 1929, and bought their first Waco 10 in 1932.
In that same year, my grandparents William and Emma Hogan purchased the Hamilton Airport and farming careers turned into aviation careers.</p>
<p>A few years later, my father Art and Uncle Bill learned to fly and soon became flight instructors supporting the CPT programs during WWII. My Aunts Lauretta, Katie and Mary also were involved in the many aspects of running an airport. Through the
years, the Hogan family was involved in many flying aviation activities including flight instruction, barnstorming, an on-field restaurant, air taxi, air charter, maintenance shop, aircraft restoration, pilot services and laying the foundation
of the Butler County Regional Airport as you see it today.</p>
</div>
<!--text div end-->
</div>
<!--Wrapper End-->
</body>
</html>
I am struggling with CSS. In this example, could anyone help me understand why the "aside" is not floating to the right just below the picture emplacement? Why is it so low in the page?
Thanks for your advice.
HTML
<body>
<nav id="top-menu">
<ul>
<li> Home </li>
<li> Charting </li>
<li> Map </li>
<li> Financials </li>
<li> Forum </li>
<li> About </li>
</ul>
</nav>
<div id="maindiv">
<header>
<img class="img-right" src="images/Inkscape_stocktails_240_240.png"
alt="Stocktail" width="240" height="240" />
<hgroup>
<h1> Welcome to Stocktails </h1>
</hgroup>
<p> The perfect blend for your investment portfolio </p>
</header>
<article class="story">
<h1> Start investing today with Stocktails </h1>
<p>
Stocktails is a collection of tools and resources to facilitate the investing process, from data retrieval, stock analysis and valuation, up to the construction and monitoring of your portfolio.
</p>
</article>
<article class="story">
<h1> The renaissance of value investing </h1>
<p>
As the world economy slowly emerges and recovers from the Great Recession,
appetite for stocks is still on the wane. Stung by three successive market crashes in recent memory (1987, 2000, 2008),
retail investors turned their attention away from common shares and towards presumably safer assets, such as property.
In parallel, institutional investors, from insurance companies to endowments, have greatly diversified their holdings towards private equity, hedge funds and hard assets.
</p>
<p>
<em>Stocks are down, but not out</em>. It is our belief that they may even be on the verge of a renaissance. As most alternative asset classes,
notably sovereign bonds and property, exhibit signs of a bubble, the pendulum is may be about to swing in the reverse direction.
<strong>Now is the time for the savvy investor to put stocks back at the core of his portfolio</strong>.
</p>
<blockquote>"I will tell you how to become rich. Close the doors. Be fearful when others are greedy. Be greedy when others are fearful." (<cite>Warren Buffet</cite>)</blockquote>
<p>
In addition to a reduced appetite for stocks, modern portfolio theory - that notably relies on the efficient markets hypothesis - led many investors to give up on stock picking
and to invest into passive funds instead (cf. <cite>A random walk down Wall-Street</cite>, by B. Malkiel). As investors buy under-valued shares and spurn or short-sell the richly-valued, prices will tend to align with risk,
making it more difficult to find value in the market. Eventually, the average participant stops scouting for value and resigns himself to purchasing the index.
But not all companies are created equal and opportunities are bound to reappear. It is precisely when the market capitulates that the discerning investor should step back in to pick value stocks.
</p>
<p>
Value investing also suffered from the action of central banks. The unprecedented level of liquidity introduced by quantitative easing in the US, the UK, the EU and Japan was key to prevent an outright depression.
It has also been a boon for most investors. The resulting suppression of interest rates lifted all boats, with little regard for the quality of the asset.
As the tide reverses, the overall performance of the market is bound to disappoint. But we also expect a large variation of performance between strong and weak companies. The stars will then be aligned for the value investor to find gems among the wreck.
</p>
</article>
<article class="story">
<h1> Top 10 investing tips from <cite>Warren Buffet</cite>, the Oracle of Omaha </h1>
<ul>
<li>"It's far better to buy a wonderful company at a fair price than a fair company at a wonderful price."</li>
<li>"Rule No. 1: never lose money; rule No. 2: don't forget rule No. 1"</li>
<li>"Our approach is very much profiting from lack of change rather than from change. With Wrigley chewing gum, it's the lack of change that appeals to me. I don't think it is going to be hurt by the Internet. That's the kind of business I like."</li>
<li>"I try to buy stock in businesses that are so wonderful that an idiot can run them. Because sooner or later, one will."</li>
<li>"The stock market is a no-called-strike game. You don't have to swing at everything – you can wait for your pitch. The problem when you're a money manager is that your fans keep yelling, "Swing, you bum!""</li>
<li>"Price is what you pay; value is what you get. Whether we're talking about socks or stocks, I like buying quality merchandise when it is marked down."</li>
<li>"Never count on making a good sale. Have the purchase price be so attractive that even a mediocre sale gives good results."</li>
<li>"If you understood a business perfectly and the future of the business, you would need very little in the way of a margin of safety."</li>
<li>"We've long felt that the only value of stock forecasters isto make fortune tellers look good. Even now, Charlie [Munger] and I continue to believe that short-term market forecasts are poison and should be kept locked up in a safe place, away from children and also from grown-ups who behave in the market like children."</li>
<li>"We don't get paid for activity, just for being right. As to how long we'll wait, we'll wait indefinitely."</li>
</ul>
</article>
<aside class="about">
<header>
<h1> How to use Stocktails </h1>
<p> A collection of tools to cover the entire investment process </p>
</header>
<section>
<hgroup>
<h1> Stock quotes </h1>
<h2> Price, Volume, Ratios, etc. </h2>
</hgroup>
<p> Keep track of your stocks' movements </p>
</section>
<section>
<hgroup>
<h1> Fundamentals </h1>
<h2> Yearly and quarterly financials </h2>
</hgroup>
<p> Stock valuation and analysis </p>
</section>
<section>
<hgroup>
<h1> Portfolio building </h1>
<h2> Optimize the performance of your assets </h2>
</hgroup>
<p> Sophisticated tools to diversify risk and boost performance </p>
</section>
<section>
<hgroup>
<h1> Discussion </h1>
<h2> Forum </h2>
</hgroup>
<p> Share your investing ideas with other savvy investors </p>
</section>
</aside>
<div class="clear"></div>
</div>
<footer>
<p>
Copyright © 2014.
</p>
</footer>
</body>
CSS
body {
background-color: #fffbef;
}
.story p {
line-height: 1.2;
text-align: justify;
}
h1, h2, h3, h4, h5, h6 {
font-family: sans-serif;
color: #093844;
}
.clear {
margin: 0;
padding: 0;
clear: both;
}
img.img-right {
display: block;
float: right;
border: none;
padding: 2px;
margin: 3px 6pt 3px 6px;
}
/* navigation menu */
nav#top-menu {
width: 100%;
height: 50px;
//background-color: #fff2c1;
margin: 0;
padding: 0;
}
#top-menu ul {
display: block;
list-style-type: none;
width: 600px;
margin: 0 auto;
padding: 0;
}
#top-menu ul li {
margin: 0;
padding: 0;
}
#top-menu ul li a {
display: block;
float: left;
max-height: 25px;
width: 100px;
margin: 0;
padding: 5px 0;
font-family: sans-serif;
font-size: 20px;
text-align: center;
text-decoration: none;
color: #52736b;
border-bottom: #fffbef solid 2px;
}
#top-menu ul li a:hover { border-bottom: #52736b solid 2px; }
/* header */
header h1 { margin-top: 0; }
header p {
font-family: sans-serif;
font-weight: bold;
font-style: italic;
font-size: 85%;
margin: .25ex 12pt;
color: #093844;
}
/* maindiv */
#maindiv {
width: 1250px;
margin: 0 auto;
padding: 10px;
background-color: #eec;
}
/* article */
article {
width: 950px;
float: left;
}
article h1 {
font-size: 110%;
margin-top: 12pt;
padding-top: 3pt;
border-top: 4px solid #52736b;
}
/* aside */
aside.about {
float: right;
width: 238px;
background-color: #b7c4b1;
margin: 3pt 6pt 3pt 6pt;
}
aside h1 { font-size: 110%; }
aside h2 { font-size: 90%; }
aside p {
margin: 0 12pt;
font-family: sans-serif;
font-style: italic;
font-size: 80%;
}
aside section h1 {
padding-top: 3pt;
border-top: 4px solid #4f5856;
}
aside header p {
font-size: 85%;
}
aside section {
padding: 5px 0 5px 0;
}
/* footer */
footer {
background: #4f5856;
clear: all;
}
footer p {
color: #8c8e7e;
font-size: 70%;
font-family: sans-serif;
text-align: center;
margin: 0;
padding: 10px 0;
}
LC
Because your articles are floated left and the position of your aside is low in the document, the rules of floats say that
The outer top of a floating box may not be higher than the outer top
of any block or floated box generated by an element earlier in the
source document.
The way around that is to move your aside element up higher in the document:
jsFiddle example
<article class="story"></article>
<article class="story"></article>
<aside class="about"></aside>
<article class="story"></article>
just add clear: both; and modify your html like in the demo
aside.about {
float: right;
width: 238px;
background-color: #b7c4b1;
margin: 3pt 6pt 3pt 6pt;
clear: both;
}
Html
<header></header>
<aside class="about"></aside><!-- moved -->
<article class="story"></article>
Demo