I'm just wondering if it's possible to move this (image1) to (image2). I don't want to use position:relative as that would ruin my design in bootstrap.
Image 1 (I don't want it here)
http://puu.sh/ciBCF/3d1d6b202a.png
Image 2 ( I want it here)
http://puu.sh/ciBET/0f44f62b3f.png
My code for CSS
.results {
color: red;
display: block;
font-size: 20px;
text-align:center;
text-decoration: none;
font-weight: bold;
background: #232323;
color:red;
font-family: 'Julius Sans One', sans-serif;
font-size: 150%;
}
Thanks in advance :)
UPDATE WHOLE CODE:
<?php
session_start();
include ('../includes/config.php');
include ('../includes/header.php');
?>
<!DOCTYPE HTML>
<html>
<body>
<!--start header-->
<div class="h_bg">
<div class="wrap">
<div class="wrapper">
<div class="header">
<div class="logo">
<img src="../images/logo.png">
</div>
<div class="cssmenu">
<ul>
<li><span>Home</span></li>
<li class="active"><span>About</span></li>
<li class="has-sub"><span>Gallery</span>
</li>
<li class="last"><span>Contact</span></li>
<div class="clear"></div>
<div class="search">
<h2>search</h2>
<form>
<input type="text" value="" placeholder="Enter Your search...">
<input type="submit" value="">
</form>
</div>
<div class="search1">
<h2>login/Register</h2>
<form action="" method="POST">
<label>Username:</label>
<input type="text" id="password" name="username" required />
<label>Password:</label>
<input type="password" id="password" name="password" required />
<input type="submit" value="Login" name="submit" class="submit" />
<br><br>
<center>
<h2><p>Register</p></h2>
</center>
</form>
</div>
<?php
if(isset($_POST["submit"])){
if(!empty($_POST['username']) && !empty($_POST['password'])) {
$username=$_POST['username'];
$password=$_POST['password'];
$password = strip_tags($password);
$password = md5($password); // md5 is used to encrypt your password to make it more secure.
$query=mysql_query("SELECT * FROM login WHERE username='".$username."' AND password='".$password."'");
$numrows=mysql_num_rows($query);
if($numrows!=0)
{
while($row=mysql_fetch_assoc($query))
{
$dbusername=$row['username'];
$dbpassword=$row['password'];
}
if($username == $dbusername && $password == $dbpassword)
{
session_start();
$_SESSION['sess_user']=$username;
/* Redirect browser */
header("Location: member.php");
}
} else {
echo "<div class='results'>Invalid username or password</div>";
}
} else {
echo "All fields are required!";
}
}
?>
</div>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</div>
<!-- start content -->
<div class="content_bg">
<div class="wrap">
<div class="wrapper">
<div class="main">
<h2 class="style">About us</h2>
<div class="about">
<div class="cont-grid-img img_style">
<img src="../images/about_pic.jpg" alt=""></a>
</div>
<div class="cont-grid">
<div class="abt-style">
<p class="style top">We are a company built on dreams. And these dreams inspire us to create innovative products that enhance human mobility and benefit society. We see "The Power of Dreams" as a way of thinking that guides us and inspires us to move forward. The strength of our company comes from this philosophy—based on the visionary principles of our founder, Soichiro Honda.Our success in the global marketplace is the result of our continued investment in America's future. We thank our customers for the support and trust they've shown us. We look forward to challenging ourselves to create new products and services that bring value to our customers and society during the next 50 years.</p>
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
<div class="about-p top">
<p class="style">Honda's global lineup consists of the Fit, Civic, Accord, Insight, CR-V, CR-Z, Legend and two versions of the Odyssey, one for North America, and a smaller vehicle sold internationally. An early proponent of developing vehicles to cater to different needs and markets worldwide, Honda's lineup varies by country and may have vehicles exclusive to that region. A few examples are the latest Honda Odyssey minivan and the Ridgeline, Honda's first light-duty uni-body pickup truck. Both were designed and engineered primarily in North America and are produced there. Other example of exclusive models includes the Honda Civic five-door hatchback sold in Europe.
Honda's automotive manufacturing ambitions can be traced back to 1963, with the Honda T360, a kei car truck built for the Japanese market.[27] This was followed by the two-door roadster, the Honda S500 also introduced in 1963. In 1965, Honda built a two-door commercial delivery van, called the Honda L700. Honda's first four-door sedan was not the Accord, but the air-cooled, four-cylinder, gasoline-powered Honda 1300 in 1969. The Civic was a hatchback that gained wide popularity internationally, but it wasn't the first two-door hatchback built. That was the Honda N360, another Kei car that was adapted for international sale as the N600. The Civic, which appeared in 1972 and replaced the N600 also had a smaller sibling that replaced the air-cooled N360, called the Honda Life that was water-cooled.
The Honda Life represented Honda's efforts in competing in the kei car segment, offering sedan, delivery van and small pick-up platforms on a shared chassis. The Life StepVan had a novel approach that, while not initially a commercial success, appears to be an influence in vehicles with the front passengers sitting behind the engine, a large cargo area with a flat roof and a liftgate installed in back, and utilizing a transversely installed engine with a front-wheel-drive powertrain.</p>
</div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</div>
<div class="footer_bg">
<div class="wrap">
<div class="wrapper">
<div class="footer">
<div class="copy">
<p class="w3-link">© </p>
</div>
<div class="f_nav">
<ul>
<li>Skype</li>
<li>Linked in</li>
<li>Twitter</li>
<li>Facebook</li>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</div>
</body>
If css 3 is ok for you, then "translate", transformation may help?
e.g:
.results {
...
transform: translate(0px,-200px);
}
you may have to set appropriate value instead of -200px.
Update:
After looking at your code.
Why not place the "php" section where you need to show the error message?
Update 2
Putting up the code example, based on OP's original code as #Moob suggested.
<?php
session_start();
include ('../includes/config.php');
include ('../includes/header.php');
?>
<!DOCTYPE HTML>
<html>
<body>
<!--start header-->
<div class="h_bg">
<div class="wrap">
<div class="wrapper">
<div class="header">
<div class="logo">
<img src="../images/logo.png">
</div>
<div class="cssmenu">
<ul>
<li><span>Home</span></li>
<li class="active"><span>About</span></li>
<li class="has-sub"><span>Gallery</span>
</li>
<li class="last"><span>Contact</span></li>
<div class="clear"></div>
<div class="search">
<h2>search</h2>
<form>
<input type="text" value="" placeholder="Enter Your search...">
<input type="submit" value="">
</form>
</div>
<div class="search1">
<?php
if(isset($_POST["submit"])){
if(!empty($_POST['username']) && !empty($_POST['password'])) {
$username=$_POST['username'];
$password=$_POST['password'];
$password = strip_tags($password);
$password = md5($password); // md5 is used to encrypt your password to make it more secure.
$query=mysql_query("SELECT * FROM login WHERE username='".$username."' AND password='".$password."'");
$numrows=mysql_num_rows($query);
if($numrows!=0)
{
while($row=mysql_fetch_assoc($query))
{
$dbusername=$row['username'];
$dbpassword=$row['password'];
}
if($username == $dbusername && $password == $dbpassword)
{
session_start();
$_SESSION['sess_user']=$username;
/* Redirect browser */
header("Location: member.php");
}
} else {
echo "<div class='results'>Invalid username or password</div>";
}
} else {
echo "All fields are required!";
}
}
?>
<h2>login/Register</h2>
<form action="" method="POST">
<label>Username:</label>
<input type="text" id="password" name="username" required />
<label>Password:</label>
<input type="password" id="password" name="password" required />
<input type="submit" value="Login" name="submit" class="submit" />
<br><br>
<center>
<h2><p>Register</p></h2>
</center>
</form>
</div>
</div>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</div>
<!-- start content -->
<div class="content_bg">
<div class="wrap">
<div class="wrapper">
<div class="main">
<h2 class="style">About us</h2>
<div class="about">
<div class="cont-grid-img img_style">
<img src="../images/about_pic.jpg" alt=""></a>
</div>
<div class="cont-grid">
<div class="abt-style">
<p class="style top">We are a company built on dreams. And these dreams inspire us to create innovative products that enhance human mobility and benefit society. We see "The Power of Dreams" as a way of thinking that guides us and inspires us to move forward. The strength of our company comes from this philosophy—based on the visionary principles of our founder, Soichiro Honda.Our success in the global marketplace is the result of our continued investment in America's future. We thank our customers for the support and trust they've shown us. We look forward to challenging ourselves to create new products and services that bring value to our customers and society during the next 50 years.</p>
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
<div class="about-p top">
<p class="style">Honda's global lineup consists of the Fit, Civic, Accord, Insight, CR-V, CR-Z, Legend and two versions of the Odyssey, one for North America, and a smaller vehicle sold internationally. An early proponent of developing vehicles to cater to different needs and markets worldwide, Honda's lineup varies by country and may have vehicles exclusive to that region. A few examples are the latest Honda Odyssey minivan and the Ridgeline, Honda's first light-duty uni-body pickup truck. Both were designed and engineered primarily in North America and are produced there. Other example of exclusive models includes the Honda Civic five-door hatchback sold in Europe.
Honda's automotive manufacturing ambitions can be traced back to 1963, with the Honda T360, a kei car truck built for the Japanese market.[27] This was followed by the two-door roadster, the Honda S500 also introduced in 1963. In 1965, Honda built a two-door commercial delivery van, called the Honda L700. Honda's first four-door sedan was not the Accord, but the air-cooled, four-cylinder, gasoline-powered Honda 1300 in 1969. The Civic was a hatchback that gained wide popularity internationally, but it wasn't the first two-door hatchback built. That was the Honda N360, another Kei car that was adapted for international sale as the N600. The Civic, which appeared in 1972 and replaced the N600 also had a smaller sibling that replaced the air-cooled N360, called the Honda Life that was water-cooled.
The Honda Life represented Honda's efforts in competing in the kei car segment, offering sedan, delivery van and small pick-up platforms on a shared chassis. The Life StepVan had a novel approach that, while not initially a commercial success, appears to be an influence in vehicles with the front passengers sitting behind the engine, a large cargo area with a flat roof and a liftgate installed in back, and utilizing a transversely installed engine with a front-wheel-drive powertrain.</p>
</div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</div>
<div class="footer_bg">
<div class="wrap">
<div class="wrapper">
<div class="footer">
<div class="copy">
<p class="w3-link">© </p>
</div>
<div class="f_nav">
<ul>
<li>Skype</li>
<li>Linked in</li>
<li>Twitter</li>
<li>Facebook</li>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</div>
</body>
You may consider using css :after
http://www.w3schools.com/cssref/sel_after.asp
.search1::after {
color: red;
display: block;
font-size: 20px;
text-align:center;
text-decoration: none;
font-weight: bold;
background: #232323;
color:red;
font-family: 'Julius Sans One', sans-serif;
font-size: 150%;
content: "your content here";
}
use script to hide or show it based upon php response.
Edit: whole code illustration
add this CSS:
.search1::after
{
display:block;
content:attr(data-content);
}
<?php
session_start();
include ('../includes/config.php');
include ('../includes/header.php');
?>
<!DOCTYPE HTML>
<html>
<body>
<!--start header-->
<div class="h_bg">
<div class="wrap">
<div class="wrapper">
<div class="header">
<div class="logo">
<img src="../images/logo.png">
</div>
<div class="cssmenu">
<ul>
<li><span>Home</span></li>
<li class="active"><span>About</span></li>
<li class="has-sub"><span>Gallery</span>
</li>
<li class="last"><span>Contact</span></li>
<div class="clear"></div>
<div class="search">
<h2>search</h2>
<form>
<input type="text" value="" placeholder="Enter Your search...">
<input type="submit" value="">
</form>
</div>
<div class="search1">
<h2>login/Register</h2>
<form action="" method="POST">
<label>Username:</label>
<input type="text" id="password" name="username" required />
<label>Password:</label>
<input type="password" id="password" name="password" required />
<input type="submit" value="Login" name="submit" class="submit" />
<br><br>
<center>
<h2><p>Register</p></h2>
</center>
</form>
</div>
<?php
if(isset($_POST["submit"])){
if(!empty($_POST['username']) && !empty($_POST['password'])) {
$username=$_POST['username'];
$password=$_POST['password'];
$password = strip_tags($password);
$password = md5($password); // md5 is used to encrypt your password to make it more secure.
$query=mysql_query("SELECT * FROM login WHERE username='".$username."' AND password='".$password."'");
$numrows=mysql_num_rows($query);
if($numrows!=0)
{
while($row=mysql_fetch_assoc($query))
{
$dbusername=$row['username'];
$dbpassword=$row['password'];
}
if($username == $dbusername && $password == $dbpassword)
{
session_start();
$_SESSION['sess_user']=$username;
/* Redirect browser */
header("Location: member.php");
}
} else {
echo "$('.search1').attr('data-content','Your text Here');";
}
} else {
echo "All fields are required!";
}
}
?>
</div>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</div>
<!-- start content -->
<div class="content_bg">
<div class="wrap">
<div class="wrapper">
<div class="main">
<h2 class="style">About us</h2>
<div class="about">
<div class="cont-grid-img img_style">
<img src="../images/about_pic.jpg" alt=""></a>
</div>
<div class="cont-grid">
<div class="abt-style">
<p class="style top">We are a company built on dreams. And these dreams inspire us to create innovative products that enhance human mobility and benefit society. We see "The Power of Dreams" as a way of thinking that guides us and inspires us to move forward. The strength of our company comes from this philosophy—based on the visionary principles of our founder, Soichiro Honda.Our success in the global marketplace is the result of our continued investment in America's future. We thank our customers for the support and trust they've shown us. We look forward to challenging ourselves to create new products and services that bring value to our customers and society during the next 50 years.</p>
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
<div class="about-p top">
<p class="style">Honda's global lineup consists of the Fit, Civic, Accord, Insight, CR-V, CR-Z, Legend and two versions of the Odyssey, one for North America, and a smaller vehicle sold internationally. An early proponent of developing vehicles to cater to different needs and markets worldwide, Honda's lineup varies by country and may have vehicles exclusive to that region. A few examples are the latest Honda Odyssey minivan and the Ridgeline, Honda's first light-duty uni-body pickup truck. Both were designed and engineered primarily in North America and are produced there. Other example of exclusive models includes the Honda Civic five-door hatchback sold in Europe.
Honda's automotive manufacturing ambitions can be traced back to 1963, with the Honda T360, a kei car truck built for the Japanese market.[27] This was followed by the two-door roadster, the Honda S500 also introduced in 1963. In 1965, Honda built a two-door commercial delivery van, called the Honda L700. Honda's first four-door sedan was not the Accord, but the air-cooled, four-cylinder, gasoline-powered Honda 1300 in 1969. The Civic was a hatchback that gained wide popularity internationally, but it wasn't the first two-door hatchback built. That was the Honda N360, another Kei car that was adapted for international sale as the N600. The Civic, which appeared in 1972 and replaced the N600 also had a smaller sibling that replaced the air-cooled N360, called the Honda Life that was water-cooled.
The Honda Life represented Honda's efforts in competing in the kei car segment, offering sedan, delivery van and small pick-up platforms on a shared chassis. The Life StepVan had a novel approach that, while not initially a commercial success, appears to be an influence in vehicles with the front passengers sitting behind the engine, a large cargo area with a flat roof and a liftgate installed in back, and utilizing a transversely installed engine with a front-wheel-drive powertrain.</p>
</div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</div>
<div class="footer_bg">
<div class="wrap">
<div class="wrapper">
<div class="footer">
<div class="copy">
<p class="w3-link">© </p>
</div>
<div class="f_nav">
<ul>
<li>Skype</li>
<li>Linked in</li>
<li>Twitter</li>
<li>Facebook</li>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</div>
</body>
You could put the div in the form in the place you want it, set an id and in css set it to display none, then in the else block of your code where you now echo the div drop out of php and use js to show the div if theres an error. i.e
else{ ?>
<script>document.getElementById("your_chosen_id").style.display="block";</script>
<noscript><div class='results' style='position:relative;top:-200px;>Invalid username or password</div></noscript>
<?php
EDIT
Added noscript as Moob correctly pointed out that it obviously wouldn't work with js turned off.
Related
The top third of my page, including a graphic and headline, shows up just fine in Firefox and Explorer, but does not appear in Chrome when accessed from my server. It does appear in Chrome when viewing the page as a file.
The graphic is defined in the CSS file as:
/** adbox **/
#adbox {
background: #020a13 url(../images/bg-adbox.jpg) no-repeat center top;
font-family: Georgia, "Times New Roman", Times, serif;
min-height: 433px;
margin: -56px 0 22px;
And the HTML file is:
<!DOCTYPE html>
<!-- Website template by freewebsitetemplates.com -->
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>donfiler.net - web design </title>
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<div id="header">
<div class="wrapper clearfix">
<div id="logo">
<img src="images/logo.png" alt="LOGO">
</div>
<ul id="navigation">
<li class="selected">
Home
</li>
<li>
About
</li>
<li>
Blog
</li>
<li>
Gallery
</li>
<li>
Contact Us
</li>
</ul>
</div>
</div>
<div id="contents">
<div id="adbox">
<div class="wrapper clearfix"><p></p><p></p>
<div class="info">
<h1>Web Design & Social Media Marketing</h1>
<p>
Proven Consultant, Author | Helping Companies Translate Their Business Goals to Reality.
</p>
</div>
</div>
<div class="highlight">
<h2>707-217-8457 if you want a mobile friendly web site.</h2>
</div>
</div>
<div class="body clearfix">
<div class="click-here">
<h1>Impact Marketing</h1>
Click Here!
</div>
<p style="font-size:12px;">
Proven Consultant, Author | Helping Companies Translate Their Business Goals to Reality. We design web sites with dynamic database interaction; deliver computer based training; create comprehensive marketing campaigns; specialize in hand coding HTML, CSS, PHP, Mysql and JavaScript to customize web design and user interface.
</p>
</div>
</div>
<div id="footer">
<ul id="featured" class="wrapper clearfix">
<li>
<img src="images/THUMBNAIL_IMAGE4.jpg" alt="Img" height="204" width="180">
<h3>Order Now</h3>
<p>
Memories of growing up in Europe during the Cold War. The first book in a series about Don's life.
</p>
</li>
<li>
<img src="images/THUMBNAIL_IMAGE3.jpg" alt="Img" height="204" width="180">
<h3>Order Now</h3>
<p>
A catchy tune by the Beach Boys in the mid-sixties, the lyrics of "Be True to Your School" hit many highlights of high school in that era.
</p>
</li>
<li>
<img src="images/THUMBNAIL_IMAGE2.jpg" alt="Img" height="204" width="180">
<h3>Order Now</h3>
<p>
College Years and Rock Band Entrepreneur. The third book in a series about Don's life.
</p>
</li>
<li>
<img src="images/THUMBNAIL_IMAGE1.jpg" alt="Img" height="204" width="180">
<h3>Order Now</h3>
<p>
Contributing to others is the highest form of success you can achieve and I wanted to impart what I have learned over the years working for a living.
</p>
</li>
</ul>
<div class="body">
<div class="wrapper clearfix">
<div id="links">
<div>
<h4>Social</h4>
<ul>
<li>
Google +
</li>
<li>
Facebook
</li>
<li>
Youtube
</li>
</ul>
</div>
<div>
<h4>Blogs</h4>
<ul>
<li>
Blogspot
</li>
<li>
Marketing Blog
</li>
<li>
Web Design Blog
</li>
</ul>
</div>
</div>
<div id="newsletter">
<h4>Newsletter</h4>
<p>
Sign up for Our Newsletter
</p>
<form action="https://donfiler.us/newsletter" method="post">
<!--<input type="text" value="">-->
<input type="submit" value="Sign Up!">
</form>
</div>
<p class="footnote">
© Copyright © 2016 Don Filer all rights reserved.
</p>
</div>
</div>
</div>
</body>
</html>
The Google Chrome extension AdBlock is blocking that element for me, because its ID is adbox. Check if you have that extension enabled, as well.
In general, try avoiding the word "ad" when naming HTML elements.
From the start, I can see a major flaw in the code- you named an element adbox. Most ad-blocking extensions work this way- they scan for ads, and that element will be perceived as an ad, simply because of it's name.
To quote CapitalQ,
In general, try avoiding the word "ad" when naming HTML elements.
Check if you have an ad-blocking extension turned on, and if so, try the site without that extension. Also, rename that element ASAP!
I have a grid layout consisting of 4 rows in Twitter Bootstrap.
I would like each row to be even in height, with equal padding between the content of each row.
However the padding on the rows are currently unequal.
For example the space at the foot of the li items in 'Technologies' and the hr line is significantly narrower than the space at the foot of 'Education'.
I cannot see in my CSS where I am going wrong, but how can I apply equal padding throughout? Thanks in advance
Here is the link to my website where the issue is.
<div class="container">
<div id="greeting">
<p>
My interest in coding primarily stemmed from my day job which exposed me to the basics of HTML. I've still got a long way to go but it's my ambition to forge a long-term career as a developer, and I'm very determined to reach my goal.
</p>
</div>
<div class="hr"><hr></div>
<div class="row">
<div class="col-md-4">
<h2 class="sideheader">Technologies</h2>
</div>
<div class="col-md-4">
<h2 class="tech-header">Comfortable</h2>
<ul>
<li> HTML5</li>
<li> CSS3</li>
<li> Bootstrap</li>
<li> Adobe PhotoShop</li>
</ul>
</div>
<div class="col-md-4">
<h2 class="tech-header">Finding my feet</h2>
<ul>
<li> JavaScript</li>
<li> JQuery</li>
<li> PHP</li>
<li> SQL</li>
</ul>
</div>
</div>
<div class="hr"><hr></div>
<div class="row">
<div class="col-md-4">
<h2 class="sideheader">Experience</h2>
</div>
<div class="col-md-8">
<h2>Reader Offer Administrator / Account Manager</h2><br><h3>Thompson & Morgan - March 2007 to August 2015</h3>
<p>A highly varied role acting as support to a successful and fast-moving sales team as well as contact to our client base. My primary duties were to maintain the smooth running of our order processing system, as well as oversee a range of product content across several CMSs. It was this latter part of my job which has spurred me to establish a career in web development.</p>
</div>
</div>
<div class="hr"><hr></div>
<div class="row">
<div class="col-md-4">
<h2 class="sideheader">Education</h2>
</div>
<div class="col-md-8">
<h2>University of Brighton</h2><br><h3>October 2003 to July 2006</h3>
<ul>
<li> BA(Hons) Social Science (2:1)</li>
</ul>
</div>
</div>
<div class="hr"><hr></div>
<div class="row">
<div class="col-md-12" id="button">
View my full CV
</div>
</div>
Here is your specific code :
HTML :
<div class="col-md-8">
<h2>Reader Offer Administrator / Account Manager</h2>
<br> <----- REMOVE THIS
<h3>Thompson & Morgan - March 2007 to August 2015</h3>
<p>A highly varied role acting as support to a successful and fast-moving sales team as well as contact to our client base. My primary duties were to maintain the smooth running of our order processing system, as well as oversee a range of product content across several CMSs. It was this latter part of my job which has spurred me to establish a career in web development.</p>
</div>
Css:
#resume h3, #resume .col-md-8 li, #resume .col-md-8 p {
top: -60px; <----- REMOVE THIS
position: relative;
}
If you remove the <br/> and the top:60px; every thing returns to the normal.
I am having trouble getting quotes (within divs) to line up properly.
This site is here
http://79.170.44.107/robinsonhambro.com/wp/.
What I need to do is line up the divs (with a class or id of hero) across a horizontal line along the top and the bottom of the picture. For some reason they dont seem to be sitting evenly.
Can anyone give me some help?
I assume the issue you are having is the quotes in the right hand side is a little lower than the other two DIVs.
One of the issues I saw was that there is an empty <p> in your right div. If you remove it, the text should line up with the rest of the DIVs. Remove this from your html: <p><!-- Right div hero section --></p>
Also, your .entry class has huge amount of padding in it,remove that and it should bring everything down closer.
I'd also recommend removing the other <p> tags and using margins for better control off the elements.
Here is my update to your html. This work from from browser.
Updated Style.CSS
.entry {
border-bottom-color:#F1F1F1;
border-bottom-style:solid;
border-bottom-width:1px;
padding:50px 50px 45px 0;
becomes....
.entry {
border-bottom-color:#F1F1F1;
border-bottom-style:solid;
border-bottom-width:1px;
padding:0 50px 45px 0;
Updated html
<div id="herobox">
<div id="left-hero">
<img src="http://79.170.44.107/robinsonhambro.com/wp/wp-content/uploads/2015/02/newdoor.jpg" width="265px" height="426px" alt="Robinson Hambro Door">
</div>
<div id="centre-hero">
<h1>
<p class="pcentre">Robinson Hambro specialises in Board Search and Chairman Advisory. The Firm advises companies with a global outlook drawing on the experience of a multilingual and multidisciplinary team.</p>
</h1>
<div class="subcentrehero">
<p class="p03">Robinson Hambro Chairman Advisory Service is priceless.Լ/p>
<p class="p04">- Carles Casajuana, former Spanish Ambassador to the UK</p>
</div>
<div class="subcentrehero">
<p class="p03">Robinson Hambro advice was invaluable and I could not recommend them more highly!</p>
<p class="p04">- Global COO of a $45bn firm</p>
</div>
</div>
<div id="right-hero">
<p class="p01">The process was carried out to a high standard, in a timely way, and I can therefore wholeheartedly recommend this service.</p>
<p class="p02">- Dr Andrew McCulloch, CEO, MHF</p>
<p class="p01">Karina knows everyone</p>
<p class="p02">Fiona Woolf, former Lord Mayor of the City of London</p>
<p class="p01">We would have no hesitation in highly recommending Robinson Hambro for an assignment in any sector.</p>
<p class="p02">- Robin Walker, Deputy Chairman, Berry Gardens</p>
</div>
</div>
<div style="clear:both"></div>
</article> <!-- end .entry -->
</div> <!-- end #main_content -->
</div> <!-- end #content_area -->
</div> <!-- end .container -->
</div> <!-- end #main-area -->
</div> <!-- end #page-wrap -->
<footer id="main-footer">
<div class="container clearfix">
<div id="footer-top-shadow"></div>
<div id="footer-widgets" class="clearfix">
<div class="footer-widget footer-col1"><div id="text-4" class="f_widget widget_text"><h4 class="widgettitle">INSIDER VIEW</h4> <div class="textwidget">Visit Karina's Column for insights on the world of finance by Robinson Hambro's Karina Robinson
</div>
</div></div> <!-- end . footer-widget --><div class="footer-widget footer-col2"><div id="text-5" class="f_widget widget_text"><h4 class="widgettitle">What We Do</h4> <div class="textwidget">Guiding Principles
<br/>
Chairman Counsel
<br/>
Board Search</div>
</div></div> <!-- end . footer-widget --><div class="footer-widget footer-col3"><div id="text-6" class="f_widget widget_text"><h4 class="widgettitle">Get in touch</h4> <div class="textwidget">t: +44 (0) 20 3405 2355
<br/>
m: +44 (0) 7980 510 975
<br/>
e: info#robinsonhambro.com
</div>
</div></div> <!-- end . footer-widget --><div class="footer-widget footer-col4 last"><div id="text-3" class="f_widget widget_text"><h4 class="widgettitle">LINKS</h4> <div class="textwidget"><img src="http://79.170.44.107/robinsonhambro.com/wp/wp-content/uploads/2014/12/women.gif">
<img src="http://79.170.44.107/robinsonhambro.com/wp/wp-content/uploads/2014/12/bankers.gif">
<img src="http://79.170.44.107/robinsonhambro.com/wp/wp-content/uploads/2014/12/youtube.png">
<img src="http://79.170.44.107/robinsonhambro.com/wp/wp-content/uploads/2014/12/googleplus.png"> </div>
</div></div> <!-- end . footer-widget --> </div> <!-- end #footer-widgets -->
<p id="copyright">Designed by Elegant Themes | Powered by WordPress</p>
</div> <!-- end .container -->
</footer> <!-- end #main-footer -->
I'm working with a template, we have a background image in the wrapper, but when i'm viewing the website from a laptop 13'' screen, the text extends below the fold, the wrapper only covers above the fold, therefore my content isn't being displayed properly.
How can i fix this? Better yet, how can i make my content fit above the fold.
JSFiddle Link: http://jsfiddle.net/L72wwz7g/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>COMPANYNAME Photo Contest</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<link href="css/style.css" rel="stylesheet" />
<link href="css/colors/style-color-01.css" rel="stylesheet" />
<link rel="stylesheet" href="css/contact.css" />
<link rel="stylesheet" href="css/simple-line-icons.css" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,300,600,700' rel='stylesheet' type='text/css' />
</head>
<body>
<div id="wrapper">
<!-- Start Header -->
<div id="header">
<div class="container">
<div class="row">
<div class="span12">
<h1>
<a href="#">
<img src="images/logo.png" alt="COMPANYNAME" />
</a>
</h1>
<h2 class="menulink">
Menu
</h2>
<!-- Start Menu -->
<div id="menu">
<ul>
<li>
HOME
</li>
<li>
PHOTO CATEGORIES
</li>
<li>
PHOTOGRAPHY TIPS
</li>
<li>
CONTEST RULES
</li>
<li class="current">
ENTRY FORM
</li>
</ul>
</div>
<!-- End Menu -->
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<!-- End Header -->
<!-- Start Content -->
<div class="container">
<div class="row">
<div class="span6">
<div class="inner">
<br />
<br />
<br />
<br />
<br />
<br />
<center>
<h1 style="color: #464f56">SHOW US YOUR
<b>BEST BEFORE AND AFTER</b> PHOTOS AND
<b>WIN PRIZES</b> IN THE COMPANYNAME PHOTO CONTEST</h1>
</center>
<p>The COMPANYNAME user community is a source of inspiration to us; your remarkable Before & After photos demonstrate the artistry that goes along with the science and technology to create striking results that change lives. To recognize our COMPANYNAME users and encourage you to show off your results, we're inviting you to enter your best Before & After photos into our photo contest.</p>
<p>Before & After images are a clear and dramatic way to tell your best patient stories. The COMPANYNAME Photo Contest is a celebration of these patient stories, and an invitation to you to share your results with the COMPANYNAME community.</p>
</div>
</div>
<div class="span6">
<div class="inner">
<br />
<br />
<br />
<br />
<img src="images/b-a-stacked.png" />
<br />
<br />
<span style="color: #464f56; font-size: 3em;">
<b>Prizes:</b>
</span>
<br />
<h2 style="color: #ffffff">
<b>4 First place Prizes!</b>
</h2>
<h3 style="color: #ffffff">
<b>$1,000 + Join the COMPANYNAME Facebook Wall of Fame!</b>
</h3>
<h3 style="color: #ffffff">
<b>In addition, choose:</b>
</h3>
<ul>
<li>
<span style="color: #ffffff;">
<b>A night out on the town</b>
</span>
</li>
<li>
<span style="color: #ffffff;">
<b>A chair-massage therapy for a day</b>
</span>
</li>
<li>
<span style="color: #ffffff;">
<b>$1,000 worth of Top Flight points</b>
</span>
</li>
</ul>
<h3 style="color: #ffffff">
<b>All photos we keep to use are worth $500!</b>
</h3>
<p style="font-size:12px">See
Terms and Condition for full details</p>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
<!-- End content -->
<div class="clearfix"></div>
</div>
<div class="strip features">
<div class="container">
<div class="row">
<br />
<a name="categories"></a>
<h2 style="color: #0658a0">We invite you to submit Before & After photographs in these categories:</h2>
<ol>
<li>
<b>Benign Lesions</b>, such as Angiofibromas, Cutaneous Horn, Milia, Sebaceous Hyperplasia, Skin Tags, Syringoma and Xanthelasma</li>
<li>
<b>Benign Pigmented Lesions</b>, such as Benign Nevi, Dermatosis Papulosa Nigra and Keratoses</li>
<li>
<b>Other Dermatological Conditions</b>, such as Active Acne, Melasma, Poikiloderma, Rhinophyma, Rosacea, Port Wine Stain, Scars and Warts</li>
<li>
<b>Aesthetic Treatments</b>, such as Forever Bare Hair Removal, Forever Young BBL, Pores, Resurfacing, SkinTyte and Vertical Lip Lines</li>
</ol>
<br />
<div class="clearfix"></div>
</div>
</div>
</div>
<a name="rules"></a>
<div class="strip highlight strip-alt">
<div class="container">
<div class="row">
<div class="span6">
<div class="inner">
<h2 style="color: #0658a0">Rules:</h2>
<ul>
<li>Please send before and after photos taken at the same angle, with the same lighting.</li>
<li>Please include condition treated, modality used, settings, number of treatments, and how long after the treatment the photo was taken</li>
<li>Photos submitted need to be
photo-released. We may use your photo in upcoming campaigns!</li>
</ul>
<p>Please feel free to enter as many photos as you'd like. Good luck! We're looking forward to seeing your photos!</p>
</div>
</div>
<div class="span6">
<div class="inner">
<img src="images/b-a-pic.png" />
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="strip highlight">
<div class="container">
<div class="row">
<div class="span6">
<div class="inner">
<center>
<h2 style="color: #0658a0">The benefits of
<span style="color: #000000">Good</span> </br>Clinical
<span style="color: #000000">Photography</span></h2>
</center>
<center>
<object id="flashObj" width="486" height="412" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,47,0">
<param name="movie" value="http://c.brightcove.com/services/viewer/federated_f9?isVid=1" />
<param name="bgcolor" value="#FFFFFF" />
<param name="flashVars" value="videoId=3721169588001&playerID=96360168001&playerKey=AQ~~,AAAAFkZnkSk~,IiQ79d9fntlYzbIBNabTKGnz_-W-KulR&domain=embed&dynamicStreaming=true" />
<param name="base" value="http://admin.brightcove.com" />
<param name="seamlesstabbing" value="false" />
<param name="allowFullScreen" value="true" />
<param name="swLiveConnect" value="true" />
<param name="allowScriptAccess" value="always" />
<embed src="http://c.brightcove.com/services/viewer/federated_f9?isVid=1" bgcolor="#FFFFFF" flashvars="videoId=3721169588001&playerID=96360168001&playerKey=AQ~~,AAAAFkZnkSk~,IiQ79d9fntlYzbIBNabTKGnz_-W-KulR&domain=embed&dynamicStreaming=true" base="http://admin.brightcove.com" name="flashObj" width="486" height="412" seamlesstabbing="false" type="application/x-shockwave-flash" allowfullscreen="true" swliveconnect="true" allowscriptaccess="always" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" />
</object>
</center>
</div>
</div>
<a name="tips"></a>
<div class="span6">
<div class="inner">
<h2 style="color: #0658a0">Photography
<span style="color: #000000">tips:</span></h2>
<ul>
<li>Make sure you are using a high quality camera with a good lens.</li>
<li>Mount the camera on a tripod.</li>
<li>Use the highest resolution possible for your pictures.</li>
<li>Make sure there are minimal distractions in the background. Shooting on a black background show the best results.</li>
<li>Isolate the treatment area. When shooting the face, use a headband to hold back hair. Have the patient wear a black drape - light can reflect off of bright colors.</li>
<li>Put a marker on the wall for patients to look at.</li>
<li>Always shoot the pictures from the same distance.</li>
<li>Make sure the lighting is always coming from the same direction.</li>
<li>Light above the patient will show the most texture - diffuse light with a soft box or with umbrellas.</li>
<li>Do not set the light up at the same angle as the lens that is shooting the picture.</li>
<li>Do not use a direct flash.</li>
<li>Be consistent with the your images. Be aware of :
<ul>
<li>Lighting</li>
<li>Patient position</li>
<li>Camera</li>
<li>Camera position</li>
<li>Patient preparation</li>
<li style="list-style: none; display: inline">
<ul>
<li>Clothing</li>
<li>Jewelry (preferably none)</li>
<li>Make-up (preferably none)</li>
</ul>
</li>
</ul></li>
<li>Make sure you are processing the photos in the same way.</li>
</ul>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="strip highlight strip-alt">
<div class="container">
<div class="row">
<div class="span12">
<div class="inner">
<a name="terms"></a>
<h2 style="color: #0658a0">Terms and Conditions:</h2>
<ul>
<li>There is no entry fee and no purchase necessary to enter this competition.</li>
<li>Route to entry for the competition and details of how to enter can be found at www.COMPANYNAME.com/photocontest.</li>
<li>Closing date for entry will be March 31st, 2015. After this date the no further entries to the competition will be permitted.</li>
<li>No responsibility can be accepted for entries not received for any reason.</li>
<li>There will be four winners, one in each category listed above. The rules of the competition and the prize for each winner are as follows: First Place in each category: $1,000, as well as recognition on the COMPANYNAME website and Facebook page, and ONE of the following: A night out on the town for your office staff, hosted by your sales representative OR chair-massage therapist for a day (not to exceed $1,000) OR $1,000 in COMPANYNAME Top Flight Points. We will compensate entrants $500 for any photo we keep and use.</li>
<li>COMPANYNAME, Inc. reserves the right to cancel or amend the competition and these terms and conditions without notice in the event of a catastrophe, war, civil or military disturbance, act of God or any actual or anticipated breach of any applicable law or regulation or any other event outside of COMPANYNAME's control. Any changes to the competition will be notified to entrants as soon as possible.</li>
<li>COMPANYNAME is not responsible for inaccurate prize details supplied to any entrant by any third party connected with this competition.</li>
<li>No cash alternative to the prizes will be offered.</li>
<li>Winners will be chosen by a panel of judges appointed by COMPANYNAME.</li>
<li>The winner will be notified within 28 days of the closing date. If the winner cannot be contacted or do not claim the prize within 14 days of notification, we reserve the right to withdraw the prize from the winner and pick a replacement winner.</li>
<li>COMPANYNAME will notify the winner when and where the prize can be collected.</li>
<li>COMPANYNAME's decision in respect of all matters to do with the competition will be final and no correspondence will be entered into.</li>
<li>The winner agrees to the use of his/her name and image in any publicity material.</li>
<li>Entry into the competition will be deemed as acceptance of these terms and conditions.</li>
</ul>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="clearfix"></div>
<div id="footer">
<div class="clearfix"></div>
</div>
</html>
It looks like background-size: cover on wrapper is your problem.
Change it tobackground-size: containand get rid of height:100% on body.
That will fix your issue.
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