I should be doing a animal trading card simple page per my training to look like this using HTML and linking CSS style from another style.css sheet;
Here's the code i used below, but when i run {even though I'm almost there} i get these errors:
The trading card page with styling has an info section below the image with class 'animal-info'
The #card element does not have class 'animal-info': expected false to equal true
Stacktrace
The border should be solid: expected 'none' to equal 'solid'
Stacktrace
The trading card page with styling has a border around the animal's info section
The border should be solid: expected 'none' to equal 'solid'
Stacktrace
The trading card page with styling has spacing between the border and card elements
There must be some padding around the outside border: expected 0 to be above 0
Stacktrace
/* add your CSS here */
<style>
container { border: 2px solid black;
}
.container {border: 2px solid black;
}
#card {
font-style: italic;
padding: 1em;
}
.animal-info {
border: 2px solid black;
}
ul {list-style: none;
padding: 1em;
}
li span { font-weight: bold;
}
h1{
padding: 1em;
}
img {
padding: 1em;
}
#summary{
padding: 1em;
}
</style>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>For the Love of Puppies</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="container">
<h1>Puppies</h1>
<img src="https://placedog.net/300/300" alt="Puppy">
<div class="animal-info">
<div id="card">
<p id="interesting-fact">Queen Elizabeth II has long been associated with
Corgis. After a visit to Thomas Thynne, 5th Marquess of Bath in 1933,
Princesses Elizabeth and Margaret made it well known to their family
that they liked the Corgis owned by the Marquess.</p> </div>
<ul id="facts">
<li>
<span>Dog Breed Group</span>: Herding Dogs
</li>
<li>
<span>Average Length</span>: 10 inches to 1 foot tall at the shoulder
</li>
<li>
<span>Average Lifespan</span>: 12 to 14 years
</li>
<li>
<span>Weight</span>: Up to 30 pounds
</li>
</ul>
<p id="summary">Welsh Corgis come in two varieties: the Pembroke and
the Cardigan. They were registered as one breed by the Kennel Club in
the U.K. until 1934, although many breeders believe the two breeds
developed separately. Both have similar heads, bodies, levels of
intelligence and herding ability, but the Cardigan is slightly
larger and heavier boned than the Pembroke.
</p>
</div>
</div>
</div>
</body>
</html>
What should I do for it to be like the reference page? It's driving me freakin' nuts.
Thanks in advance..
I am created this card using simple css code.
container { border: 2px solid #eee;
}
.container {border: 2px solid #eee;
}
#card {
font-style: italic;
padding: 1em;
}
.animal-info {
border: 2px solid #eee;
}
ul {list-style: none;
padding: 1em;
}
li span { font-weight: bold;
}
img {
width: 100%;
border: 2px solid #eee;
}
#summary{
padding: 1em;
}
div#container {
padding: 20px;
margin: 50px;
border: 3px solid #eee;
box-shadow: 0px 10px 10px 10px #eee;
}
h1{margin-top:0;}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>For the Love of Puppies</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="container">
<h1>Puppies</h1>
<img src="https://placedog.net/300/300" alt="Puppy">
<div class="animal-info">
<div id="card">
<p id="interesting-fact">Queen Elizabeth II has long been associated with
Corgis. After a visit to Thomas Thynne, 5th Marquess of Bath in 1933,
Princesses Elizabeth and Margaret made it well known to their family
that they liked the Corgis owned by the Marquess.</p> </div>
<ul id="facts">
<li>
<span>Dog Breed Group</span>: Herding Dogs
</li>
<li>
<span>Average Length</span>: 10 inches to 1 foot tall at the shoulder
</li>
<li>
<span>Average Lifespan</span>: 12 to 14 years
</li>
<li>
<span>Weight</span>: Up to 30 pounds
</li>
</ul>
<p id="summary">Welsh Corgis come in two varieties: the Pembroke and
the Cardigan. They were registered as one breed by the Kennel Club in
the U.K. until 1934, although many breeders believe the two breeds
developed separately. Both have similar heads, bodies, levels of
intelligence and herding ability, but the Cardigan is slightly
larger and heavier boned than the Pembroke.
</p>
</div>
</div>
</div>
</body>
</html>
Thank you all for the replies. I found the problem was putting the class="animal-info" code into the id=card instead of a standalone above it. That seemed to fix it all. :)
Doing CSS from scratch like you are doing is probably not the easiest way to do it. I recommend you to use a framework. For example I made this with Vuetify:
https://codepen.io/adelriosantiago/pen/qBbYrjG?editable=true&editors=101%3Dhttps%3A%2F%2Fvuetifyjs.com%2Fen%2Fcomponents%2Fcards%2F
Vuetify already contains the Card element that looks very similar to what you are looking for. The card element is tag-named <v-card></v-card>. You can also add many other elements from here: https://vuetifyjs.com/en/getting-started/quick-start/. Vuetify is fully responsive and will adjust automatically to fit different device sizes.
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.
I have a project and it was good before changing in style, but after adding shadow to the #container it gives me this message from the grader:
The trading card page has a list of new facts
Each fact should have a corresponding label: expected 4 to equal 8
What have I done wrong?
Here is the card.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Building the Prototype</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="container">
<h1>Panda</h1>
<!-- photo credit: wikipedia.org, image taken by Ritik -->
<img src="https://c402277.ssl.cf1.rackcdn.com/photos/18315/images/hero_full/Medium_WW230176.jpg?1576168323" alt="panda">
<div id="card" class="animal-info">
<p id="interesting-fact">Pandas live mainly in temperate forests high in the mountains of southwest China, where they subsist almost entirely on bamboo. They must eat around 26 to 84 pounds of it every day, depending on what part of the bamboo they are eating. They use their enlarged wrist bones that function as opposable thumbs.</p>
<ul id="facts">
<li>
<span class="lable">Scientific Name</span>: <span class="value">Ailuropoda melanoleuca</span>
</li>
<li>
<span class="lable">Average Length</span>: <span class="value">4 to 5 feet</span>
</li>
<li>
<span class="lable">Average Lifespan</span>: <span class="value">20 years</span>
</li>
<li>
<span class="lable">Habitat</span>: <span class="value">Eating in a relaxed sitting posture</span>
</li>
</ul>
<p id="summary">A newborn panda is about the size of a stick of butter—about 1/900th the size of its mother—but females can grow up to about 200 pounds, while males can grow up to about 300 pounds as adults. These bears are excellent tree climbers despite their bulk.
</p>
</div>
</div>
</body>
</html>
And here is the styles.css:
#container{
width: 513;
height: 796;
object-fit: contain;
border: 1px solid #e0e0e0;
box-shadow: 0 5px 5px 5px #e0e0e0;
padding: 20px;
font-family: sans-serif;
}
#container img {
width: 300px;
height: auto;
border: 1px solid #e0e0e0;
padding: 1px;
}
#container h1{
padding: 20px;
}
#card #interesting-fact {
font-style: italic;
}
.animal-info{
}
#facts .lable {
font-weight: bold;
}
#facts .value{
font-style: italic;
}
#card ul {
list-style-type: none;
}
#card {
border: 1px solid #e0e0e0;
padding: 20px;
}
Okay ..
I had to put the list values without the <span class="value"></span>
That's it :)
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>
So I'm having trouble getting my website to keep shrinking past 763px. It's all marked up with percentages and ems instead of pixels but it seems to be stuck anyways. The main image on the page is also not shrinking and instead, the left floating div beside it begins to overlap once the viewport starts to shrink.
cimmanon has helped with the overlapping issue but I'm still having problems with shrinking the image and the div it is nested in.
http://students.thenet.ca/jlandon/new/school/week5/
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="http://meyerweb.com/eric/tools/css/reset/reset.css"/>
<link rel="stylesheet" type="text/css" href="week5_main.css" title="Main"/>
<title>Point Grey Realty</title>
<meta charset="UTF-8"/>
<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="wrapper">
<header>
<h1>Point Grey Realty</h1>
</header>
<div id="backer">
<article>
<header id="listing">
<h2>Arthur Erickson's Golden Mile - $5,290,000</h2>
<h3>3293 Point Grey Road, Vancouver</h3>
</header>
</article>
<div id="main_image"><figure><img src="goldenmile_entrance2.jpg" alt="entrance"/></figure></div>
<article id="listing_info">
<h4>MLS:V940361</h4>
<figure><img src="bryanyan.jpg"/></figure>
<ul id="bryan">
<li>Bryan Yan</li>
<li>Telephone: 604-732-8322</li>
</ul>
<ul>
<li>Building Type: House</li>
<li>Bedrooms: 2</li>
<li>Bathrooms: 2</li>
<li>Finished Interior: 1,876 sf</li>
<li>Floor Space: 2,347 sf</li>
<li>Lot Size: 4,405 sf</li>
<li>Year Built: ~1963</li>
<li>2 Storeys</li>
<li>Large Rec Room</li>
<li>Age of Building: 50 years</li>
<li>Land Size: 33.0 x 133.5</li>
<li>Water, mountain & city views</li>
<li>Waterfront</li>
</ul>
</article>
<article id="listing_history">
<p>Designed in 1963, this was the area’s first multi-unit development. The materials chosen for this estate were brick or plaster for walls and structural bays, and pressure treated fir for the wood spans. These materials, along with brick or quarry tile flors, provide a relatively neutral background. The resulting expression is directly that of the sturdy but graceful nature of the masonry against the more tenuous and taut nature of the wood. The site commands a megnificent view of English Bay, the North Shore mountains of West Vancouver and the downtown Vancouver skyline to the east. Private south facing courtyards trap the sun and serve as entry courts from the strets. One outdoor and one indoor swimming pool were incorporated for individual owners as well as several roof gardens.</p>
<h4>The Unit</h4>
<p>This is a rare residential offer on the “Golden Mile” built during one of Erickson’s most creative periods. The home was the winner of the 1967 National Award for Design. As a Point Grey resident, he created this home to be perfect. To describe this masterpiece, a quote by the Concrete Poet: “Architecture has to be functional but it should allow another dimension than what people are usually content to think about. It should open the perspective of the visitor to something they haven’t experienced before. It shouldn’t be ordinary or pedestrian.” Kept in its precious originality and offered for the first and perhaps, last time...</p>
</article>
<div id="extra_images">
<figure>
<img src="goldenmile_entry_mini.jpg"/>
<img src="goldenmile_kitchen_mini.jpg"/>
<img src="goldenmile_dining2_mini.jpg"/>
<img src="goldenmile_living2_mini.jpg"/>
<img src="goldenmile_bedroom_mini.jpg"/>
<img src="goldenmile_backyard3_mini.jpg"/>
<img src="goldenmile_deck_mini.jpg"/>
<img src="goldenmile_view_mini.jpg"/>
</figure>
</div>
</div>
</div>
CSS
body {
background-color: #335942;
background-image: url('background.gif');
background-repeat: repeat-y;
font-family: 'PT Sans Narrow', sans-serif;
font-size: 0.875em;
color: #000000;
}
h1 {
color: #FFFFFF;
font-size: 4.5em;
}
h2 {
font-size: 2.25em;
}
h3 {
font-size: 1.5em;
}
h4 {
font-size: 1.142857142857143em;
padding-top: 5px;
}
#wrapper {
max-width: 90%;
margin-top: 2.12765957446809%;
margin-left: 2%;
margin-bottom: 2%;
}
#backer {
background-color: #FFFFFF;
max-width: 70%;
display: table;
padding: 2.12765957446809%;
}
#listing {
margin-bottom: 1%;
}
#main_image {
float: left;
max-width: 74.46808510638298%;
float: left;
}
#listing_info {
width: 15.95744680851064%;
float: right;
}
#bryan {
font-size: 1em;
}
#listing_history {
width: 100%;
clear: both;
padding-top: 10px;
}
#extra_images {
width: 100%;
padding-top: 10px;
text-align: center;
}
The image on your front page is 700px wide. After you add in all of the margins/paddings on ancestor elements, it ends up coming out to about 763px. If images are meant to scale with the viewport, they are typically styled like this:
img {
max-width: 100%;
}