I would like to put a box in my page body but exclude the two elements in the upper area.
I wrote the code for the elements, but it seems that it have been ignored:
EDIT: I added the HTML. I cannot create other div's, so I don't know how to specify that the two elements must be excluded from the code written in the body's css.
body {
background-image: url("https://courses.cs.washington.edu/courses/cse190m/11sp/homework/2/background.png");
margin: 0;
padding: 0;
font-size: 8pt;
font-family: "Tahoma";
width: 800px;
border: 4px solid red;
}
#banner {
text-align: center;
background-image: url("https://courses.cs.washington.edu/courses/cse190m/11sp/homework/2/bannerbg.png");
background-repeat: repeat-x;
height: 50px;
}
h1 {
text-align: center;
font-style: bold;
font-family: "Verdana";
font-size: 24pt;
text-shadow: 3px 3px #999999;
}
<!DOCTYPE html>
<head>
<title>TMNT - Rancid Tomatoes</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="movie.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="banner">
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/banner.png" alt="Rancid Tomatoes">
</div>
<h1>TMNT (2007)</h1>
<div>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/overview.png" alt="general overview">
</div>
<dl>
<dt>STARRING</dt>
<dd>Patrick Stewart <br> Mako <br> Sarah Michelle Gellar <br> Kevin Smith</dd>
<dt>DIRECTOR</dt>
<dd>Kevin Munroe</dd>
<dt>RATING</dt>
<dd>PG</dd>
<dt>THEATRICAL RELEASE</dt>
<dd>Mar 23, 2007</dd>
<dt>MOVIE SYNOPSIS</dt>
<dd>After the defeat of their old arch nemesis, The Shredder, the Turtles have grown apart as a family.</dd>
<dt>MPAA RATING</dt>
<dd>PG, for animated action violence, some scary cartoon images and mild language</dd>
<dt>RELEASE COMPANY</dt>
<dd>Warner Bros.</dd>
<dt>RUNTIME</dt>
<dd>90 mins</dd>
<dt>GENRE</dt>
<dd>Action/Adventure, Comedies, Childrens, Martial Arts, Superheroes, Ninjas, Animated Characters</dd>
<dt>BOX OFFICE</dt>
<dd>$54,132,596</dd>
<dt>LINKS</dt>
<dd>
<ul>
<li>The Official TMNT Site</li>
<li>RT Review</li>
<li>RT Home</li>
<li>CSE 190 M</li>
</ul>
</dd>
</dl>
<div>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/rottenbig.png" alt="Rotten">
33%
</div>
<p>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/rotten.gif" alt="Rotten">
<q>Ditching the cheeky, self-aware wink that helped to excuse the concept's inherent corniness, the movie attempts to look polished and 'cool,' but the been-there animation can't compete with the then-cutting-edge puppetry of the 1990 live-action movie.</q>
</p>
<p>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/critic.gif" alt="Critic">
Peter Debruge <br>
Variety
</p>
<p>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/fresh.gif" alt="Fresh">
<q>TMNT is a fun, action-filled adventure that will satisfy longtime fans and generate a legion of new ones.</q>
</p>
<p>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/critic.gif" alt="Critic">
Todd Gilchrist <br>
IGN Movies
</p>
<p>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/rotten.gif" alt="Rotten">
<q>It stinks!</q>
</p>
<p>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/critic.gif" alt="Critic">
Jay Sherman (unemployed)
</p>
<p>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/rotten.gif" alt="Rotten">
<q>The rubber suits are gone and they've been redone with fancy computer technology, but that hasn't stopped them from becoming dull.</q>
</p>
<p>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/critic.gif" alt="Critic">
Joshua Tyler <br>
CinemaBlend.com
</p>
<p>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/rotten.gif" alt="Rotten">
<q>YOUR REVIEW HERE</q>
</p>
<p>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/critic.gif" alt="Critic">
NAME <br>
PUBLICATION
</p>
<p>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/rotten.gif" alt="Rotten">
<q>The turtles themselves may look prettier, but are no smarter; torn irreparably from their countercultural roots, our superheroes on the half shell have been firmly co-opted by the industry their creators once sought to spoof.</q>
</p>
<p>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/critic.gif" alt="Critic">
Jeannette Catsoulis <br>
New York Times
</p>
<p class="rotten">
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/rotten.gif" alt="Rotten">
<q>Impersonally animated and arbitrarily plotted, the story appears to have been made up as the filmmakers went along.</q>
</p>
<p>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/critic.gif" alt="Critic">
Ed Gonzalez <br>
Slant Magazine
</p>
<p>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/fresh.gif" alt="Fresh">
<q>The striking use of image and motion allows each sequence to leave an impression. It's an accomplished restart to this franchise.</q>
</p>
<p>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/critic.gif" alt="Critic">
Mark Palermo <br>
Coast (Halifax, Nova Scotia)
</p>
<p>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/rotten.gif" alt="Rotten">
<q>The script feels like it was computer generated. This mechanical presentation lacks the cheesy charm of the three live action films.</q>
</p>
<p>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/critic.gif" alt="Critic">
Steve Rhodes <br>
Internet Reviews
</p>
<p>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/rotten.gif" alt="Rotten">
<q>YOUR REVIEW HERE</q>
</p>
<p>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/critic.gif" alt="Critic">
NAME <br>
PUBLICATION
</p>
<p>(1-10) of 88</p>
<div>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/w3c-xhtml.png" alt="Validate HTML">> <br>
<img src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!">
</div>
</body>
</html>
This is how the page should be:
enter image description here
The issue is that you have limited the width of the body and this is not recommended. Instead wrap everything except the elements you want excluded in a separate container div and limit the width of that.
body {
background-image: url("https://courses.cs.washington.edu/courses/cse190m/11sp/homework/2/background.png");
margin: 0;
padding: 0;
font-size: 8pt;
font-family: "Tahoma";
}
.container {
margin: auto;
max-width: 800px;
border: 4px solid red;
}
#banner {
text-align: center;
background-image: url("https://courses.cs.washington.edu/courses/cse190m/11sp/homework/2/bannerbg.png");
background-repeat: repeat-x;
height: 50px;
}
h1 {
text-align: center;
font-style: bold;
font-family: "Verdana";
font-size: 24pt;
text-shadow: 3px 3px #999999;
}
<div id="banner">
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/banner.png" alt="Rancid Tomatoes">
</div>
<div class="container">
<h1>TMNT (2007)</h1>
<div>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/overview.png" alt="general overview">
</div>
<dl>
<dt>STARRING</dt>
<dd>Patrick Stewart <br> Mako <br> Sarah Michelle Gellar <br> Kevin Smith</dd>
<dt>DIRECTOR</dt>
<dd>Kevin Munroe</dd>
<dt>RATING</dt>
<dd>PG</dd>
<dt>THEATRICAL RELEASE</dt>
<dd>Mar 23, 2007</dd>
<dt>MOVIE SYNOPSIS</dt>
<dd>After the defeat of their old arch nemesis, The Shredder, the Turtles have grown apart as a family.</dd>
<dt>MPAA RATING</dt>
<dd>PG, for animated action violence, some scary cartoon images and mild language</dd>
<dt>RELEASE COMPANY</dt>
<dd>Warner Bros.</dd>
<dt>RUNTIME</dt>
<dd>90 mins</dd>
<dt>GENRE</dt>
<dd>Action/Adventure, Comedies, Childrens, Martial Arts, Superheroes, Ninjas, Animated Characters</dd>
<dt>BOX OFFICE</dt>
<dd>$54,132,596</dd>
<dt>LINKS</dt>
<dd>
<ul>
<li>The Official TMNT Site</li>
<li>RT Review</li>
<li>RT Home</li>
<li>CSE 190 M</li>
</ul>
</dd>
</dl>
<div>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/rottenbig.png" alt="Rotten"> 33%
</div>
<p>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/rotten.gif" alt="Rotten">
<q>Ditching the cheeky, self-aware wink that helped to excuse the concept's inherent corniness, the movie attempts to look polished and 'cool,' but the been-there animation can't compete with the then-cutting-edge puppetry of the 1990 live-action movie.</q>
</p>
<p>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/critic.gif" alt="Critic"> Peter Debruge <br> Variety
</p>
<p>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/fresh.gif" alt="Fresh">
<q>TMNT is a fun, action-filled adventure that will satisfy longtime fans and generate a legion of new ones.</q>
</p>
<p>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/critic.gif" alt="Critic"> Todd Gilchrist <br> IGN Movies
</p>
<p>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/rotten.gif" alt="Rotten">
<q>It stinks!</q>
</p>
<p>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/critic.gif" alt="Critic"> Jay Sherman (unemployed)
</p>
<p>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/rotten.gif" alt="Rotten">
<q>The rubber suits are gone and they've been redone with fancy computer technology, but that hasn't stopped them from becoming dull.</q>
</p>
<p>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/critic.gif" alt="Critic"> Joshua Tyler <br> CinemaBlend.com
</p>
<p>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/rotten.gif" alt="Rotten">
<q>YOUR REVIEW HERE</q>
</p>
<p>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/critic.gif" alt="Critic"> NAME <br> PUBLICATION
</p>
<p>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/rotten.gif" alt="Rotten">
<q>The turtles themselves may look prettier, but are no smarter; torn irreparably from their countercultural roots, our superheroes on the half shell have been firmly co-opted by the industry their creators once sought to spoof.</q>
</p>
<p>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/critic.gif" alt="Critic"> Jeannette Catsoulis <br> New York Times
</p>
<p class="rotten">
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/rotten.gif" alt="Rotten">
<q>Impersonally animated and arbitrarily plotted, the story appears to have been made up as the filmmakers went along.</q>
</p>
<p>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/critic.gif" alt="Critic"> Ed Gonzalez <br> Slant Magazine
</p>
<p>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/fresh.gif" alt="Fresh">
<q>The striking use of image and motion allows each sequence to leave an impression. It's an accomplished restart to this franchise.</q>
</p>
<p>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/critic.gif" alt="Critic"> Mark Palermo <br> Coast (Halifax, Nova Scotia)
</p>
<p>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/rotten.gif" alt="Rotten">
<q>The script feels like it was computer generated. This mechanical presentation lacks the cheesy charm of the three live action films.</q>
</p>
<p>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/critic.gif" alt="Critic"> Steve Rhodes <br> Internet Reviews
</p>
<p>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/rotten.gif" alt="Rotten">
<q>YOUR REVIEW HERE</q>
</p>
<p>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/critic.gif" alt="Critic"> NAME <br> PUBLICATION
</p>
<p>(1-10) of 88</p>
<div>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/w3c-xhtml.png" alt="Validate HTML">> <br>
<img src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!">
</div>
</div>
Related
I'm trying to make a little indie game site, and I'd like to make the section of each entry that contains the title and tags of the game a lighter green than the portion holding the description and picture.
body {
margin: 0;
padding-top: 150;
padding-bottom: 0;
}
.fixed-header {
width: 100%;
position: fixed;
background: #75b478;
color: black;
text-align: center;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: large;
top: 0;
z-index: 1;
margin: 0;
}
.container {
width: 100%;
background-color: #589c5b;
overflow: auto;
margin: 0;
}
nav a {
color: rgb(255, 255, 255);
text-decoration: none;
padding: 5px 35px 10px;
display: inline-block;
width: 20%;
height: 25px;
line-height: 25px;
margin: 0;
}
a:link, a:visited, a:hover, a:active {
text-decoration: none;
color: rgb(255, 255, 255);
}
article {
background-color: #67aa69;
text-align: center;
width: 30%;
padding: 2;
position: relative;
border-radius: 10%;
}
.section {
text-align: center;
margin-top: 50px;
font-family: 'Andika', sans-serif;
}
.tags {
font-style: italic;
font-family: 'Source Sans Pro', sans-serif;
}
.games {
display: flex;
flex-direction: row;
justify-content: space-evenly;
margin-top: 50px;
margin-bottom: 50px;
}
img {
width: 100%;
height: 250px;
border-radius: 15%;
}
p {
font-family: 'Lato', sans-serif;
}
h2 {
padding-left: 2px;
padding-right: 2px;
}
<DOCTYPE! html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<html lang="en-US">
<head>
<link rel="stylesheet" href="page.css">
<title>Indie Games List</title>
<link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital#1&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Andika:wght#700&display=swap" rel="stylesheet">
</head>
<body>
<div class="fixed-header">
<h1>Indie Games</h1>
<div class="container">
<nav>
To Play
Reviews
Indie-x
Favorites
</nav>
</div>
</div>
<h1 class="section" id="platformers">Platformers</h1>
<div class="games">
<article>
<h2>Hollow Knight</h2>
<p class="tags">Difficult, Souls-like</p>
<hr>
<p>"Forge your own path in Hollow Knight! An epic action adventure through a vast ruined kingdom of insects and heroes. Explore twisting caverns, battle tainted creatures and befriend bizarre bugs, all in a classic, hand-drawn 2D style."</p>
<img src="hollow-knight.png">
</article>
<article>
<h2>Celeste</h2>
<p class="tags">Difficult, Amazing Soundtrack</p>
<hr>
<p>"Help Madeline survive her inner demons on her journey to the top of Celeste Mountain, in this super-tight platformer from the creators of TowerFall. Brave hundreds of hand-crafted challenges, uncover devious secrets, and piece together the mystery of the mountain."</p>
<img src="celeste.png">
</article>
<article>
<h2>Ori and the Blind Forest/Will of the Wisps</h2>
<p class="tags">Amazing Soundtrack, Metroidvania</p>
<hr>
<p>"Ori and the Blind Forest tells the tale of a young orphan destined for heroics, through a visually stunning action-platformer crafted by Moon Studios for PC."</p>
<img src="ori.png">
</article>
</div>
<div class="games">
<article>
<h2>Cuphead</h2>
<p class="tags">Difficult, Hand-Drawn</p>
<hr>
<p>"Cuphead is a classic run and gun action game heavily focused on boss battles. Inspired by cartoons of the 1930s, the visuals and audio are painstakingly created with the same techniques of the era, i.e. traditional hand drawn cel animation, watercolor backgrounds, and original jazz recordings."</p>
<img src="cuphead.png">
</article>
</div>
<hr>
<h1 class="section" id="horror">Horror</h1>
<div class="games">
<article>
<h2>Omori</h2>
<p class="tags">Psychological Horror, RPG, Amazing Soundtrack</p>
<hr>
<p>"Explore a strange world full of colorful friends and foes. When the time comes, the path you’ve chosen will determine your fate... and perhaps the fate of others as well."</p>
<img src="omori.png">
</article>
<article>
<h2>Needy Streamer Overload</h2>
<p class="tags">Psychological Horror, Visual Novel, Streaming</p>
<hr>
<p>"NEEDY STREAMER OVERLOAD is a “multi-ending ADV” depicting daily life with “OMGkawaiiAngel”, a young girl with a rather extreme need for approval attempting to become the #1 “Internet Angel” (streamer)."</p>
<img src="nso.png">
</article>
<article>
<h2>Little Nightmares 1 & 2</h2>
<p class="tags">Psychological Horror, Platformer, Puzzle</p>
<hr>
<p>"Immerse yourself in Little Nightmares, a dark whimsical tale that will confront you with your childhood fears! Help Six escape The Maw – a vast, mysterious vessel inhabited by corrupted souls looking for their next meal."</p>
<img src="ln.png">
</article>
</div>
<div class="games">
<article>
<h2>Sally Face</h2>
<p class="tags">Psychological Horror, Hand-Drawn, Mystery</p>
<hr>
<p>"Delve into a dark adventure following the boy with a prosthetic face and a tragic past. Unravel the sinister mysteries of Sally's world to find the truth that lies hidden beneath the shadows."</p>
<img src="sallyface.png">
</article>
<article>
<h2>FAITH: The Unholy Trinity</h2>
<p class="tags">Psychological Horror, Retro, Supernatural</p>
<hr>
<p>"What you are about to do has not been approved by the Vatican. As a young priest, struggle against demons, insane cultists, and your own weakening faith in this pixel horror game inspired by the era of classic 8-bit gaming and the "Satanic Scare" of the 1980s."</p>
<img src="faith.png">
</article>
<article>
<h2>Carrion</h2>
<p class="tags">Psychological Horror, Villain Protagonist, Lovecraftian</p>
<hr>
<p>"CARRION is a reverse horror game in which you assume the role of an amorphous creature of unknown origins, stalking and consuming those that imprisoned you."</p>
<img src="carrion.png">
</article>
</div>
<div class="games">
<article>
<h2>Milk inside a bag of milk inside a bag of milk</h2>
<p class="tags">Psychological Horror, Psychedelic, Visual Novel</p>
<hr>
<p>"A short story about what sort of challenges everyday little things can be. Help the girl buy milk, be the first not to disappoint her."</p>
<img src="milk.png">
</article>
<article>
<h2>Iron Lung</h2>
<p class="tags">Psychological Horror, Underwater, Walking Simulator</p>
<hr>
<p>"A short horror game where you pilot a tiny submarine through an ocean of blood on an alien moon."</p>
<img src="ironlung.png">
</article>
<article>
<h2>Madison</h2>
<p class="tags">Psychological Horror, Supernatural, Exploration</p>
<hr>
<p>"MADiSON is a first person psychological horror game that delivers an immersive and terrifying experience. With the help of an instant camera, connect the human world with the beyond, take pictures and develop them by yourself. Solve puzzles, explore your surroundings and most importantly, survive."</p>
<img src="madison.png">
</article>
</div>
<div class="games">
<article>
<h2>Bendy and the Ink Machine/Dark Revival</h2>
<p class="tags">Survival Horror, Unique Art Style, Adventure</p>
<hr>
<p>"Bendy and the Ink Machine is the first person puzzle action horror game that will forever ruin your childhood love of cartoons."</p>
<img src="bendy.png">
</article>
<article>
<h2>Choo-Choo Charles</h2>
<p class="tags">Survival Horror, Open-World, FPS</p>
<hr>
<p>"Navigate an open-world island in an old train, upgrade it over time, and use it to fight an evil spider train named Charles."</p>
<img src="choo.png">
</article>
<article>
<h2>Don't Starve</h2>
<p class="tags">Survival Horror, Open-World, Unique Art Style</p>
<hr>
<p>"Don't Starve is an uncompromising wilderness survival game full of science and magic. Enter a strange and unexplored world full of strange creatures, dangers, and surprises. Gather resources to craft items and structures that match your survival style."</p>
<img src="ds.png">
</article>
</div>
<div class="games">
<article>
<h2>The Mortuary Assistant</h2>
<p class="tags">Survival Horror, Supernatural, Mystery</p>
<hr>
<p>"Alone with the dead... Embalm corpses, banish demons, save your soul."</p>
<img src="tma.png">
</article>
<article>
<h2>Endoparasitic</h2>
<p class="tags">Survival Horror, Third-Person Shooter, Space</p>
<hr>
<p>"Three limbs ripped off, infected with a deadly parasite, you must save your research. Drag yourself through the corridors of a secret research lab on a remote asteroid, fight off horribly mutated monsters, inject countless syringes of vaccines, and survive at all costs."</p>
<img src="endo.png">
</article>
</div>
</body>
I've tried changing the background color of my h2 and .tags elements, but that just sends a light green line across the entire screen. Ideally, I'd like to keep the shape of my boxes and simply change the color above the < br>. All suggestions appreciated!
Put the h2 and p tag in a div and change the background color of that, rather than the individual tags.
So change this
<h2>Hollow Knight</h2>
<p class="tags">Difficult, Souls-like</p></div>
To this
<div class="upper-section">
<h2>Hollow Knight</h2>
<p class="tags">Difficult, Souls-like</p>
</div>
Set the upper section CSS to
.upper-section {
background-color: #39cb34;
}
You should get something like this.
.upper-section {
background-color: #39cb34;
}
p {
font-family: 'Lato', sans-serif;
}
h2 {
padding-left: 2px;
padding-right: 2px;
}
.tags {
font-style: italic;
font-family: 'Source Sans Pro', sans-serif;
}
article {
background-color: #67aa69;
text-align: center;
width: 30%;
padding: 2;
position: relative;
border-radius: 10%;
}
<article>
<div class="upper-section">
<h2>Hollow Knight</h2>
<p class="tags">Difficult, Souls-like</p>
<hr>
</div>
<p>"Forge your own path in Hollow Knight! An epic action adventure through a vast ruined kingdom of insects and heroes. Explore twisting caverns, battle tainted creatures and befriend bizarre bugs, all in a classic, hand-drawn 2D style."</p>
<img src="hollow-knight.png">
</article>
I'm trying to re-format an EPUB using the PDF format of the same book as a model using Calibre. I found this: https://i.stack.imgur.com/tGPWt.jpg
I want to: Make the text on the right look the same as the one on the left.
The EPUB is like this:
Code:
.calibre {
display: block;
font-size: 1em;
padding-left: 0;
padding-right: 0;
margin: 0 5pt;
}
.p2 {
text-indent: 1.5em;
margin: 0;
}
<?xml version='1.0' encoding='utf-8'?>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<body class="calibre">
<p class="p2">It was hard to not watch his Status Page like a hawk (which apparently lived in the mountain areas), but he watched his level slowly rise over the course of the cycle. </p>
<p class="p2">Level 19.02 – A Red Wolf.</p>
<p class="p2">Level 19.08 – Three more Red Wolves.</p>
<p class="p2">Level 19.13 – Some Psycho Killer Bees guarding a Blue Chest with a <i class="calibre3">Pretty Rock</i> in it.</p>
<p class="p2">Level 19.22 – An Undead Swordsman and his Skelemaidens. </p>
<p class="p2">Level 19.29 – A pack of Fish Otters. </p>
<p class="p2">Level 19.38 – A very angry-looking Stump. </p>
<p class="p2">Level 19.45 – Three more Red Wolves. </p>
<p class="p2">Level 19.57 – Some Psycho Killer Bees guarding a Blue Chest with a <i class="calibre3">Pretty Rock</i> in it. (He had gotten turned around at some point and had ended up going in a circle.)</p>
<p class="p2">Level 19.66 – A trip back to kill some Heat Pigs in the Salazarm Desert for more <i>Desert Bacon. </i></p>
</body>
</html>
I just want to change the part after the " - ". On the PDF, it doesn't continue under 'level 19.XX'. If I try to change the text-align using span or something similar it doesn't work. I don't know what to do anymore.
I hope I managed to explain it well. Any ideas?
EDIT: I'll expand the code to what it looks like:
you need to follow this html structure to get this...
I wrapped line with div status-container and then divide label and text separately
I find this solution from here
.status-label {
float:left; padding-right:5px;
}
.status-text {
overflow:hidden; display:block;
}
.p2 {
margin: 0;
}
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<body class="calibre">
<p class="p2">It was hard to not watch his Status Page like a hawk (which apparently lived in the mountain areas), but he watched his level slowly rise over the course of the cycle. </p>
<div class="status-container">
<p class="p2"><span class="status-label">Level 19.02 – </span><span class="status-text">A Red Wolf.</span></p>
</div>
<div class="status-container">
<p class="p2"><span class="status-label">Level 19.08 – </span> <span class="status-text">Three more Red Wolves.</span></p>
</div>
<div class="status-container">
<p class="p2"><span class="status-label">Level 19.13 – </span> <span class="status-text">Some Psycho Killer Bees guarding a Blue Chest with a <i class="calibre3">Pretty Rock</i> in it.</span></p>
</div>
<div class="status-container">
<p class="p2"><span class="status-label">Level 19.22 – </span><span class="status-text"> An Undead Swordsman and his Skelemaidens. </span></p>
</div>
<div class="status-container">
<p class="p2"><span class="status-label">Level 19.29 – </span><span class="status-text"> A pack of Fish Otters. </span></p>
</div>
<div class="status-container">
<p class="p2"><span class="status-label">Level 19.38 – </span><span class="status-text"> A very angry-looking Stump. </span></p>
</div>
<div class="status-container">
<p class="p2"><span class="status-label">Level 19.45 – </span><span class="status-text">Three more Red Wolves. </span></p>
</div>
<div class="status-container">
<p class="p2"><span class="status-label">Level 19.57 – </span> <span class="status-text">Some Psycho Killer Bees guarding a Blue Chest with a <i class="calibre3">Pretty Rock</i> in it. (He had gotten turned around at some point and had ended up going in a circle.)</span></p>
</div>
<div class="status-container">
<p class="p2"><span class="status-label">Level 19.66 – </span> <span class="status-text">A trip back to kill some Heat Pigs in the Salazarm Desert for more <i>Desert Bacon. </i></span></p>
</div>
</body>
</html>
http://www.capitalregionceremonies.net/
On the bottom of the front-page, i'd like to put the weddingwire award block in the center of the 2 other badges but I can't seem to find a way. Any help would be appreciated! Thanks.
Your markup seems a bit odd, I'm not sure if you are entering code in your CMS or the source files. Regardless, you should be able to attain the layout you want with this sort of code structure below.
If you are not familiar with CSS, and have no idea how to add the first block of code, you can edit it at Appearance > Customize > CSS in WordPress (reference), or you could just add them inline to your elements instead (not recommended but may be easier depending on your abilities).
.column-left {
float: left;
width: 33%;
}
.column-right {
float: right;
text-align: right;
width: 33%;
}
.column-center {
display: inline-block;
text-align: center;
width: 33%;
}
<div class="column-left">
<a href="http://www.theknot.com/marketplace/reverend-ronald-hunt-capital-region-ceremonies-rotterdam-ny-550208?utm_source=vendor_website&utm_medium=banner&utm_term=6d82f360-5321-42a9-bd35-a16c012a8cd4&utm_campaign=vendor_badge_assets">
<img src="http://www.capitalregionceremonies.net/wp-content/uploads/2016/01/ASI_2-e1452633825381.png" alt="As Seen in The Knot Magazine" width="75" height="150" border="0">
</a>
</div>
<div class="column-center">
<div class="ww-bca-2014 ww-reset">
<a class="ww-bca-top" title="Weddings, Wedding Venues" href="http://www.weddingwire.com">
<br>
</a>
<a class="ww-bca-top" href="http://www.weddingwire.com">
<img class="alignnone" src="//www.weddingwire.com/assets/badges/BCA-2014/BCA_2014-badge-top.png" alt="Weddings, Wedding Venues" width="124" height="33">
</a>
<a class="ww-bca-bottom" title="Celebrant Ronald Hunt Reviews, Best Wedding Officiants in Albany, Saratoga Springs, Adirondacks - 2014 Couples' Choice Award Winner" href="http://www.weddingwire.com/reviews/celebrant-ronald-hunt-rotterdam/402496f5dd9397b7.html">
<br>
</a>
<a class="ww-bca-bottom" href="http://www.weddingwire.com/reviews/celebrant-ronald-hunt-rotterdam/402496f5dd9397b7.html">
<img class="alignnone" src="//www.weddingwire.com/assets/badges/BCA-2014/BCA_2014-badge-bottom.png" alt="Celebrant Ronald Hunt Reviews, Best Wedding Officiants in Albany, Saratoga Springs, Adirondacks - 2014 Couples' Choice Award Winner" width="124" height="92">
</a>
<p></p>
<div class="ww-clear"></div>
</div>
</div>
<div class="column-right">
<a href="http://www.celebrantinstitute.org" target="_blank">
<img src="http://www.celebrantinstitute.org/logo/life-cycleLogo-5-2010.gif" alt="Celebrant USA Foundation and Institute" border="0">
</a>
</div>
I haven't tested it in all browsers but this should do it. Just wrap the elements you are trying to line up in a div
<div>
<div style="float: left">
<a style="" href="http://www.theknot.com/marketplace/reverend-ronald-hunt-capital-region-ceremonies-rotterdam-ny-550208?utm_source=vendor_website&utm_medium=banner&utm_term=6d82f360-5321-42a9-bd35-a16c012a8cd4&utm_campaign=vendor_badge_assets"><img src="http://www.capitalregionceremonies.net/wp-content/uploads/2016/01/ASI_2-e1452633825381.png" alt="As Seen in The Knot Magazine" width="75" height="150" border="0"></a>
</div>
<div style="float: right;">
<img src="http://www.celebrantinstitute.org/logo/life-cycleLogo-5-2010.gif" alt="Celebrant USA Foundation and Institute" border="0">
</div>
<div class="ww-bca-2014" style="">
<a class="ww-bca-top" title="Weddings, Wedding Venues" href="http://www.weddingwire.com"><br>
</a>
<a class="ww-bca-top" href="http://www.weddingwire.com"><img class="alignnone" src="//www.weddingwire.com/assets/badges/BCA-2014/BCA_2014-badge-top.png" alt="Weddings, Wedding Venues" width="124" height="33"></a><a class="ww-bca-bottom" title="Celebrant Ronald Hunt Reviews, Best Wedding Officiants in Albany, Saratoga Springs, Adirondacks - 2014 Couples' Choice Award Winner" href="http://www.weddingwire.com/reviews/celebrant-ronald-hunt-rotterdam/402496f5dd9397b7.html"><br>
</a>
<a class="ww-bca-bottom" href="http://www.weddingwire.com/reviews/celebrant-ronald-hunt-rotterdam/402496f5dd9397b7.html"><img class="alignnone" src="//www.weddingwire.com/assets/badges/BCA-2014/BCA_2014-badge-bottom.png" alt="Celebrant Ronald Hunt Reviews, Best Wedding Officiants in Albany, Saratoga Springs, Adirondacks - 2014 Couples' Choice Award Winner" width="124" height="92"></a>
<p></p>
</div>
</div>
I have been trying to figure this out for awhile now and I have not been able to get this issue fixed. I am trying to figure out if this is a known issue or I am simply doing something wrong! :/
I am trying to get the page to break into a new page (when printing) on the last <h2> of the page. However it seems that it breaks after the first <h2> every time even though it shouldn't break until the last <h2> that fits on the page.
CSS Code:
#media print{
html, body {
width: 8.5in;
height: 11in;
margin: 0.5in;
}
h2:last-child {
page-break-after:always;
}
}
HTML CODE:
<meta charset="UTF-8" />
<title>Apple Bavarian Torte</title>
<script src="modernizr-1.5.js"></script>
<link href="dwbase.css" rel="stylesheet" />
<link href="dwlayout.css" rel="stylesheet" media="only screen"/>
<link href="dweffects.css" rel="stylesheet" media="only screen" />
<link href="dwprint.css" rel="stylesheet" media="only print" />
<header>
<div id="div1">
Recipes | Ingredients | Articles <br />
<input type="search" id="sbox" name="sfield" />
<input type="button" id="sbutton" value="Search" placeholder="search term" />
</div>
<div id="div2">
Password <br />
<input type="text" id="pwd" name="pwd" placeholder="password" />
<input type="button" id="lbutton" value="Log In" />
</div>
<div id="div3">
User Name <br />
<input type="text" id="user" name="user" placeholder="username" />
</div>
<h1>dessertWeb</h1>
<nav class="horizontal">
<ul>
<li>recipes</li>
<li>menus</li>
<li>holidays</li>
<li>market</li>
<li>shopping</li>
<li>columns</li>
<li>messages</li>
</ul>
</nav>
</header>
<section id="left">
<nav class="vertical">
<h1>Categories</h1>
<ul>
<li>Cakes</li>
<li>Candies</li>
<li>Chocolate</li>
<li>Cookies</li>
<li>Crisps</li>
<li>Crumbles</li>
<li>Custards</li>
<li>Frozen Treats</li>
<li>Gelatins</li>
<li>Liqueur Desserts</li>
<li>Marshmallows</li>
<li>Meringues</li>
<li>Mousse</li>
<li>Pies</li>
<li>Pralines</li>
<li>Sauces</li>
<li>Truffles</li>
</ul>
</nav>
<nav class="vertical">
<h1>Related Recipes</h1>
<ul>
<li>Apple Crisp</li>
<li>Apple Fingers</li>
<li>Apple Streudel</li>
<li>Cherry Torte</li>
<li>Fruit Pie</li>
<li>Parfait</li>
<li>Strawberry Torte</li>
</ul>
</nav>
</section>
<section id="center">
<article>
<hgroup>
<h1>Apple Bavarian Torte
<img src="star.png" alt="3 1/2 stars" />
<img src="star.png" alt="" />
<img src="star.png" alt=""" />
<img src="halfstar.png" alt="" />
</h1>
<h2>by Lemking</h2>
</hgroup>
<img id="dishimg" src="torte.jpg" alt="Torte image" width="250" />
<p>A classic European torte baked in a springform pan. Cream cheese,
sliced almonds, and apples make this the perfect holiday treat
(12 servings).
</p>
<p>Rate/Review | Review Page</p>
</article>
<aside>
<h1>Recipe Box</h1>
<ul>
<li>Add to Recipe Box</li>
<li>Add to Shopping List</li>
<li>Share Recipe</li>
<li>Add to Menu</li>
<li>Customize Recipe</li>
<li>Share/Email</li>
</ul>
</aside>
<h2>Ingredients</h2>
<ul>
<li>1/2 cup butter</li>
<li>1/3 cup white sugar</li>
<li>1/4 teaspoon vanilla extract</li>
<li>1 cup all-purpose flour</li>
<li>1 (8 ounce) package cream cheese</li>
<li>1/4 cup white sugar</li>
<li>1 egg</li>
<li>1/2 teaspoon vanilla extract</li>
<li>6 apples - peeled, cored, and sliced</li>
<li>1/3 cup white sugar</li>
<li>1/2 teaspoon ground cinnamon</li>
<li>1/4 cup sliced almonds</li>
</ul>
<h2>Directions</h2>
<ol>
<li>Preheat oven to 450° F (230° C).</li>
<li>Cream together butter, sugar, vanilla, and flour.</li>
<li>Press crust mixture into the flat bottom of a 9-inch springform pan.
Set aside.</li>
<li>In a medium bowl, blend cream cheese and sugar. Beat in egg and vanilla.
Pour cheese mixture over crust.</li>
<li>Toss apples with sugar and cinnamon. Spread apple
mixture over all.</li>
<li>Bake for 10 minutes. Reduce heat to 400° F (200° C) and continue
baking for 25 minutes.</li>
<li>Sprinkle almonds over top of torte. Continue baking until lightly browned.
Cool before removing from pan.</li>
</ol>
</section>
<section id="right">
<h1>Reviews</h1>
<blockquote>
<p>
<img src="star.png" alt="4 stars" /> <img src="star.png" alt="" />
<img src="star.png" alt="" /> <img src="star.png" alt="" />
</p>
<p>I loved the buttery taste of the crust which complements the apples
very nicely.</p>
<p>
— Reviewed on Sep. 22, 2014 by MMASON.
</p>
</blockquote>
<blockquote>
<p>
<img src="star.png" alt="2 stars" /> <img src="star.png" alt="" />
</p>
<p>Nothing special. I like the crust, but there was a little too much
of it for my taste, and I liked the filling but there was too little
of it. I thought the crunchy apples combined with the sliced almonds
detracted from the overall flavor.</p>
<p>
— Reviewed on Sep. 1, 2014 by GLENDACHEF.
</p>
</blockquote>
<blockquote>
<p>
<img src="star.png" alt="3 1/2 stars" /> <img src="star.png" alt="" />
<img src="star.png" alt="" /> <img src="halfstar.png" alt="" />
</p>
<p>Delicious!! I recommend microwaving the apples for 3 minutes
before baking, to soften them. Great dessert - I'll be making it again
for the holidays.</p>
<p>
— Reviewed on August 28, 2014 by BBABS.
</p>
</blockquote>
</section>
<footer>
dessertWeb © 2014 English (US)
<span>
About
Developers
Privacy
Terms
Help
</span>
</footer>
What you're looking for is "SECTION > H2:last-of-type", not "H2:last-child", because the OL after the H2 is the last child of their parent.
I had to specifically name the one due to myself not being able to grab the last < h2> so I used this code:
h2:nth-last-child(2) {
page-break-before:always;
}
I'm very new to this so I apologise if this is a simple thing. I seem to be unable to keep the bottom div inside the wrapper, even though it closes after. I've validated the code and this hasn't helped. Please can someone cast some light on where I'm going wrong? Many thanks in advance.
This is my code:
<!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>
<link href='http://fonts.googleapis.com/css?family=Alegreya+Sans:300|Raleway:300,700|Droid+Serif:700' rel='stylesheet' type='text/css'>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<meta name="viewport" content="width=device-width; initial-scale=0.95; maximum-scale=1.0; user-scalable=no;"/>
<link href="/css/simplegrid.css" rel="stylesheet" type="text/css" >
<link href="css/a_main_structure.css" rel="stylesheet" type="text/css" />
<link href="css/birthgently.css" rel="stylesheet" type="text/css" />
<link href="css/menu_styling.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Optima' rel='stylesheet' type='text/css'>
<style type="text/css">
a:link {
color: #8A8A8A;
text-decoration: none;
}
a:visited {
color: #8A8A8A;
text-decoration: none;
}
a:hover {
color: #5F5F5F;
text-decoration: none;
}
a:active {
color: #5F5F5F;
text-decoration: none;
}
body {
background-color: #F4F4F4;
background-repeat: repeat-x;
}
</style>
</head>
<body text="#000000" link="#0000ff" dir="ltr" lang="en-GB">
<div id="container">
<div id="content">
<div class="wrapper">
<div class="width_100_percent" align="center">
<div class="headerStretch">
<img src="images/birthgently-topstrip.jpg" width="960" height="232" alt="alt tag change me"/>
</div>
</div>
<div align="center">
<div class="menuback">
<div class="paddingtop8px">
<nav>
<ul align="centre">
<li>Home</li>
<li>Weekly Class</li>
<li>The Course</li>
<li>Hypnobirthing</li>
<li>Contact</li>
<li>Bookings</li>
</ul>
</nav>
</div>
</div>
</div>
<br />
<div class="width_100_percent">
<div class="width7_percent"> </div>
<div class="width86_percent"><div class="headerStretch"><img src="images/about-hypnobirthing.jpg" width="800" height="469" alt="alt tag change me" /></div></div>
<div class="width7_percent"> </div>
</div>
<br />
<br />
<br />
<br />
<div class="clear_both">
<div class="width_100_percent">
<br />
<br />
<div class="width15_percent"> </div>
<div align="center" class="width70_percent">
<div align="left"><h1 class="contentheadings">The principles of Hypno-birthing</h1>
</div>
<p align="left" class="bodytext">Giving birth calmly, safely and gently is every woman's and every baby's birth right. A woman's body has been perfectly designed to give birth to her baby. Free of fear, stress and anxiety her body is able to work in synchrony with her baby to naturally produce a beautiful blend of birthing hormones. <br/>
<br/>
When a woman is calm and relaxed the muscles which assist in the birth her baby are able to work harmoniously and effectively which means she has an easier, more gentle birth that is often also accompanied by a significant reduction in pain. These wonderful birthing hormones and muscles help to ensure that a woman can have the amazing, beautiful and profound experience that nature intended birth to be.
</p>
</div>
<div class="width15_percent"> </div>
</div>
</div>
<br />
<br />
<br />
<br />
<div class="clear_both">
<div class="width_100_percent">
<div class="width29_percentquotes-right">
<img src="images/open-quotes.jpg" width="30" height="20" alt=""/> If the birth is calm, gentle & drug free for you, it's also calm, gentle & drug free for your baby - K Graves <img src="images/close-quotes.jpg" width="30" height="20" alt=""/></div>
<div align="center" class="width50_percent">
<div align="left">
<p class= "bodytext">Hypno-birthing is not about training mothers to give birth. It is about helping woman to release fear and anxiety and it teaches them how to use self-hypnosis and relaxation so their bodies and minds can relax and they can birth their babies gently. <br />
<br />
Hypno-birthing is now widely recognised by birth professionals and is regularly discussed in the media. Hypno-birthing is commonly accepted as an effective approach to childbirth with many midwives training in the technique having witnessed 'hypno-births' first-hand. </p>
</div>
</div>
<div class="width15_percent"> </div>
</div>
</div>
<div class="clear_both">
<div class="width_100_percent">
<br />
<br />
<div class="width15_percent"> </div>
<div align="center" class="width70_percent">
<div align="left">
<h2 class="contentsubheadings">The History of Hypno-birthing</h2>
</div>
<p align="left" class="bodytext">More natural and gentle approaches to childbirth including hypno-birthing began in modern times with the work, amongst others, of Dr Grantly Dick-Read, an obstetrician working in England in the early 19th century. His careful observations of women giving birth led him to develop the theory of the 'fear-tension-pain syndrome'.
</p>
</div>
<div class="width15_percent"> </div>
</div>
</div>
<div class="clear_both">
<div class="width_100_percent"><br />
<div class="width15_percent"> </div>
<div align="center" class="width50_percent">
<div align="left">
<p class="bodytext">Having witnessed women giving birth easily, calmly and comfortably he concluded that what made the process of birth painful was fear. Fear caused tension in the woman's body and disrupted the natural processes of labour and birth. Dr Dick-Read documented the negative effect of fear on childbirth. In his books he argued that childbirth did not have to be the painful ordeal that women had been led to believe they must suffer. He suggested that when fear is not present a woman can give birth comfortably and pain-free.</p></div>
</div>
</div>
</div>
<div class="width35_percent">
<div class="headerStretch">
<div class="image-pad-left"><img src="images/about-hypno.jpg" width="265" height="177" /></div></div></div>
<div class="width15_percent"> </div>
<div class="clear_both">
<div class="width_100_percent">
<div class="width29_percentquotes-right">
<img src="images/open-quotes.jpg" width="30" height="20" alt=""/> My dream is that every woman, everywhere, will know the joy of a truly safe, comfortable, and satisfying birthing for herself and her baby. Marie Mongan <img src="images/close-quotes.jpg" width="30" height="20" alt=""/></div>
<div align="center" class="width50_percent">
<div align="left">
<p class= "bodytext">Unfortunately the view that labour and birth are painful and traumatic continues to be one which is still widely circulated in the media. Even amongst well meaning friends and family the negative view often persists and pregnant women are frequently bombarded with negative and fear evoking images and stories..</p><br />
</div>
</div>
<div class="width15_percent"> </div>
</div>
</div>
<div class="clear_both">
<div class="width_100_percent">
<br />
<br />
<div class="width15_percent"> </div>
<div align="center" class="width70_percent">
<div align="left">
<h2 class="contentsubheadings">Getting past fear</h2>
</div>
<p align="left" class="bodytext">One of the main elements of hypno-birthing is the removal of such fears and the use of positive images, positive language and positive affirmations about birth. Marie Mongon, an American hypnotherapist was one of the first people to use the phrase HypnoBirthing. She developed a teaching program for parents to be which she brought to the UK in the early 90's. Since then hypno-birthing has gained in popularity and many practitioners including Katherine Graves have gone on to adapt and enhance hypno-birthing techniques specifically for the UK.
There are now many hypno-birthing practitioners and whilst each have a slightly different approach the key elements of hypno-birthing remain the same - free of fear and tension a woman can give birth to her baby calmly, safely, gently.</p>
</div>
<div class="width15_percent"> </div>
</div>
</div>
<div class="clear_both">
<div class="width_100_percent"><br />
<div class="width15_percent"> </div>
<div align="center" class="width50_percent">
<div align="left"><h2 class="contentsubheadings">birthgently classes
</h2>
<ul type="square">
<li type="square" class="bullets">
<p class="bodytext">teaches deep relaxation which keeps you and your birth partner free of stress and fear</p></li>
<li type="square" class="bullets">
<p class="bodytext"> facilitates your body's production of powerful, natural pain relieving endorphins and feel good hormones</p></li>
<li type="square" class="bullets">
<p class="bodytext"> helps to shorten the length of the first stage of labour</p></li>
<li type="square" class="bullets">
<p class="bodytext"> reduces the need for surgical interventions</p></li> <li type="square" class="bullets">
<p class="bodytext">helps to keep baby calm and well oxygenated</p></li>
<li type="square" class="bullets">
<p class="bodytext"> eaves you and baby feeling calm but alert and able to fully experience those special first few hours together </p></li>
<li type="square" class="bullets">
<p class="bodytext"> empowers you and your birth partner to remain calm and in control even if there are unexpected circumstances</p></li>
</ul>
</div>
</div>
</div>
</div>
<div class="width35_percent">
<div class="headerStretch">
<div class="image-pad-lefttop"><img src="images/grey-baby.jpg" width="265" height="177" /></div></div></div>
<div class="width15_percent"> </div>
<div class="clear_both">
<div class="width_100_percent">
<br />
<br />
<div class="width15_percent"> </div>
<div align="center" class="width70_percent">
<div align="left">
<h2 class="contentsubheadings">The common view</h2>
</div>
<p class= "bodytext" align="left">
Unfortunately the view that labour and birth are painful and traumatic continues to be one which is still widely circulated in the media. Even amongst well meaning friends and family the negative view often persists and pregnant women are frequently bombarded with negative and fear evoking images and stories..</p>
</div>
<div class="width15_percent"> </div>
</div>
</div>
<div class="clear_both">
<div class="width_100_percent">
<div class="width50_percentquotes-right">
<img src="images/open-quotes.jpg" width="30" height="20" alt=""/> My son was born at 4:50am. I sat back having been on all fours, and just stared at him swimming up on his back, eyes open in the water. The midwife had to prompt me to pick him up. I came out of this trance-like state and I scooped him up and suddenly the power of speech returned and I felt euphoric. <br />
AB -hypno-birthing Mum <img src="images/close-quotes.jpg" width="30" height="20" alt=""/></div>
<div align="left" class="width35_percent">
<br />
</div>
</div>
<div class="width15_percent"> </div>
</div>
</div>
</div>
</div>
</body>
</html>
I've had a look at this and cant see what is or isn't happening as desired. Take a look at this JSFIDDLE I've added border the main container and bottom div and it is sitting within the container.
Take a look yourself, add this css to your page to see whats going on
#container
{
border: 1px solid blue;
}
.width15_percent
{
border: 1px solid red;
}
Add overflow: hidden; to .wrapper