I am formatting an EPUB eBook using XHTML. All of the styling seems fine apart from the body. The body tag does not span the full width of the viewport, it spans from the left edge but falls short at the right hand side. The p tags however stretch further than the body itself, this makes the layout look slightly off.
* {
margin: 0;
padding: 0;
text-decoration: none;
list-style-type: none;
font-family: 'Palatino Linotype', serif;
max-width: 100vw;
min-width: 100vw;
}
body {
width: 100%;
}
#title {
font-size: 50px;
padding: 50px 30px;
}
h1, #author, .copyright {
text-align: center;
padding: 30px;
}
.ack {
text-align: center;
}
h1 {
padding: 30px;
}
p {
width: 100%;
text-align: justify;
padding: 30px;
}
a {
display: list-item;
text-align: center;
color: #d40000;
padding: 30px;
}
.page-break {
page-break-before: always;
}
#img-1 {
width: 110%;
height: 40vh;
background: url(../Images/1.jpg) no-repeat center center;
background-size: cover;
}
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>The Menu Selection</title>
<link rel="stylesheet" href="Styles/style.css"></link>
</head>
<body>
<h1 id="title" class="h1-space">The Menu Selection</h1>
<h2 id="author " class="copyright">Liana K. Rose</h2>
<p class="copyright">Published by Once Media</p>
<p class="copyright">© 2018 London</p>
<p class="copyright">All Rights Reserved. No part of this book may be reproduced or utilized in any form or by any means, electronic or mechanical, including photocopying, recording, or by any information storage and retrieval system, without permission in writing from the publisher</p>
<h1 class="page-break">Acknowledgments</h1>
<p class="ack">To all of my friends who listened to my stories as I lived those memories. Especially Sarah, Natalie, Sharon, Katie and Aimee for also giving me the idea to write the book.</p>
<p class="ack">To all of my ‘Brothers from another Mother’. Showing me how it was from a man’s point of view.</p>
<p class="ack">My Husband for being so supportive and understanding when the creation of this book became my life.</p>
<p class="ack">A massive thank you to all the Cock Wombles I have encountered. If it wasn’t for you as a collection, I wouldn’t have had a book to write.</p>
<p class="ack">Some names and identifying details have been changed to protect the privacy of individuals.</p>
<h1 class="page-break">Contents</h1>
<div>
HOW DO YOU CHOOSE FROM THE MENU?
</div>
<div>
THE ONE WHO WAS MY FIRST TRUE LOVE
</div>
<div>
THE ONE WHO GAVE GREAT HEAD
</div>
<div>
THE ONE WHO LIKED TO PUNISH
</div>
<div>
THE ONE WHO MIXED BUSINESS WITH PLEASURE
</div>
<div>
THE ONE WHO WAS A FRIEND WITH BENEFITS
</div>
<div>
THE ONE WHO WANTED TO BE THE FREAK
</div>
<div>
THE ONE WHO KNEW HOW TO PUSH MY BUTTONS
</div>
<div>
THE ONE WHO WAS MR GREY
</div>
<div>
THE ONE WHO HAD A CLASSY TWIST
</div>
<div>
THE ONE WHO CONFUSED THE HELL OUT OF ME
</div>
<div>
THE ONE WHO WAS A DECEIVING NORTHERNER
</div>
<div>
THE ONE WHO SATISFIED MY EVERY CRAVING
</div>
<h1 id="one" class="page-break">How Do You Choose from the Menu?</h1>
<p>You hear men tell their friends, of their many stories of meeting up with different ladies. Dating them, seducing them and getting them into the bed, a car or even down an alley way on the side of a bar.<br />How often do you hear a woman tell similar stories so openly? And when you do hear her speak in such a way. Would you think 'whore' or 'you go girl'?</p>
<p>We are led to believe it is socially wrong for a woman to sleep around and judge her if she socialises with multiple men. But is it wrong for you to have choices?</p>
<p>Like many others I often fancy a different cuisine from time to time. Dependant on how my day has been, or the weather. <br />When it's raining and cold, I want that comfort food: sausage and mash with a splash of gravy. Fills my hole just right. <br />
When I'm sitting in a park on a hot summer’s day I am immediately attracted to a fruit cocktail. Not any fruit but the type that makes me want to explore more, make my mouth salivate.... The exotic type.</p>
<p>We are offered so many options when shopping. Whether it be walking through the supermarket to buy milk; full fat, semi skimmed or soya. Or choosing a cocktail in the bar. Fruit syrups added, a shot of caffeine with cream on top. Even an alcohol- free mocktail.</p>
<p>If we have the option to choose from an entire menu selection, to suit the mood we are in and know how it satisfies our taste buds, then why can we not do that with men?</p>
<p>There are some familiar options that we are automatically attracted to. Often, in times of need, you just want to keep it simple, stick to what you know and get what you expect.</p>
<p><strong>Comfort sex</strong> - Imagine a hard day at work. All you want is a big hug from your friend who reassures you that everything is going to be okay. What if the hug lasted the entire night? You could have a connection with that man and be in the company of just you two, enjoying that moment together. When it's time to get on with your everyday life then leave that comfort behind and get back to business single handedly</p>
<p><strong>Exciting sex</strong>Exciting sex – If you’re in need of some fun then why not speak to the man who has appeared in your life at some point. You know the one who likes to spank you, and lick you from head to toe. Puts you in positions that even you didn't think you could handle. That man who makes you feel every inch of the woman you are, when he is inside of you.</p>
<p>However it is also okay to broaden your horizons and dine somewhere completely new, with the unknown. You could enter some risks, not enjoying the experience or you could unravel a whole new you and actually be pleasantly surprised with the outcome.</p>
<p>This is not a message for you to take a different man home every night of the week. This is to let you know that you do not have to settle for something that is so different from what you are yearning for. <br />Keep selecting from the buffet menu until you have found the main dish that simply satisfies all of your cravings.</p>
<div id="img-1"></div>
</body>
</html>
I have tried width: 100% and 100vw, I tried using a viewport meta tag but I am out of ideas. can anyone point me in the right direction?
Check out the elements with min-width:100vw and padding:30px, which add up to a total of 100vw + 30px. To solve that, either use calc(100vw - 30px) for the widths there or use box-sizing:border-box everywhere.
Then there's the matter of the vertical scrollbar, which gets in the way of the calculation of how large a vw actually is. So, 100% is better than 100vw in this case.
There is also the one div with width: 110%, but that has no further consequences, as max-width overrides width. I'd recommend removing the width though, since this may confuse matters in the future.
This also allows us to get rid of the min-width and max-width for everything.
* {
margin: 0;
padding: 0;
text-decoration: none;
list-style-type: none;
font-family: 'Palatino Linotype', serif;
/* These two new lines are really all that's needed */
width:100%;
box-sizing:border-box;
/* cleaned up this
max-width: 100vw;
min-width: 100vw;*/
}
/* and this; no longer necessary
body {
width: 100%;
}
*/
#title {
font-size: 50px;
padding: 50px 30px;
}
h1, #author, .copyright {
text-align: center;
padding: 30px;
}
.ack {
text-align: center;
}
h1 {
padding: 30px;
}
p {
/* width: 100%; not needed */
text-align: justify;
padding: 30px;
}
a {
display: list-item;
text-align: center;
color: #d40000;
padding: 30px;
}
.page-break {
page-break-before: always;
}
#img-1 {
/* width: 110%; removed */
height: 40vh;
background: url(../Images/1.jpg) no-repeat center center;
background-size: cover;
}
<h1 id="title" class="h1-space">The Menu Selection</h1>
<h2 id="author " class="copyright">Liana K. Rose</h2>
<p class="copyright">Published by Once Media</p>
<p class="copyright">© 2018 London</p>
<p class="copyright">All Rights Reserved. No part of this book may be reproduced or utilized in any form or by any means, electronic or mechanical, including photocopying, recording, or by any information storage and retrieval system, without permission in writing from the publisher</p>
<h1 class="page-break">Acknowledgments</h1>
<p class="ack">To all of my friends who listened to my stories as I lived those memories. Especially Sarah, Natalie, Sharon, Katie and Aimee for also giving me the idea to write the book.</p>
<p class="ack">To all of my ‘Brothers from another Mother’. Showing me how it was from a man’s point of view.</p>
<p class="ack">My Husband for being so supportive and understanding when the creation of this book became my life.</p>
<p class="ack">A massive thank you to all the Cock Wombles I have encountered. If it wasn’t for you as a collection, I wouldn’t have had a book to write.</p>
<p class="ack">Some names and identifying details have been changed to protect the privacy of individuals.</p>
<h1 class="page-break">Contents</h1>
<div>
HOW DO YOU CHOOSE FROM THE MENU?
</div>
<div>
THE ONE WHO WAS MY FIRST TRUE LOVE
</div>
<div>
THE ONE WHO GAVE GREAT HEAD
</div>
<div>
THE ONE WHO LIKED TO PUNISH
</div>
<div>
THE ONE WHO MIXED BUSINESS WITH PLEASURE
</div>
<div>
THE ONE WHO WAS A FRIEND WITH BENEFITS
</div>
<div>
THE ONE WHO WANTED TO BE THE FREAK
</div>
<div>
THE ONE WHO KNEW HOW TO PUSH MY BUTTONS
</div>
<div>
THE ONE WHO WAS MR GREY
</div>
<div>
THE ONE WHO HAD A CLASSY TWIST
</div>
<div>
THE ONE WHO CONFUSED THE HELL OUT OF ME
</div>
<div>
THE ONE WHO WAS A DECEIVING NORTHERNER
</div>
<div>
THE ONE WHO SATISFIED MY EVERY CRAVING
</div>
<h1 id="one" class="page-break">How Do You Choose from the Menu?</h1>
<p>You hear men tell their friends, of their many stories of meeting up with different ladies. Dating them, seducing them and getting them into the bed, a car or even down an alley way on the side of a bar.<br />How often do you hear a woman tell similar stories so openly? And when you do hear her speak in such a way. Would you think 'whore' or 'you go girl'?</p>
<p>We are led to believe it is socially wrong for a woman to sleep around and judge her if she socialises with multiple men. But is it wrong for you to have choices?</p>
<p>Like many others I often fancy a different cuisine from time to time. Dependant on how my day has been, or the weather. <br />When it's raining and cold, I want that comfort food: sausage and mash with a splash of gravy. Fills my hole just right. <br />
When I'm sitting in a park on a hot summer’s day I am immediately attracted to a fruit cocktail. Not any fruit but the type that makes me want to explore more, make my mouth salivate.... The exotic type.</p>
<p>We are offered so many options when shopping. Whether it be walking through the supermarket to buy milk; full fat, semi skimmed or soya. Or choosing a cocktail in the bar. Fruit syrups added, a shot of caffeine with cream on top. Even an alcohol- free mocktail.</p>
<p>If we have the option to choose from an entire menu selection, to suit the mood we are in and know how it satisfies our taste buds, then why can we not do that with men?</p>
<p>There are some familiar options that we are automatically attracted to. Often, in times of need, you just want to keep it simple, stick to what you know and get what you expect.</p>
<p><strong>Comfort sex</strong> - Imagine a hard day at work. All you want is a big hug from your friend who reassures you that everything is going to be okay. What if the hug lasted the entire night? You could have a connection with that man and be in the company of just you two, enjoying that moment together. When it's time to get on with your everyday life then leave that comfort behind and get back to business single handedly</p>
<p><strong>Exciting sex</strong>Exciting sex – If you’re in need of some fun then why not speak to the man who has appeared in your life at some point. You know the one who likes to spank you, and lick you from head to toe. Puts you in positions that even you didn't think you could handle. That man who makes you feel every inch of the woman you are, when he is inside of you.</p>
<p>However it is also okay to broaden your horizons and dine somewhere completely new, with the unknown. You could enter some risks, not enjoying the experience or you could unravel a whole new you and actually be pleasantly surprised with the outcome.</p>
<p>This is not a message for you to take a different man home every night of the week. This is to let you know that you do not have to settle for something that is so different from what you are yearning for. <br />Keep selecting from the buffet menu until you have found the main dish that simply satisfies all of your cravings.</p>
<div id="img-1"></div>
Related
I am stuck on a problem: I have a horizontally scrolling layout (no vertical scroll), where I want to lay out text content in columns. Since I don't know how long the text will be, I want all the available text to be filled up in columns according to the available space (column width can be fixed, max height is the viewport height).
See the problem illustrated here (resize to see how text flows): https://ldaniel.eu/_/fj-test/text-test.html
Thought I could use CSS columns for it — including column-fill: auto; to let text fill up from left to right instead of evenyl distribute — but it seems that the containing div always tries to fill up the remaining space, even if set to inline-block or flex.
I have been breaking my neck over this problem for a while now, talked about it with some people, but nobody seems to have a solution... is this a limitation of the CSS spec to only work with vertical layouts? Or is it a limitation of my brain to want to solve this with only CSS and leave JS out of it? :)
body {
font-family: sans-serif;
}
.test-wrapper {
border: 1px solid red;
}
.block {
position: relative;
display: flex;
height: 250px;
border: 1px solid blue;
}
.block__text {
position: relative;
display: block;
width: auto;
height: 100%;
flex-grow: 0;
column-width: 200px;
-moz-column-fill: auto;
column-fill: auto;
border: 1px solid cyan;
}
.block__text p {
border: 1px solid orange;
}
<div class="test-wrapper">
<div class="block">
<div class="block__text">
<h2>How I work</h2>
<p>I work by harnessing the intimate power of words, guiding you through face-to-face, hour-long interviews during which we will detail and dissect your projects, your ambitions, and the obstructions you might be facing. These consultations will occasionally
alternate with more active exercises designed to restore the natural connection between thoughts and feelings.</p>
<p>While it may feel at first like we are merely chatting, we will be using your own words and actions as leverage to tap the power of your unconscious mind...</p>
</div>
<div class="block__image">
<img src="http://wiki.apidesign.org/images/8/82/HtmlForFood.png" alt="" />
</div>
</div>
<div class="block">
<div class="block__text">
<h2>Giftedness</h2>
<p>Gifted and talented adults face unique challenges made all the more pressing by the normative demands of contemporary life. While their highly functional intellect enables them to conform outwardly to social and professional expectations, these
coping mechanisms often come at a high personal cost, resulting in silent suffering and the loss of tremendous creative potential.</p>
<p>Giftedness is not solely about IQ, nor is it a badge of honour to be worn in public. In fact, many gifted adults have never undergone an IQ test, nor do they have any reason to. It is, rather, a way of relating to the world, a way that is rich,
layered, intense, and all-too-often coloured by inner conflicts and a distressing surfeit of information. Giftedness can be both a blessing and a curse: only you can decide.</p>
<p>The joys and pains of gifted individuals have been a particular study of mine ever since I witnessed at first hand what suffering and loneliness these exceptional adults could experience. Today, I am privileged to work with these talented minds
as they unlock their full potential in fields as diverse as technology, marketing, politics, and the arts (If my name rings a bell, it might be because my mother literally wrote the book on giftedness). The diversity and intensity of their achievements
never fails to humble and inspire me.</p>
</div>
<div class="block__image">
<img src="http://wiki.apidesign.org/images/8/82/HtmlForFood.png" alt="" />
</div>
</div>
</div>
I'm trying to float an image to the right. This should be simple. It looks fine in FF and Chrome, but in IE, the text doesn't wrap around the image. I think it has something to do with the style I'm giving to my paragraph tags. Anyway, any insight would be appreciated!
style:
.story {
margin: 0 0 0 360px;
padding-top: 30px;
padding-left: 30px;
max-width: 900px;
width: 75%;
}
.story p {
line-height: 150%;
font-size: 20px;
}
.half-embed {
float: right;
position:relative;
margin-right:-100px;
margin-left:20px;
display: inline !important;
clear:both;
}
.imageborder {
border: 1px solid lightgray;
padding: 10px;
}
html:
<div class="story">
<p>Four score and seven years ago our fathers brought forth on this continent, a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal.</p>
<p>Now we are engaged in a great civil war, testing whether that nation, or any nation so conceived and so dedicated, can long endure. We are met on a great battle-field of that war. We have come to dedicate a portion of that field, as a final resting place for those who here gave their lives that that nation might live. It is altogether fitting and proper that we should do this.</p>
<p><img src="images/myimage.jpg" class="half-embed imageborder" /></p>
<p>Four score and seven years ago our fathers brought forth on this continent, a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal.</p>
<p>Now we are engaged in a great civil war, testing whether that nation, or any nation so conceived and so dedicated, can long endure. We are met on a great battle-field of that war. We have come to dedicate a portion of that field, as a final resting place for those who here gave their lives that that nation might live. It is altogether fitting and proper that we should do this.</p>
</div>
You are floating an image, that is in a display: inline-block element (by default) == <p>
So the <p> take up the whole width of the veiwport, even if your image is floated. So your text can not wrapping around your image (with the hTML provided here), because your text is in other <p>'s:
<p>Now ....</p>
<p><img src="images/myimage.jpg" class="half-embed imageborder" /></p>
<p>...</p>
To have text wrap around an image, you should do this:
<p>
<img src="images/myimage.jpg" class="half-embed imageborder" alt="">
Now we are engage......//oper that we
</p>
.half-embed {
float: right;
margin: 0 0 20px 20px;
display: block;
}
Mark's answer works on my test page, but not on my actual page, so there is something missing. However, overall, IE7 is just broken. My float works everywhere but there, even higher versions of IE. So I'm going to simplify the page for IE7 and warn viewers of that fact.
You're setting display: inline... you can't float inline elements.
Also, be sure that you're setting the doctype. Otherwise, you'll be in quirks mode in IE.
First line of html should be:
<!doctype html>
Remove the image from the paragraph. It has it's own block level scope, and should force the other elements to hang below it. Not sure why it doesn't do it consistently across browsers, but that's how it should work.
I have two divs with pretty simple codes here: http://jsfiddle.net/vBngZ/
The codes(HTML):
<div class="subcontent" id="div2">
<div class="orangebox" style="width: 55%;margin-top: 6px;float: left;background-color: red;">
<div class="title">Shipping</div>
<ul>
<li>Item will be shipped from Palestine within 48 hours after receiving full payment, with tracking information that will be provided to you.</li>
<li>All products are checked and packaged well before dispatch.</li>
<li>We ship the soap with its Gamila Secret original box.</li>
<li>We ship worldwide by Palastine postal. This international order may take longer to arrive, Normally the shipment to worldwide is used to take 18 to 35 business days.</li>
<li>If you have not received your shipment within 35 days from payment, please contact us IMMEDIATELY. We will track the shipment and get back to you as soon as possible with a reply. </li>
</ul>
</div>
<div class="bluebox" style="width: 44.3%;margin-top: 6px;float: right;background-color: blue">
<div class="title">Payment</div>
<ul>
<li>We only accept payments via paypal.</li>
<li>Payment must be made within 4 days upon auction end, otherwise an unpaid case will be opened</li>
</ul>
</div>
</div>
One div is taller than the other, and I want both of them to be in the same line/row and in the same height even after zoom-in(CTRL +) and zoom-out(CTRL -), two things I don't want is:
1) not using overflow, so I don't want a scrollbar to appear after zoom-in.
2) I want all the words that inside the paragraph to stay inside it even after zoom-in.
I tried to figure out a solution and I came up with the display: table-cell but I don't know how could I use it here.
If there's any other solution please give it to me.
I've updated your Fiddle with a working solution.
Best practice: always separate your styling from your markup.
I took the liberty of separating the relevant styling from the markup, notice how its clearer & cleaner that way.
Explanation:
set the container (in your case its .subcontent) display attribute to table-row.
set the content divs (in your case .orangebox & .bluebox) display attribute to table-cell.
remove the float rules from your content divs.
replace the margin-top with padding-top if you want to have extra space before the content.
CSS
.subcontent
{
display: table-row;
}
.orangebox
{
display: table-cell;
width: 55%;
padding-top: 6px;
background-color: red;
}
.bluebox
{
display: table-cell;
width: 44.3%;
padding-top: 6px;
background-color: blue;
}
This is something I haven't experienced before, my div height isn't cooperating in CSS & is throwing off the whole flow of a page. The div is supposed to be centered, 960px wide, approx 1000px height & 150px of padding on the bottom to separate it from my footer.
Website Link: http://tinyurl.com/b8vvhgr
HTML
<div id="energyrating-desc">
<h1><span class="gray">Energy Audit Services</span></h2>
<img src="/nd/images/yellow-bar.jpg" width="960" height="2" style="padding-bottom:2px;"></img>
<p>According to the EPA Energy Star program, the average American household spends $1,500 annually on
energy bills - a number that may go up as much as 50% this year.
</p>
<br>
<p>Almost half of that energy goes to heating and cooling your home. Lighting and appliances represent about a
quarter of those costs. Each of us can take action today to reduce energy use at home, while still staying
comfortable.
</p>
<br>
<p>Let New Day Homes perform a top-to-bottom Energy Audit of your home to help determine the cause of any
problems you may be experiencing, help you gauge your home's energy efficiency, and recommend clear
steps you can take to reduce your energy bills.</p>
<br>
<p><b>Energy Audit</b></p>
<p>
Find out where you can save on energy costs by having a full energy audit done on your home.
</p>
<br>
<p><b>New home Certified Energy Ratings</b></p>
<p>
Performed for builders and home buyers.
</p>
<br>
<p><b>Ratings for Builder Tax Credit</b></p>
<br>
<p><b>Energy STAR Ratings</b></p>
<br>
<p><b>IECC-2009 Testing</b></p>
<p>
Blower door testing, insulation inspections, and pre-verification to meet the IECC-2009
Energy Code requirements.
</p>
</div>
CSS
/*Energy Description*/
#energyrating-desc {
padding-bottom: 150px;
width: 960px;
height: 670px;
margin-left: auto;
margin-right: auto;
}
I greatly appreciate your help.
i took a look in your css source, you have a html closeing tag in your .css take a look
body {
/*background: url(/nd/images/bgtop.png), url(/nd/images/bg.jpg);
background: url(/nd/images/bgtop.jpg)\9; /* IE 8 and below */
background-repeat: repeat-x\9; /* IE 8 and below */
background-repeat: repeat-x, repeat;*/
color: #000000;
font-size:14px;
font-family: sans-serif;
}
</body>
remove the
</body>
and i dont see energyrating-desc in any of your css
Edit:
Checked with firebug too just in case, you did not specify energyrating-desc in any of your css....
make your div in the centre by assigning proper margin.
margin:0 auto;
#energyrating-desc {
padding-bottom: 150px;
width: 960px;
height: 670px;
margin:0 auto;
}
I reviewed the trace styles panel in the developer tools, there is not style attribute applied to the div element. Also I didn't find any style id named "energyrating-desc" in the css files of the website?! where did you define it? After all, I found that the html response of the "energy.php" has multiple "html" tags and an incorrect structure. You have to do that first before looking for a bug in the css styles.
An html document must have one root tag named "html", one tag inside it named "body", and if you needed, a tag named "head" for including css resources and meta tags or client scripts. Even one incorrect tag (unclosed, bad-written and ...) can cause many unbelievable layout you've never seen.
Cheers
In this 2-column layout, I want to put a border over the whole page. I thought if I put 'border:solid' inside the <body> tag would do the work, but it didn't. It only put a border over the heading <h1>. Could somebody help?
Thanks!
http://jsfiddle.net/v5gSt/
<!DOCTYPE html>
<html>
<head>
<title>Two Column Layout</title>
<style type="text/css">
body {
width: 960px;
font-family: Arial, Verdana, sans-serif;
color: #665544;
border: solid;
}
.column1of2 {
float: left;
width: 620px;
margin: 10px;}
.column2of2 {
float: left;
width: 300px;
margin: 10px;}
</style>
</head>
<body>
<h1>The Evolution of the Bicycle</h1>
<div class="column1of2">
<h3>The First Bicycle</h3>
<p>In 1817 Baron von Drais invented a walking machine that would help him get around the royal gardens faster: two same-size in-line wheels, the front one steerable, mounted in a frame upon which you straddled. The device was propelled by pushing your feet against the ground, thus rolling yourself and the device forward in a sort of gliding walk.</p>
<p>The machine became known as the Draisienne (or "hobby horse"). It was made entirely of wood. This enjoyed a short lived popularity as a fad, not being practical for transportation in any other place than a well maintained pathway such as in a park or garden.</p>
<h3>Further Innovations</h3>
<p>The next appearance of a two-wheeled riding machine was in 1865, when pedals were applied directly to the front wheel. This machine was known as the velocipede (meaning "fast foot") as well as the "bone shaker," since it's wooden structure combined with the cobblestone roads of the day made for an extremely uncomfortable ride. They also became a fad and indoor riding academies, similar to roller rinks, could be found in large cities.</p>
<p>In 1870 the first all-metal machine appeared. (Prior to this, metallurgy was not advanced enough to provide metal which was strong enough to make small, light parts out of.) The pedals were attached directly to the front wheel with no freewheeling mechanism. Solid rubber tires and the long spokes of the large front wheel provided a much smoother ride than its predecessor.</p>
</div>
<div class="column2of2">
<h3>Bicycle Timeline</h3>
<ul>
<li>1817: Draisienne</li>
<li>1865: Velocipede</li>
<li>1870: High-wheel bicycle</li>
<li>1876: High-wheel safety</li>
<li>1885: Hard-tired safety</li>
<li>1888: Pneumatic safety</li>
</ul>
</div>
</body>
</html>
While not semantic, adding an empty div before the closing body tag with the style clear:both fixes it.
jsFiddle example
Actually your border: solid; works :) but the two div are set to float: left so there are remove of the document flow, you have to use the clear CSS property on a element after the last div.
The very basic example which is far from perfect but works :
<style type="text/css">
clear
{
clear: both;
}
</style>
<div class="column2of2">
...
</div>
<br class="clear"></span>
There a lot of solution out there for create a clearer you can view some of them on Quirksmode
put this line before body's end tag
<div style="clear:both "></div>
<html>
<head>
<title>Two Column Layout</title>
<style type="text/css">
body {
width: 970px;
font-family: Arial, Verdana, sans-serif;
color: #665544;
border:medium black inset;
}
.column1of2 {
float: left;
width: 620px;
margin: 10px;
}
.column2of2 {
float: left;
width: 300px;
margin: 10px;
}
</style>
</head>
<body>
<h1>The Evolution of the Bicycle</h1>
<div class="column1of2">
<h3>The First Bicycle</h3>
<p>In 1817 Baron von Drais invented a walking machine that would help him get around the royal gardens faster: two same-size in-line wheels, the front one steerable, mounted in a frame upon which you straddled. The device was propelled by pushing your feet against the ground, thus rolling yourself and the device forward in a sort of gliding walk.</p>
<p>The machine became known as the Draisienne (or "hobby horse"). It was made entirely of wood. This enjoyed a short lived popularity as a fad, not being practical for transportation in any other place than a well maintained pathway such as in a park or garden.</p>
<h3>Further Innovations</h3>
<p>The next appearance of a two-wheeled riding machine was in 1865, when pedals were applied directly to the front wheel. This machine was known as the velocipede (meaning "fast foot") as well as the "bone shaker," since it's wooden structure combined with the cobblestone roads of the day made for an extremely uncomfortable ride. They also became a fad and indoor riding academies, similar to roller rinks, could be found in large cities.</p>
<p>In 1870 the first all-metal machine appeared. (Prior to this, metallurgy was not advanced enough to provide metal which was strong enough to make small, light parts out of.) The pedals were attached directly to the front wheel with no freewheeling mechanism. Solid rubber tires and the long spokes of the large front wheel provided a much smoother ride than its predecessor.</p>
</div>
<div class="column2of2">
<h3>Bicycle Timeline</h3>
<ul>
<li>1817: Draisienne</li>
<li>1865: Velocipede</li>
<li>1870: High-wheel bicycle</li>
<li>1876: High-wheel safety</li>
<li>1885: Hard-tired safety</li>
<li>1888: Pneumatic safety</li>
</ul>
</div>
<div style="clear:both "></div>
</body>
Floated elements are taken out of the document flow, and as a result their containers don't know anything about their width or height unless they are floated.
Think of it as if they are 2D and were literally floating on top of the container.
You have two main options to get round this:
Float the body.
Wrap the divs in a page container div and float that.