How do I align divs in simple HTML page - html

I have this simple HTML template, I have added height instead of having content.
What I am after is to align "Delivery" and "Contact Us" div below "About Us" div and "Returns Policy" on the right as it is.
#import url(https://fonts.googleapis.com/css?family=News+Cycle);
body {
font-family: 'News Cycle', sans-serif;
color: #666;
line-height: 1.3;
}
strong,
b {
font-weight: 900;
}
h3 {
font-weight: bold;
border-bottom: 1px solid #e2e2e2;
}
p,
ul li {
font-size: 14px;
font-weight: lighter;
}
#logo,
#product {
float: left;
width: 100%;
}
#title,
#logo {
padding: 0 1% 0 1%;
margin: 1%;
}
#product_description,
#about_us,
#delivery,
#returns_policy,
#contact_us {
float: left;
width: 45%;
padding: 0 1% 0 1%;
margin: 1%;
border-radius: 5px;
border: 1px #e2e2e2 solid;
background-color: #f5fafa;
}
#product_image {
text-align: center;
}
<div id="logo">
</div>
<div id="product">
<div id="title">
<h1>XYZ</h1>
</div>
<div id="product_image">
</div>
<div id="product_description">
<h3>Product Description</h3>
</div>
</div>
<div id="about_us" style="height:600px;">
<h3>About Us</h3>
<div class="content">
</div>
</div>
<div id="delivery" style="height:200px;">
<h3>Delivery</h3>
<div class="content">
</div>
</div>
<div id="returns_policy" style="height:800px;">
<h3>Returns Policy</h3>
<div class="content">
</div>
</div>
<div id="contact_us" style="height:100px;">
<h3>Contact Us</h3>
<div class="content">
</div>
</div>

html:
<div id="logo">
</div>
<div id="product">
<div id="title">
<h1>XYZ</h1>
</div>
<div id="product_image">
</div>
<div id="product_description">
<h3>Product Description</h3>
</div>
</div>
<div class="leftCol">
<div id="about_us" style="height:600px;">
<h3>About Us</h3>
<div class="content">
</div>
</div>
<div id="delivery" style="height:200px;">
<h3>Delivery</h3>
<div class="content">
</div>
</div>
</div>
<div class="rightCol">
<div id="returns_policy" style="height:800px;">
<h3>Returns Policy</h3>
<div class="content">
</div>
</div>
<div id="contact_us" style="height:100px;">
<h3>Contact Us</h3>
<div class="content">
</div>
</div>
</div>
add to css
.leftCol { width: 50%; float: left; }
.rightCol { width: 50%; float: right; }

Related

Div not appearing - css issue

I have the following code where the bottom section is not displaying and I am not sure why.
This is the part that doesn't display:
<div class="tribeconversation">
<div class="tribeconvo">Joeyc: hey everyone</div>
<div class="tribeconvo">JakeP97: hello joey</div>
<div class="tribeconvo">Joeyc: oi m8, whats up</div>
<div class="tribeconvo">TheKid: LOL hey JakeP</div>
<div class="tribeconvo">Joeyc: RIP</div>
</div>
Fiddle here: https://jsfiddle.net/smvbaa6u/
You've set font-size: 0 to tribeactivity - reset it to initial for the tribeconversation - see demo below:
#tribeactivity {
text-align: center;
font-size: 0;
}
#Amuraheader {
font-family: 'survival';
font-size: 80px;
text-align: center;
color: #2B32E4;
text-shadow: 3px 3px 1px #ffffff;
}
#Malosiheader {
font-family: 'survival';
font-size: 80px;
text-align: center;
color: #DB282B;
text-shadow: 3px 3px 1px #ffffff;
margin-top: 30px;
}
.tribeavi {
width: 149px;
height: 186px;
background-size: cover;
display: inline-block;
}
.tribeaviname {
font-size: 18px;
font-family: 'survival';
text-align: center;
width: 100%;
height: 27px;
padding-top: 3px;
top: 156px;
position: relative;
background-color: rgba(0,0,0,0.7);
color: white;
}
.tribeconversation {
display: inline-block;
font-size: initial;
}
<div id="tribeactivity">
<div id="Amuraheader">Amura</div>
<div class="tribeavi" style="background-image: url('http://zwooper.com/media/avatars/Riku1274-14154.png?v=2053856125')">
<div class="tribeaviname">Riku1274</div>
</div>
<div class="tribeavi" style="background-image: url('http://zwooper.com/media/avatars/realityobsessed-7881.png?v=625345208')">
<div class="tribeaviname">Reality</div>
</div>
<div class="tribeavi" style="background-image: url('http://www.zwooper.com/media/avatars/johnnyscott1127-7443.png?v=590056866')">
<div class="tribeaviname">Johnny</div>
</div>
<div class="tribeavi" style="background-image: url('http://zwooper.com/media/avatars/exploremedora-7274.png?v=1507280925')">
<div class="tribeaviname">ExploreMe</div>
</div>
<div class="tribeavi" style="background-image: url('http://zwooper.com/media/avatars/yswimmer96-1356.png?v=386446076')">
<div class="tribeaviname">Yswimmer</div>
</div>
<div class="tribeavi" style="background-image: url('http://zwooper.com/media/avatars/xStqqd-16258.png?v=173536863')">
<div class="tribeaviname">xStqqd</div>
</div>
<div class="tribeavi" style="background-image: url('http://zwooper.com/media/avatars/AngelOfWater-885.png?v=430260016')">
<div class="tribeaviname">Angelofwater</div>
</div>
<div class="tribeavi" style="background-image: url('http://zwooper.com/media/avatars/a07strand-9696.png?v=259628760')">
<div class="tribeaviname">A07Strand</div>
</div>
<div class="tribeavi" style="background-image: url('http://zwooper.com/media/avatars/JakeP97-3100.png?v=529092857')">
<div class="tribeaviname">JakeP97</div>
</div>
<div class="tribeavi" style="background-image: url('http://zwooper.com/media/avatars/joeyc-13212.png?v=101411917')">
<div class="tribeaviname">JoeyC</div>
</div>
<div id="Malosiheader">Malosi</div>
<div class="tribeavi" style="background-image: url('http://zwooper.com/media/avatars/SuperDoodle-2870.png?v=1868660820')">
<div class="tribeaviname">SuperDoodle</div>
</div>
<div class="tribeavi" style="background-image: url('http://zwooper.com/media/avatars/wwxcrunner1-1056.png?v=48014610')">
<div class="tribeaviname">wwxcrunner</div>
</div>
<div class="tribeavi" style="background-image: url('http://zwooper.com/media/avatars/King_Canine-10700.png?v=327204573')">
<div class="tribeaviname">King_Canine</div>
</div>
<div class="tribeavi" style="background-image: url('http://zwooper.com/media/avatars/WILLZ14-8313.png?v=620214729')">
<div class="tribeaviname">Willz14</div>
</div>
<div class="tribeavi" style="background-image: url('http://zwooper.com/media/avatars/BostonRob524-7935.png?v=1279836291')">
<div class="tribeaviname">BostonRob</div>
</div>
<div class="tribeavi" style="background-image: url('http://zwooper.com/media/avatars/devon19-10680.png?v=168166820')">
<div class="tribeaviname">Devon19</div>
</div>
<div class="tribeavi" style="background-image: url('http://zwooper.com/media/avatars/Alvarovidalpuga-8630.png?v=1796517703')">
<div class="tribeaviname">Alvaro</div>
</div>
<div class="tribeavi" style="background-image: url('http://zwooper.com/media/avatars/Ginger7-4349.png?v=564697580')">
<div class="tribeaviname">Ginger7</div>
</div>
<div class="tribeavi" style="background-image: url('http://zwooper.com/media/avatars/TheKid-22456.png?v=626667976')">
<div class="tribeaviname">TheKid</div>
</div>
<div class="tribeavi" style="background-image: url('http://zwooper.com/media/avatars/joeyc-13212.png?v=101411917')">
<div class="tribeaviname">Krystiian</div>
</div>
<div class="tribeconversation">
<div class="tribeconvo">Joeyc: hey everyone</div>
<div class="tribeconvo">JakeP97: hello joey</div>
<div class="tribeconvo">Joeyc: oi m8, whats up</div>
<div class="tribeconvo">TheKid: LOL hey JakeP</div>
<div class="tribeconvo">Joeyc: RIP</div>
</div>
</div>
The div .tribeconvo inherits a font-size:0; from #tribeactivity.
#tribeactivity {
text-align: center;
font-size: 0;
}
Therefore, the .tribeconversation div has a height:0 and doesn't appear. Just add a font size bigger than 0 to .tribeconvo to fix this.
.tribeconvo{
font-size: 16px;
}

Why are my divs overlapping eachother?

These divs should be under eachother, but they end up overlapping. I have already tried deleting the float and debugging each attribute within the code.
I am not sure what am I doing wrong. The rest of the page has a similar structure but it only happens here.
Some help would be appreciated. Thanks in advance. I am fairly new to Frontend.
.features-list{
width: 100%;
background-color: #ffffff;
}
.feature-card{
padding-left: 50px;
padding-right: 50px;
background: #ffffff;
border-radius: 4px;
margin-bottom: 10px;
box-shadow: 0 0 3px 1px #e0e0e0
}
.feature-container{
width: 33%;
float: left;
}
.eyecatcher{
color: #95C123;
height: 40px;
font-weight: bold;
font-size: 20px;
}
.video-explanation{
background: #7d7d7d;
padding: 45px 0;
}
<div class="features-list">
<div class="feature-card">
<div class="feature-container">
<div class="eyecatcher">
asdasdasd2
</div>
<div>
asdasdasd
</div>
</div>
<div class="feature-container">
<div class="eyecatcher">
asdasdasd2
</div>
<div>
asdasdasd
</div>
</div>
<div class="feature-container">
<div class="eyecatcher">
asdasdasd2
</div>
<div>
asdasdasd
</div>
</div>
<div class="feature-container">
<div class="eyecatcher">
asdasdasd2
</div>
<div>
asdasdasd
</div>
</div>
<div class="feature-container">
<div class="eyecatcher">
asdasdasd2
</div>
<div>
asdasdasd
</div>
</div>
</div>
</div>
<div class="video-explanation">
Video Explanation
</div>
As I wrote in the comment above either you have to clear the float or add overflow: hidden to .feature-card
With clear: both:
.features-list{
width: 100%;
background-color: #ffffff;
}
.feature-card{
padding-left: 50px;
padding-right: 50px;
background: #ffffff;
border-radius: 4px;
margin-bottom: 10px;
box-shadow: 0 0 3px 1px #e0e0e0
}
.feature-container{
width: 33%;
float: left;
}
.eyecatcher{
color: #95C123;
height: 40px;
font-weight: bold;
font-size: 20px;
}
.video-explanation{
background: #7d7d7d;
padding: 45px 0;
}
.feature-card:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
<div class="features-list">
<div class="feature-card">
<div class="feature-container">
<div class="eyecatcher">
asdasdasd2
</div>
<div>
asdasdasd
</div>
</div>
<div class="feature-container">
<div class="eyecatcher">
asdasdasd2
</div>
<div>
asdasdasd
</div>
</div>
<div class="feature-container">
<div class="eyecatcher">
asdasdasd2
</div>
<div>
asdasdasd
</div>
</div>
<div class="feature-container">
<div class="eyecatcher">
asdasdasd2
</div>
<div>
asdasdasd
</div>
</div>
<div class="feature-container">
<div class="eyecatcher">
asdasdasd2
</div>
<div>
asdasdasd
</div>
</div>
</div>
</div>
<div class="video-explanation">
Video Explanation
</div>
Or with overflow: hidden:
.features-list{
width: 100%;
background-color: #ffffff;
}
.feature-card{
padding-left: 50px;
padding-right: 50px;
background: #ffffff;
border-radius: 4px;
margin-bottom: 10px;
box-shadow: 0 0 3px 1px #e0e0e0;
overflow: hidden;
}
.feature-container{
width: 33%;
float: left;
}
.eyecatcher{
color: #95C123;
height: 40px;
font-weight: bold;
font-size: 20px;
}
.video-explanation{
background: #7d7d7d;
padding: 45px 0;
}
<div class="features-list">
<div class="feature-card">
<div class="feature-container">
<div class="eyecatcher">
asdasdasd2
</div>
<div>
asdasdasd
</div>
</div>
<div class="feature-container">
<div class="eyecatcher">
asdasdasd2
</div>
<div>
asdasdasd
</div>
</div>
<div class="feature-container">
<div class="eyecatcher">
asdasdasd2
</div>
<div>
asdasdasd
</div>
</div>
<div class="feature-container">
<div class="eyecatcher">
asdasdasd2
</div>
<div>
asdasdasd
</div>
</div>
<div class="feature-container">
<div class="eyecatcher">
asdasdasd2
</div>
<div>
asdasdasd
</div>
</div>
</div>
</div>
<div class="video-explanation">
Video Explanation
</div>

How to remove space between section tags

I'm having some trouble removing the space between the two sections of my code.
Here is the JSFiddle of my code.
/********************Intro**********************/
.intro-content {
padding-top: 250px;
}
.intro-content h1 {
font-family: "Arial Black";
font-weight: bolder;
}
#typed {
font-family: monospace;
font-size: 20px;
}
.button {
padding-top: 50px;
}
.button button {
background-color: black;
border-color: black;
border-radius: 25px;
color: white;
font-weight: bolder;
margin-bottom: 22%;
}
/********************Intro*********************/
/********************Contact*********************/
#about {
background-color: lightgray;
}
#skill {
background-color: lightblue;
}
#intro-section {
background-color: lightgreen;
}
.contact-info h4 {
font-family: "Arial Black";
font-weight: bolder;
}
.contact-icon {
padding-top: 50px;
}
.contact-block {
padding-top: 20px;
align-content: center;
margin-left: 5%;
}
.aboutme h1 {
padding-top: 50px;
margin-left: 50px;
font-family: "Arial Black";
font-size: 50px;
color: black;
font-weight: bolder;
text-shadow: 2px 2px darkgray;
}
.my-contact .contact-info {
display: table-cell;
font-size: 18px;
}
.my-contact .contact-icon span {
font-size: 20px;
margin-right: 15px;
float: left;
margin-top: 25px;
}
.contact-summary {
padding-top: 70px;
font-style: italic;
font-size: 20px;
}
.contact-developer {
padding-top: 95px;
margin-bottom: 7%;
font-size: 15px;
font-weight: bold;
}
/********************Contact*********************/
<!----------------------Intro-------------------------------->
<section id="intro-section" class="intro">
<div class="intro-content">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12 text-center">
<h1>HELLO, I'M ERIC.</h1>
<div id="typed-strings">
<p>Welcome to my personal website!</p>
<p>UI DESIGNER / WEB DEVELOPER</p>
</div>
<span id="typed"></span>
<div class="button">
<button>GET IN TOUCH</button>
</div>
</div>
</div>
</div>
</div>
</section>
<!----------------------Intro----------------------------->
<!----------------------Contact----------------------------->
<section id="about" class="aboutme">
<h1>ABOUT ME</h1>
<div class="container-fluid">
<div class="contact-block clearfix">
<div class="row">
<div class="row">
<div class="col-lg-12 col-md-12">
<div class="contact-summary">
<p>Welcome to my personal website! My name is Eric Holdridge. I'm a web developer and UI designer. I have been web developing for 2 years.
I love creating beautiful and responsive websites for anyone. Most web designers won't put in the time and effort to create a
fully functional website. If you have an idea, I will make it happen. You can reach me at
one of my contact options below.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="my-contact clearfix">
<div class="contact-icon">
<span class="glyphicon glyphicon-user"></span>
<div class="contact-info">
<h4>Name:</h4>
<p>Eric</p>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="my-contact clearfix">
<div class="contact-icon">
<span class="glyphicon glyphicon-envelope"></span>
<div class="contact-info">
<h4>Email:</h4>
<p>e#gmail.com</p>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="my-contact clearfix">
<div class="contact-icon">
<span class="glyphicon glyphicon-phone"></span>
<div class="contact-info">
<h4>Phone:</h4>
<p>(563)</p>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="my-contact clearfix">
<div class="contact-icon">
<span class="glyphicon glyphicon-calendar"></span>
<div class="contact-info">
<h4>Date of Birth:</h4>
<p>April</p>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="my-contact clearfix">
<div class="contact-icon">
<span class="glyphicon glyphicon-globe"></span>
<div class="contact-info">
<h4>Location:</h4>
<p></p>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="my-contact clearfix">
<div class="contact-icon">
<span class="glyphicon glyphicon-flag"></span>
<div class="contact-info">
<h4>Nationality:</h4>
<p>United States</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12">
<div class="contact-developer">
<p>CREATIVE FRONT-END AND BACK-END DEVELOPER.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!----------------------Contact----------------------------->
That's the margin on your h1's collapsing outside of the parent. There are a bunch of ways to fix it, so I just removed the top margin on h1.
Here's a resource - https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
If there is no border, padding, inline content, block_formatting_context created or clearance to separate the margin-top of a block from the margin-top of its first child block, or no border, padding, inline content, height, min-height, or max-height to separate the margin-bottom of a block from the margin-bottom of its last child, then those margins collapse. The collapsed margin ends up outside the parent.
/********************Intro**********************/
.intro-content {
padding-top: 250px;
}
.intro-content h1 {
font-family: "Arial Black";
font-weight: bolder;
}
#typed {
font-family: monospace;
font-size: 20px;
}
.button {
padding-top: 50px;
}
.button button {
background-color: black;
border-color: black;
border-radius: 25px;
color: white;
font-weight: bolder;
margin-bottom: 22%;
}
/********************Intro*********************/
/********************Contact*********************/
#about {
background-color: lightgray;
}
#skill {
background-color: lightblue;
}
#intro-section {
background-color: lightgreen;
}
.contact-info h4 {
font-family: "Arial Black";
font-weight: bolder;
}
.contact-icon {
padding-top: 50px;
}
.contact-block {
padding-top: 20px;
align-content: center;
margin-left: 5%;
}
.aboutme h1 {
padding-top: 50px;
margin-left: 50px;
font-family: "Arial Black";
font-size: 50px;
color: black;
font-weight: bolder;
text-shadow: 2px 2px darkgray;
}
.my-contact .contact-info {
display: table-cell;
font-size: 18px;
}
.my-contact .contact-icon span {
font-size: 20px;
margin-right: 15px;
float: left;
margin-top: 25px;
}
.contact-summary {
padding-top: 70px;
font-style: italic;
font-size: 20px;
}
.contact-developer {
padding-top: 95px;
margin-bottom: 7%;
font-size: 15px;
font-weight: bold;
}
/********************Contact*********************/
h1 {
margin-top: 0;
}
<!----------------------Intro-------------------------------->
<section id="intro-section" class="intro">
<div class="intro-content">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12 text-center">
<h1>HELLO, I'M ERIC.</h1>
<div id="typed-strings">
<p>Welcome to my personal website!</p>
<p>UI DESIGNER / WEB DEVELOPER</p>
</div>
<span id="typed"></span>
<div class="button">
<button>GET IN TOUCH</button>
</div>
</div>
</div>
</div>
</div>
</section>
<!----------------------Intro----------------------------->
<!----------------------Contact----------------------------->
<section id="about" class="aboutme">
<h1>ABOUT ME</h1>
<div class="container-fluid">
<div class="contact-block clearfix">
<div class="row">
<div class="row">
<div class="col-lg-12 col-md-12">
<div class="contact-summary">
<p>Welcome to my personal website! My name is Eric Holdridge. I'm a web developer and UI designer. I have been web developing for 2 years.
I love creating beautiful and responsive websites for anyone. Most web designers won't put in the time and effort to create a
fully functional website. If you have an idea, I will make it happen. You can reach me at
one of my contact options below.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="my-contact clearfix">
<div class="contact-icon">
<span class="glyphicon glyphicon-user"></span>
<div class="contact-info">
<h4>Name:</h4>
<p>Eric</p>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="my-contact clearfix">
<div class="contact-icon">
<span class="glyphicon glyphicon-envelope"></span>
<div class="contact-info">
<h4>Email:</h4>
<p>e#gmail.com</p>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="my-contact clearfix">
<div class="contact-icon">
<span class="glyphicon glyphicon-phone"></span>
<div class="contact-info">
<h4>Phone:</h4>
<p>(563)</p>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="my-contact clearfix">
<div class="contact-icon">
<span class="glyphicon glyphicon-calendar"></span>
<div class="contact-info">
<h4>Date of Birth:</h4>
<p>April</p>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="my-contact clearfix">
<div class="contact-icon">
<span class="glyphicon glyphicon-globe"></span>
<div class="contact-info">
<h4>Location:</h4>
<p></p>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="my-contact clearfix">
<div class="contact-icon">
<span class="glyphicon glyphicon-flag"></span>
<div class="contact-info">
<h4>Nationality:</h4>
<p>United States</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12">
<div class="contact-developer">
<p>CREATIVE FRONT-END AND BACK-END DEVELOPER.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!----------------------Contact----------------------------->

words need to be more appart from eachother and more in the middle of the screen..

This might seem rather easy to solve, but I couldn't find an answer on stackoverflow nor anywhere on the internet to solve my little problem..
I need these http://prntscr.com/a0y8jm words to be more in the middle of the screen, and I need to be able to put the words more appart from eachother, I first used Padding, but I don't really think that works out so well, and the words aren't responding on padding anymore eighter (because I made the layout different)
anyone got any tips on how to make this work, and if you have some tips for the other parts of my code, those are always welcome too. I am not in programming that long yet, so I could use all the information I can get :)
This is my code,
body, html {
margin-left: 10%;
margin-right: 10%;
padding: 0px;
height: 100%;
font-family: georgia, "Comic Sans MS";
background-color: #f0f0f0;
}
header {
height: 5%;
border-bottom: thick solid grey;
}
.img {
width: 25%;
height: 30%;
background-color:#f0f0f0;
float: left;
}
.antwoord {
float: left;
width: 95%;
height: 25px;
background-color: white;
border-style: solid;
border-color: #000000;
border-width: 4px;
}
.move1 {
}
.move2 {
margin-top: 12.5%
}
.move4 {
margin-top: 19%
}
.move5 {
margin-top: 33.5%
}
.move6 {
margin-top: 20.8%
}
.move7 {
margin-top: 37.5%
}
.word, .word .tekst, .word p {
display: inline;
}
.my-row{
clear: both;
}
.answers .word, .answers .word2{
float: left;
padding: 3px;
width: 100px;
}
footer {
border-top: thick solid grey;
height: 5%;
display : table-row;
vertical-align : bottom;
}
.points {
float: right;
}
.container {
height:100%;
border-collapse:collapse;
display : table;
}
.igen {
font-size: 25px;
font-weight: bold;
}
.sprint {
float: right;
}
.copyright {
position: relative;
bottom: 20px;
left: 65px;
font-size: 10px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Words</title>
<link rel="stylesheet" href="css/style.css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<script>
</script>
</head>
<body>
<header>
<span class="fa fa-refresh" style="font-size:25px;"></span><span class="igen"> igen</span>
<span class="points"><i class="fa fa-thumbs-o-up" style="font-size:24px"></i>Rigtige: 0 <i class="fa fa-thumbs-o-down" style="font-size:24px"></i>Forkerte: 0</span>
</header>
<div class="container">
<div class="img" id="img1">
<div class="plaatje" id="plaatje1"><center><img src="img/cat.jpg" alt="cat" width="50%;"></div>
<div class="move1"><div class="antwoord" id="antwoord1"></div></div>
</div>
<div class="img" id="img2">
<div class="plaatje" id="plaatje1"><center><img src="img/beak.jpg" alt="beak" width="50%;"></div>
<div class="move2"><div class="antwoord" id="antwoord2"></div></div>
</div>
<div class="img" id="img3">
<div class="plaatje" id="plaatje3"><center><img src="img/spoon.jpg" alt="spoon" width="50%;"></div>
<div class="move3"><div class="antwoord" id="antwoord3"></div></div>
</div>
<div class="img" id="img4">
<div class="plaatje" id="plaatje4"><center><img src="img/milk.jpg" alt="milk" width="50%;"></div>
<div class="move4"><div class="antwoord" id="antwoord4"></div></div>
</div>
<div class="img" id="img5">
<div class="plaatje" id="plaatje5"><center><img src="img/egg.jpg" alt="egg" width="50%;"></div>
<div class="move5"><div class="antwoord" id="antwoord5"></div></div>
</div>
<div class="img" id="img6">
<div class="plaatje" id="plaatje6"><center><img src="img/thee.jpg" alt="tea" width="50%;"></div>
<div class="move6"><div class="antwoord" id="antwoord6"></div></div>
</div>
<div class="img" id="img7">
<div class="plaatje" id="plaatje7"><center><img src="img/meel.jpg" alt="meel" width="50%;"></div>
<div class="move7"><div class="antwoord" id="antwoord7"></div></div>
</div>
<div class="img" id="img8">
<div class="plaatje" id="plaatje8"><center><img src="img/passport.jpg" alt="passport" width="50%;"></div>
<div class="move8"><div class="antwoord" id="antwoord8"></div></div>
</div>
<div class="answers">
<div class="my-row">
<div class="word" id="word1">
<div class="tekst" id="tekst1"> <p>Cat</p> </div>
</div>
<div class="word" id="word2">
<div class="tekst" id="tekst2"> <p>spoon</p> </div>
</div>
<div class="word" id="word3">
<div class="tekst" id="tekst3"> <p>meal</p> </div>
</div>
<div class="word" id="word4">
<div class="tekst" id="tekst4"> <p>passport</p> </div>
</div>
</div>
<div class="my-row">
<div class="word2" id="word5">
<div class="tekst" id="tekst5"> <p>egg</p> </div>
</div>
<div class="word2" id="word6">
<div class="tekst" id="tekst6"> <p>beak</p> </div>
</div>
<div class="word2" id="word7">
<div class="tekst" id="tekst7"> <p>tea</p> </div>
</div>
<div class="word2" id="word8">
<div class="tekst" id="tekst8"> <p>milk</p> </div>
</div>
</div>
</div>
<footer>
<img class="dansk" id="dansk" src="img/dansk2.jpg" alt="dansk" />
<img class="sprint" id="sprint" src="img/sprint2.png" alt="sprint" />
<center><span class="copyright"> ©2013 laerdansk / FC-Sprint² Leerbedrijf bronnen </span></center>
</footer>
</body>
</html>

Print content for Xcode

This is HTLM code. We click ctrl+P for we print we can view it on one page. But when we view it on Webview controller of Xcode. It shows on 2 pages. Any ideas help us. The html Content on below
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>StoryLeather</title>
<style>
body {
width: 100%;
/*background-color:green;*/
margin: 0px;
}
#top-div {
width: 100%;
}
#bottom-div {
width: 100%;
/*margin-top:40px;*/
}
.left-div {
float: left;
width: 45%;
/*background-color:pink;*/
margin-left: 5%;
}
.right-div {
float: right;
width: 45%;
/*background-color:blue;*/
margin-right: 5%;
text-align: center;
}
.text {
font-family: '微軟正黑體';
}
.number {
font-size: 35px;
margin-top: 20px;
}
.big-div {
width: 100%;
/*margin-top:30px;*/
}
.button {
width: 100%;
height: 40px;
margin-top: 10px;
}
.title-1 {
background-color: black;
width: 35%;
float: left;
border: none;
height: 29px;
color: white;
padding-top: 15px;
font-size: 13px;
}
#text-6 {
background-color: white;
width: 50%;
float: right;
height: 30px;
}
.line2 {
background-color: #a1a1a1;
height: 1px;
width: 100%;
margin-top: 10px;
}
.label {
margin-top: 30px;
font-size: 13px;
text-align: left;
}
.txt {
margin-top: 20px;
}
.img-f {
width: 50%;
float: left;
text-align: left;
margin-top: 15px;
}
.sign-r {
width: 50%;
float: right;
margin-top: 15px;
}
.line3 {
margin-top: 25px;
width: 100%;
height: 1px;
background-color: black;
}
.copy-text {
float: right;
/*margin-top:50px;*/
margin-right: 5%;
font-family: 'Microsoft JhengHei';
width: 45%;
text-align: right;
font-size: 5px;
}
.sizefont10 {
font-size: 10px;
}
.txt-right {
text-align: center;
font-weight: bold;
}
.footer {
font-size: 10px;
width: 100%;
margin-top: 30px;
}
.left-footer {
float: left;
/*margin-top:50px;*/
margin-left: 5%;
font-family: 'Microsoft JhengHei';
width: 45%;
}
.text-7 {
font-size: 13px;
}
.line {
height: 2px;
width: 100%;
background-color: black;
}
.img-Phone {
margin-top: 15px;
}
</style>
</head>
<body>
<div id="top-div">
<div class="left-div">
<div id="div-logo">
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSIkkJlwgDZDonmGAYOJgB0_895j4ocX-9gCxgLc90rLgOJHaNA" class="img-logo" style="max-height:50px;" />
</div>
<div class="text" style="font-weight:bold; /*margin-top:40px;*/ margin-top:10px; font-size:20px;">
STYLE 5C2
</div>
<div style="font-family:微軟正黑體; /*margin-top:20px;*/margin-top:10px; font-size:15px;">
­ IPhone 5C 硬殼式下蓋 客製化皮套
</div>
<div id="text-4" class="text" style="margin-top:10px;font-size:11px; width:100%;">
<div id="text-4-left" style="width:20%; float:left;">
- 外部皮料
<br/>- 備註
<br/>- 烙印選項
</div>
<div id="text-4-right" style="width:80%;float:left;">
十字紋 / A37-十字紋淺米白
<br/>[無填寫]
<br/>無需
</div>
</div>
<div style="clear:both;"></div>
<div class="img-Phone" style="width:100%;">
<img style="max-width:30%; float:left;" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSIkkJlwgDZDonmGAYOJgB0_895j4ocX-9gCxgLc90rLgOJHaNA" />
<img style="max-width:30%; float:right; margin-right:20%;" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSIkkJlwgDZDonmGAYOJgB0_895j4ocX-9gCxgLc90rLgOJHaNA" />
</div>
</div>
<div class="right-div">
<div id="div1">
<div class="text" style="margin-top:10px;font-size:15px;">
CUSTOM ORDERS
</div>
<div class="number" style="/*margin-top:30px;*/">
<div id="text-2" class="text" style="font-family:'Microsoft JhengHei';">
20140912
</div>
<div class="line">
</div>
<div id="text-3" class="text" style="font-family:'Microsoft JhengHei';">
A140912001
</div>
<div class="big-div">
<div class="button">
<div class="title-1">
客戶資訊
</div>
</div>
<div class="label">
<div class="label1">
<div class="txt">
姓名
</div>
<div class="line2">
</div>
</div>
<div class="label2">
<div class="txt">
電話
</div>
<div class="line2">
</div>
</div>
<div class="label3">
<div class="txt">
地址
</div>
<div class="line2">
</div>
</div>
</div>
<div class="sign">
<div class="img-f">
<img src="img2.png" style="width:40%;" />
</div>
<div class="sign-r">
<div class="text-7">訂購人確認 \/</div>
<div class="line3"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="clear:both;"></div>
<div class="footer">
<div class="left-footer">
- 經銷存聯 - 訂做商品下單後約30 天交件
</div>
<div class="copy-text">
COPYRIGHT 2014 PTOW KING CO. LTD ALL RIGHTS RESEARVED
</div>
</div>
<div style="clear:both;background-color:black; height:1px;"></div>
<div id="bottom-div">
<div class="left-div">
<div id="div-logo-2">
<img src="logo.png" class="img-logo" style="max-height:50px;" />
</div>
<div class="text" style="font-weight:bold;/* margin-top:40px;*/ margin-top:10px; font-size:20px;">
STYLE 5C2
</div>
<div style="font-family:微軟正黑體;/* margin-top:20px;*/margin-top:10px; font-size:15px;">
­ IPhone 5C 硬殼式下蓋 客製化皮套
</div>
<div id="text-4-2" class="text" style="margin-top:10px; font-size:11px;">
<div id="text-left-4-2" style="width:20%; float:left;">
- 外部皮料
<br/>- 備註
<br/>- 烙印選項
</div>
<div id="text-right-4-2" style="width:80%;float:left;">
十字紋 / A37-十字紋淺米白
<br/>[無填寫]
<br/>無需
</div>
</div>
<div style="clear:both;"></div>
<div class="img-Phone" style="width:100%;background-color:yellow;">
<img style="max-width:30%; float:left;" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSIkkJlwgDZDonmGAYOJgB0_895j4ocX-9gCxgLc90rLgOJHaNA" />
<img style="max-width:30%; float:right; margin-right:20%;" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSIkkJlwgDZDonmGAYOJgB0_895j4ocX-9gCxgLc90rLgOJHaNA" />
</div>
</div>
<div class="right-div">
<div id="div9">
<div class="text" style="/*margin-top:20px;*/ font-size:15px;">
CUSTOM ORDERS
</div>
<div class="number" style="/*margin-top:30px;*/">
<div id="text-2-2" class="text" style="font-family:'Microsoft JhengHei';">
20140912
</div>
<div class="line">
</div>
<div id="text-3-2" class="text" style="font-family:'Microsoft JhengHei';">
A140912001
</div>
<div class="big-div">
<div class="button">
<div class="title-1">
經銷商資訊
</div>
</div>
<div class="label">
<div class="label1">
<div id="big-text" style="width:100%; margin-top:25px;">
<div class="txt-left" style="float:left;">
門市名稱
</div>
<div class="txt-right">
神腦西門武昌店
</div>
</div>
<div style="clear:both;"></div>
<div class="line2">
</div>
</div>
<div class="label2">
<div id="big-text-2" style="width:100%; margin-top:25px;">
<div class="txt-left" style="float:left;">
聯絡電話
</div>
<div class="txt-right">
02-23610707
</div>
</div>
<div style="clear:both;"></div>
<div class="line2">
</div>
</div>
<div class="label3">
<div id="big-text-3" style="width:100%; margin-top:25px;">
<div class="txt-left" style="float:left;">
聯絡地址
</div>
<div class="txt-right">
台北市萬華區武昌街2段58號
</div>
</div>
<div style="clear:both;"></div>
<div class="line2">
</div>
</div>
</div>
<div class="sign">
<div class="img-f">
<img src="img2.png" style="width:40%;" />
</div>
<div class="sign-r">
<div class="text-7">經辦人確認 \/</div>
<div class="line3"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="clear:both;"></div>
<div class="footer">
<div class="left-footer">
- 客戶存聯 - 訂做商品下單後約30 天交件
</div>
<div class="copy-text">
COPYRIGHT 2014 PTOW KING CO. LTD ALL RIGHTS RESEARVED
</div>
</div>
</body>
</html>
Please check all
it is displaying like that because a web view of x-code is much smaller than a computers screen so to substitute it formats and registers it and makes it into 2-pages, there is nothing weird about it its just the way it is.