I have been at this for a while, here is my HTML and CSS together kind of simplified. I'm sure it's something simple but I cant figure it out for the life of me. I just need to remove the white space in between the border and my content.
<!DOCTYPE html>
<html lang="en-US">
<head>
<!--CSS Internal Style Sheet-->
<style>
HTML
{
border: 20px solid gray;
margin: auto;
}
#center
{
background-color: #EEE8AA;
padding: 0;
}
p
{
text-align: left;
margin-left: auto;
margin-right: auto;
padding: inherit;
width: 800px;
}
dl
{
text-align: left;
margin-left: auto;
margin-right: auto;
top-padding: 10px;
height: 500px;
width: 800px;
}
.box
{
background-color: #DCDCDC;
border: 1px solid #666;
padding: 5px;
}
#banner
{
position: relative;
top: 0px;
left: 0px;
right: 0px;
width: 100%;
height: 200px;
background-image: url(file:///C:/Users/Tollis/Documents/Website/Banner.png)
}
header
{
text-align: center;
font-size: 50px;
padding: 0;
background-color: #98FB98;
}
.menu
{
text-align: center;
padding-bottom: 30px;
padding-top: 30px;
background-color: #98FB98;
}
ul
{
list-style-type: none;
margin: 0;
padding: 0;
}
li
{
display: inline;
}
</style>
<title> Module One Activity </title>
</head>
<body>
<header> Module One Activity </header>
<!--Navigation Bar-->
<div class="menu">
<ul>
<li> Page 1 </li>
   
<li> Page 2 </li>
   
<li> Page 3 </li>
   
<li> Page 4 </li>
</ul>
<div id="center">
<hr>
<p class="box" text-align="center"> <i> <b> Statement: </b> If students are allowed to use technology such as computers, calculators and tablets, then they will be able to develop a deeper understanding of the math concepts presented within their course. </i> </p>
<hr>
<h2 class="back" align="center"> Part 1 </h2>
<p> <b> Inverse: </b> If students are not allowed to use technology such as computers, calculators and tablets, then they will not be able to develop a deeper understanding of the math concepts presented within their course.</p>
<br>
<hr>
</div>
</body>
<footer>
<p> Created by: Tollis Hunt </p>
<p> Contact information: Email me! </p>
<br>
</footer>
Try this in your CSS:
body
{
margin:0;
padding:0;
}
This will remove your white space between content and border.
Hope it helps.
Demo
Related
No entirely sure what happened, but I have a large gap after the top image. I've been tweaking the code so it's responsive and then added this image and everything got thrown off. Any thoughts on what I'm doing wrong. Ideally the image is much closer to the 2 columns of content below.
I've tried messing with the flexbox and the image and nada is happening.
html {
width: 960px;
font-size: 100%;
font-family: "Arial", sans-serif;
color: #112271;
margin: 0 auto;
}
.flex-container {
width: 960px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.banner-image {
width: 960px;
min-height: 50px;
background: #112271;
padding-top: 10px;
padding-left: 20px;
padding-bottom: 10px;
}
.banner-image h1 {
color: white;
}
.topics-sidebar {
width: 320px;
padding-top: 40px;
}
.main-content {
width: 640px;
padding-top: 40px;
}
.individual-post {
margin-bottom: 50px;
}
.main-content p.return-link {
margin-bottom: 50px;
}
/* Left arrow for links that return to index.html */
i {
border: solid #112271;
border-width: 0px 2px 2px 0px;
padding: 5px;
display: inline-block;
}
.left {
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
}
ul {
list-style-type: none;
padding: 0;
line-height: 2;
}
a:link, a:visited {
color: #112271;
}
a:hover {
color: #F09F08 ;
}
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="../html-visual/styles.css">
<title>HTML & CSS Cheatsheet</title>
</head>
<body>
<div class="flex-container">
<div class="banner-image">
<h1>HTML & CSS Cheatsheet</h1>
</div>
<div class="topics-sidebar">
<h3>Topics</h3>
<ul>
<li>Getting Started</li>
<li>CSS</li>
<li>Flexbox</li>
<li>Forms</li>
<li>Images</li>
<li>Links</li>
<li>Lists</li>
<li>Responsive Design</li>
<li>Resources</li>
<li>Tables</li>
</ul>
</div>
<div class="main-content">
<h2>Recent Posts</h2>
<div class="individual-post">
<p>General Template | Last Updated Dec. 3, 2019</p>
<p>This is the basic layout for a webpage.</p>
</div>
<div class="individual-post">
<p>Linking a CSS File | Last Updated Dec. 3, 2019</p>
<p>Each HTML page must include a reference to the external style sheet file.</p>
</div>
<div class="individual-post">
<p>Box Model | Last Updated Dec. 3, 2019</p>
<p>The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content.</p>
</div>
</div>
</div>
</body>
<footer>
</footer>
</html>
You just have to get rid of
padding-top: 40px
at your .main-content and .topics-sidebar
Or change them to any value you want
A better solution is to set
margin-bottom : (YOUR_VALUE)px
to your .banner-image
I currently have two inline-block div in my post page that contain my most recent book reviews. For most window sizes, these sections match up and take the same amount of space. For some windows dimensions, however, one inline-block takes up less space than the other, causing there to be white space at the bottom of the smaller div.
Is there anything I can do to get rid of this whitespace?
Here is my HTML and CSS:
html, body {
margin: 0;
padding: 0;
}
.newest-review-cover {
z-index: 0;
}
.newest-review-cover img {
display: block;
height: 50%;
width: 100%;
}
.newest-review-content h2 {
color: white;
font-size: 2rem;
padding-top: 1em;
}
.newest-review-content h5 {
padding: 1em 3em;
color: white;
font-size: 1rem;
}
.newest-review-content {
background-color: black;
padding: 2em 0;
text-align: center;
}
.book-review img{
width: 100%;
height: 200%;
}
.book-review {
background-color: black;
display: inline-block;
width: 33%;
padding-left: 0;
border-right: solid 3px #f28600;
border-left: solid 3px #f28600;
border-top: solid 5px #f28600;
margin-left: -4px;
margin-top: 0;
vertical-align: top;
}
.book-review p {
color: white;
margin: 1em 0;
}
.post-title {
text-align: center;
}
.post-description {
padding: 0 2em;
height: 100px;
}
<!DOCTYPE html>
<html>
<head>
<link href="header+footer.css" rel = "stylesheet" type="text/css" />
<link href="Homepage.css" rel = "stylesheet" type="text/css" />
<meta charset="utf-8">
<title> The Novel Column - Book Reviews </title>
</head>
<body>
<nav>
<h1> The Novel Column </h1>
<ul>
<li> Resources
<ul>
<li> Book Reviews </li>
<li> Quotes and Principles </li>
<li> Community Aid </li>
</ul>
</li>
<li> About Us </li>
</ul>
</nav>
<section class="newest-review-cover">
<img src="images/the-5am-club-poster.jpg" alt="The 5AM Club">
<div class="newest-review-content">
<h2> The 5AM Club Review </h2>
<h5> Maximize your productivity, be around nice things, and spend more time doing what you want! </h5>
</div>
</section>
<div class="all-posts">
<a href="the-one-thing.html">
<div class="book-review" id="the-one-thing">
<img src="https://thenovelcolumn.com/wp-content/uploads/2019/05/The-ONE-Thing-Image-3.jpg" alt="The ONE Thing">
<div class="book-description">
<p class="post-title"> The ONE Thing Review </p>
<p class="post-description"> Declutter your life, think big, and achieve mastery!</p>
</div>
</div>
</a>
<a href="the-10x-rule.html">
<div class="book-review" id="the-10x-rule">
<img src="https://thenovelcolumn.com/wp-content/uploads/2019/04/The-10X-Rule-Image-2-e1555476700855.jpg" alt="The 10X Rule" alt="The 10X Rule">
<div class="book-description">
<p class="post-title"> The 10X Rule Review </p>
<p class="post-description"> Unlock your potential and multiply happiness and productivity!</p>
</div>
</div>
</a>
</div>
</body>
</html>
Thanks for your help in advance!
I think the problem lies with .post-description
If you look at your .post-description for both blocks, their text have different height.
You can set a fix height to .post-description and set vertical-align: top; to .book-review
html, body {
margin: 0;
padding: 0;
}
.newest-review-cover {
z-index: 0;
}
.newest-review-cover img {
display: block;
height: 50%;
width: 100%;
}
.newest-review-content h2 {
color: white;
font-size: 2rem;
padding-top: 1em;
}
.newest-review-content h5 {
padding: 1em 3em;
color: white;
font-size: 1rem;
}
.newest-review-content {
background-color: black;
padding: 2em 0;
text-align: center;
}
.book-review img{
width: 100%;
height: 200%;
}
.book-review {
background-color: black;
display: inline-block;
width: 33%;
padding-left: 0;
border-right: solid 3px #f28600;
border-left: solid 3px #f28600;
border-top: solid 5px #f28600;
margin-left: -4px;
margin-top: 0;
vertical-align: top; /*Added this to set alignment to top*/
}
.book-review p {
color: white;
margin: 1em 0;
}
.post-title {
text-align: center;
}
.post-description {
padding: 0 2em;
height: 150px; /*Added a fixed height*/
}
<!DOCTYPE html>
<html>
<head>
<link href="header+footer.css" rel = "stylesheet" type="text/css" />
<link href="Homepage.css" rel = "stylesheet" type="text/css" />
<meta charset="utf-8">
<title> The Novel Column - Book Reviews </title>
</head>
<body>
<nav>
<h1> The Novel Column </h1>
<ul>
<li> Resources
<ul>
<li> Book Reviews </li>
<li> Quotes and Principles </li>
<li> Community Aid </li>
</ul>
</li>
<li> About Us </li>
</ul>
</nav>
<section class="newest-review-cover">
<img src="images/the-5am-club-poster.jpg" alt="The 5AM Club">
<div class="newest-review-content">
<h2> The 5AM Club Review </h2>
<h5> Maximize your productivity, be around nice things, and spend more time doing what you want! </h5>
</div>
</section>
<div class="all-posts">
<div class="book-review" id="the-one-thing">
<img src="https://thenovelcolumn.com/wp-content/uploads/2019/05/The-ONE-Thing-Image-3.jpg" alt="The ONE Thing">
<div class="book-description">
<p class="post-title"> The ONE Thing Review </p>
<p class="post-description"> Declutter your life, think big, and achieve mastery!</p>
</div>
</div>
<a href="the-10x-rule.html">
<div class="book-review" id="the-10x-rule">
<img src="https://thenovelcolumn.com/wp-content/uploads/2019/04/The-10X-Rule-Image-2-e1555476700855.jpg" alt="The 10X Rule">
<div class="book-description">
<p class="post-title"> The 10X Rule Review </p>
<p class="post-description"> Unlock your potential and multiply happiness and productivity!</p>
</div>
</div>
</a>
</div>
</body>
</html>
I would like to know how position my text on footer directly under each other in three different column
right now only the left column is good the center and the right column are broken
.footer {
/* The dividing footer: */
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 200px;
background-color: #efebe785;
color: #000000;
text-align: center;
border: 1px solid #00000094;
}
.left {
text-align: left;
float: left;
top: 1em;
left: 1em;
}
.right {
float: right;
text-align: right;
top: 1em;
right: 1em;
position: relative;
display: inline;
}
.centered {
text-align: center;
top: 1em;
position: relative;
display: inline;
padding
}
<div class="footer">
<div class="left">
<p class="left">
<font size="5">SOCIAL</font> <br/><br/>
<font size="3">Facebook </font> <br/><br/>
<font size="3"> Twitter </font> <br/><br/>
<font size="3"> Youtube </font>
</p>
</div>
<div class="right">
<p class="right">
<font size="5">EXTRA</font> <br/><br/>
<font size="3">Our Chefs</font>
</p>
</div>
<div class="center">
<p class="centered">
<font size="5">SUPPORT</font> <br/><br/>
<font size="3">Tellphone</font> <br/><br/>
<font size="3">Email</font>
</p>
</div>
</div>
The text isn't aligned correctly in the center and right columns because they have the text alignment of center and right instead of left.
Rather than building your columns using text alignment, you can set them all to be a third of the parent's width, and give them all left-aligned text. See the following snippet.
.footer {
/* The dividing footer: */
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 200px;
background-color: #efebe785;
color: #000000;
/* Align all the text left so it lines up */
text-align: left;
border: 1px solid #00000094;
}
/* Build 3 equal-width columns inside the footer */
.left,
.right,
.center {
float: left;
width: 33.333%;
position: relative;
box-sizing: border-box;
padding-right: 15px;
padding-left: 15px;
}
<div class="footer">
<div class="left">
<p class="left">
<font size="5">SOCIAL</font> <br/><br/>
<font size="3">Facebook </font> <br/><br/>
<font size="3"> Twitter </font> <br/><br/>
<font size="3"> Youtube </font>
</p>
</div>
<div class="right">
<p class="right">
<font size="5">EXTRA</font> <br/><br/>
<font size="3">Our Chefs</font>
</p>
</div>
<div class="center">
<p class="center">
<font size="5">SUPPORT</font> <br/><br/>
<font size="3">Tellphone</font> <br/><br/>
<font size="3">Email</font>
</p>
</div>
</div>
When you have a list of items, it's a very good practice to use <li></li> tag. In this case, you have links, and for link destination, you should use . Each HTML Tag is created for a specific purpose.
And, for the columns layout, I have used CSS Grid Layout.
Grid Layout its very powerful, it helps you to organize your layout in many different ways. You just have to specify to a parent element display: grid;, and add here how you want to display columns. In our case, we have three columns, and these columns have same width, so, I have added grid-template-columns: 1fr 1fr 1fr;
grid-gap: 20px;
Fr is a fractional unit and 1fr is for 1 part of the available space
For a better reference, I would suggest this: Complete Guide To CSS Grid System
Hope I've been clear!
Your code structure should look something like this:
.footer {
/* The dividing footer: */
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 200px;
background-color: #efebe785;
color: #000000;
text-align: center;
border: 1px solid #00000094;
padding: 0 20px;
}
ul {
padding: 0;
}
ul li {
list-style: none;
}
.links {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 20px;
}
.links li {
margin-bottom: 10px;
}
.link-item {
padding: 0;
text-align: left;
}
.link-item.centered {
text-align: center;
}
.link-item.right-aligned {
text-align: right;
}
.link-item a {
color: #333;
font-size: 16px;
text-decoration: none;
}
.link-item a:hover {
color: blue;
}
<div class="footer">
<div class="links">
<div class="link-item">
<h3>Social</h3>
<ul>
<li>
Facebook
</li>
<li>
Twitter
</li>
<li>
Youtube
</li>
</ul>
</div>
<div class="link-item centered">
<h3>Support</h3>
<ul>
<li>
Tel
</li>
<li>
Email
</li>
</ul>
</div>
<div class="link-item right-aligned">
<h3>Extra</h3>
<ul>
<li>
Our Chefs
</li>
</ul>
</div>
</div>
This is the css you need (use flex):
.footer{
/* The dividing footer: */
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height:200px;
background-color: #efebe785;
color: #000000;
text-align: center;
border:1px solid #00000094;
display: flex;
}
.left, .center, .right{
flex-grow:1
}
https://jsfiddle.net/8wxn9sp4/
So I have multiple divs. Like this:
<div id="LeftContent"></div>
<div id="RightContent"></div>
And so on. My goal is to create a centered div after all that. When I try to, I end up with the div being in the empty spaces between the 'left' and 'right' divs. An answer with some CSS code would be most appreciated.
HTML5:
<!doctype html>
<html>
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="css/style.css">
<head>
<meta charset="utf-8">
<title>OneClickLearn</title>
</head>
<body>
<aside>
<br>
<nav>
<ul>
<li>Home</li>
<hr>
<li>Learn HTML</li>
<li>Learn CSS</li>
<li>Learn the Basics of Web Design</li>
<hr class="nav">
<li>Learn PHP</li>
<li>Learn JAVASCRIPT</li>
</ul>
</nav>
</aside>
<a id="nav-toggle" href="#" class="position"><span></span></a>
<main>
<header>
<div href="#" class="container">
<h1 class="title">OneClickLearn</h1>
</div>
</header>
</main>
<div class="header">
<div class="content">
<h1 class="large">Welcome To OneClickLearn</h1>
<hr class="hr">
<h2>A website for web developers everywhere</h2>
</div>
</div>
<div class="left">
<h1>What you can do with us</h1>
<h3>OneClickLearn offers several web design courses, as well as tools like Cascading Style Sheet libraries, and special colors to use for your website! Unlike some other coding websites, OneClickLearn is absolutely free!</h3>
<a class="abutton"><button>Learn More</button></a>
</div>
<div>
<div class="right">
<h1>CSS Libraries</h1>
<h3>What's a CSS Library? Simple. This tool is made for web developers who are advanced in website functionality, but maybe not so great in what we would call, 'the pretties'. A CSS library is all the tools in design you need-- waiting for you on the web.</h3>
<a class="abutton"><button>Learn More</button></a>
<a class="abutton"><button class="buttonop">Get Ocelot.css</button></a>
</div>
</div>
<div class="left">
<h1>Courses</h1>
<h3>All our courses (so far!) are based off of web design. With these courses, you learn the basics of HTML5, CSS3, and more languages coming soon. Also, you can learn our Cascading Style Sheet libraries' functions. If you have any reccomendations, just email us down below</h3>
<a class="abutton"><button>Email Us</button></a>
<a class="abutton"><button class="buttonop">Learn More</button></a>
</div>
<div class="div">
<h1>Having trouble with your website?</h1>
<h3>We'll see what we can do.</h3>
<button class="abutton">Contact Us</button>
</div>
</body>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<script src="js/nav.js"></script>
</html>
CSS:
#import url('https://fonts.googleapis.com/css?family=Open+Sans');
.div {
clear: both;
margin: 0 auto;
height: 100px;
width: 600px;
text-align: center;
}
.greyback {
background-color: #4B4949;
}
.nav {
background-color: #bdc3c7;
}
.denied {
color: #bdc3c7;
}
.denied:hover {
cursor: not-allowed;
}
body {
size: 100%;
display: cover;
margin: 0;
padding: 0;
}
p a {
color: #27ae60;
text-decoration: none;
}
p a:hover {
color: #27ae60;
text-decoration: underline;
cursor: pointer;
}
.header {
color: white;
width: 100%;
height: 300px;
background-color: #2980b9;
}
.content {
margin-top: 70px;
padding-top: 60px;
text-align: center;
}
.large {
font-size: 40px;
}
.hr {
width: 100px;
}
.left {
margin: 20px;
float: left;
height: auto;
width: 50%;
color: #4B4949;
}
.right {
margin: 20px;
float: right;
height: auto;
width: 50%;
color: #4B4949;
}
a {
color: #2AABAD;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.side {
margin: 20px;
}
.img {
display: inline-block;
}
button {
background-color: #2980b9;
border: none;
border-radius: 5PX;
height: 40px;
width: auto;
color: white;
}
button:hover {
background-color: #3498db;
cursor: pointer;
}
.abutton {
color: none;
text-decoration: none;
}
.buttonop {
background-color: #3498db;
border: none;
border-radius: 5PX;
height: 40px;
width: auto;
color: white;
}
.buttonop:hover {
background-color: #2980b9;
cursor: pointer;
}
.main {
width: 100%;
text-align: center;
}
.main-content {
display: inline-block;
}
P.S. I am using float:left; and float:right; for the left and right divs :)
Thanks :) (If I need any elaboration please let me know)
I'm not 100% clear on what you are asking, but you could try something like the following:
Html
<div id="LeftContent"></div>
<div id="RightContent"></div>
<div id="CentredDiv"></div>
CSS
div {
border: 1px solid #f0f;
height: 50px;
box-sizing: border-box;
width: 400px;
}
#LeftContent,
#RightContent {
float: left;
}
#CentredDiv {
width: 800px;
clear: left;
}
Yeah, not totally sure what you want, but maybe something like this?
#CenteredContent {
clear: both;
margin: 0 auto;
height: 100px;
width: 100px;
background-color: red;
}
What I understand from your question is that you need a centered div. You can do this to achieve centered div.
HTML:
<div class="centered-div">
Some Content
</div>
CSS:
.centered-div {
width: 400px;
min-height: 400px;
margin: 0 auto;
clear: both;
}
I hope that helps :)
Here’s my HTML and CSS for an exercise, I do not understand why my border in the section is wrapping all the content. I would like to have two independent wrapped sections: "intro" and "main".
https://jsfiddle.net/fhd9eLnq/
#font-face {
font-family: myFont src: url(BebasNeue-webfont.woff);
}
body {
font-family: myFont;
width: 90%;
margin: auto;
}
h1,
h2 {
display: inline;
color: #016008;
}
h1 {
font-size: 60px;
}
h2 {
font-size: 40px;
}
li {
display: inline;
}
li a {
text-align: center;
text-decoration: none;
}
img {
position: relative top: 0px;
right: 20px;
float: left;
margin: 5px;
border: 1px solid grey;
}
.intro {
float: right;
}
.primarynav {
list-style-type: none;
color: #016008;
text-align: right;
}
.secondnav {
display: block;
text-align: inherit;
}
.main {
padding: 10px;
border: 1px solid grey;
}
.intro {
border: 1px solid grey;
margin: 15px;
}
.news1 {
width: 60%;
background-color: #dddddd;
margin: 15px;
}
section {} footer {
background-color: #dddddd;
}
fieldset {
background-color: white;
}
mark {
color: black;
background: none;
font-weight: bold;
}
.latestnews {
background-color: #dddddd;
position: relative;
left: 790px;
bottom: 365px;
width: 33%;
padding: 5px;
}
.suscribe {
background-color: #dddddd;
position: relative;
left: 790px;
bottom: 350px;
width: 33%;
padding: 5px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Welcome to BootsWorld</title>
<link rel="stylesheet" type="text/css" href="boots.css" />
</head>
<body>
<header>
<nav>
<div class="logo">
<h1>BOOT</h1>
<h2>WORLD</h2>
</div>
<ul class="primarynav">
<li>Site map
</li>
<li>Privacy policy
</li>
<li>Accessibility
</li>
</ul>
<ul class="secondarynav">
<li>HOME
</li>
<li>SHOP
</li>
<li>NEWS
</li>
<li>ABOUT US
</li>
<li>CONTACT US
</li>
<li>SUBSCRIBE
</li>
</ul>
</nav>
</header>
<article class="intro">
<header>
<img src="boots.png" alt="boots image" />
<h2>Welcome to boot world</h2>
</header>
<p>BootWorld is the largest online footwear retailer in the UK.Our shop always has stock of the latest designer footwear at the most competitive prices. Want to know more about us or our products, why not send us a message.
</p>
</article>
<section class="main">
<article class="news">
<header>
<h2>NEW IN THE SHOP</h2>
</header>
<div class="news1">
<h3>CLASSIC COWBOY BOOTS</h3>
<p>Stand out from the crowd in a pair of classic cowboy boots. Available for Ladies and Gents from only
<mark class="black">£49.99</mark>
</p>
<h3>MILITARY BOOTS</h3>
<p>Hard-wearing Men's military boots, guaranteed to withstand all weathers. From only
<mark class="black">£69.99</mark>
</p>
<h3>ROMAN SANDALS</h3>
<p>Get ready for summer with some stylish roman sandals. From only
<mark class="black">£39.99</mark>
</p>
<h3>OFFICE SHOES</h3>
<p>You don't have to wear boring shoes to the office. Check out our new stock of Ladies and Gents fashionable office shoes from only
<mark class="black">£44.99</mark>
</p>
</div>
</article>
<aside class="latestnews">
<h3>Latest News</h3>
<p>Our seasonal sale has kicked off again! make sure you stop by our online shop to pick up a bargain.</p>
<footer>Posted by: Joe</footer>
</aside>
<aside class="suscribe">
<h3>Subscribe</h3>
<p>Sign up to our newsletter and receive exclusive offers by email weekly.</p>
<form>
<fieldset>
<legend>SIGN UP NOW!</legend>
<p>
<label for="yourname">Your name</label>
<br/>
<input type="text" name="yourname" id="yourname" size="20" />
</p>
<p>
<label for="emailaddress">email address</label>
<br/>
<input type="text" name="emailaddress" id="emailaddress" size="20" />
</p>
<button onclick="myFunction()">Sign Up</button>
</fieldset>
</form>
</aside>
</section>
<footer class="pagefooter">
<h3>OUR ADDRESS:</h3>
<p>Malet Street,
<br/>London, WC1E 7HX</p>
</footer>
</body>
</html>
Because you float the image and intro and never clear them. Add a clear to your .main CSS rule:
.main {
padding: 10px;
border: 1px solid grey;
clear: both;
}
jsFiddle example
I notice you open your main class on line 40 <section class="main"> however you never close it. When I close it I am able to put a border around the separate classes. I also was able to use your CSS:
.main {
padding: 10px;
border: 2px solid grey;
}
to convert over to news1 and was able to wrap it without issue. If you could explain further I can try to help further.