second word row beneath another row - html

I need two rows of 4 words, in total 8 words, like this
I currently have my words like this
How can I make the words egg, beak, tea and milk go in a row beneath; Cat spoon meal and passport. like that?
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;
}
.word2, .word2 .tekst, .word2 p {
}
.tekst {
padding: 4.5%;
}
footer {
border-top: thick solid grey;
height: 5%;
}
.points {
float: right;
}
.container {
width: 100%;
height: 90%;
}
.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="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 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>
<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>


if you want to keep you html structure you can use this example:
.answers .word, .answers .word2{
float: left;
padding: 3px;
width: 100px;
}
.answers .word2:nth-child(5){
clear:left;
color: red;
}
<div class="answers">
<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 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>
Notice that I colored with red your fifth element that breaks content in new row.
But I suggest you to wrap you row content in single container cause it's more maintainable and readable.
See the snippet below.
.my-row{
clear: both;
}
.answers .word, .answers .word2{
float: left;
padding: 3px;
width: 100px;
}
<div class="answers">
<div class="my-row"> <!-- ADDED WORD CONTAINER -->
<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"> <!-- ADDED WORD CONTAINER -->
<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>

Related

I have multiple blocks in design need to write the html code for that with the help divs

I am using this code to develop HTML code for the image below, but I am overlapping the divs, and stuck with code. I need to develop the solution with the help of divs in HTML.
<div style="width:80%; height: 80px;padding-right:110px;margin-right:40px">
<div style="width:26%; float: left;float:left">
<div class="pointer-blue-small1">Steps & User Requirements Definition</div>
</div>
<div style="width:15%; float: left;">
<div class="pointer-blue-small1">High Level Design</div>
</div>
</div>
<div style="background:rgb(93,188,210);width:500px;height:110px;color:white;line-height:1.2;padding:10px;margin: 5px;">
<div>
<div style="background:rgb(143,63,123);width:390px; height:40px;color:white;text-align:center;line-height:1.2;float:left;padding-left:50px;margin-left:100px">A1901 Integrated Planning</div>
</div>
<br />
<br />
<br />
<div>
<div class="pointer-purple-small" style="width:374px;height:40px;color:white;text-align:center;float:left;padding-left:50px;margin-left:100px;line-height:1.2;display:inline-block">A1102 Update Project Plan</div>
</div>
</div>
<div style="background:rgb(93,188,210);width:500px;height:60px;color:white;line-height:1.2;padding:10px;margin: 15px;display:inline-block;margin-left:6px">
<div style="background:rgb(143,63,123);width:390px; height:40px;color:white;text-align:center;line-height:1.2;float:left;padding-left:50px;margin-left:100px">A1919 Change Request Control & Monitor and Report Risks and Issues</div>
</div>
<div style="background:rgb(93,188,210);width:500px;height:175px; color:white;line-height:1.2;padding:10px;margin: 5px;" ;display: inline-block;margin-left:35px">
<div>
<div style="background:rgb(143,63,123);width:390px; height:40px;color:white;text-align:center;line-height:1.2;float:left;padding-left:50px;margin-left:100px">A1105 Quality Assurance </div>
</div>
<br />
<br />
<br />
<div>
<div style="background:rgb(143,63,123);width:390px;height:40px;color:white;text-align:center;float:left;padding-left:50px;margin-left:100px;line-height:1.2;display:inline-block">A1922 StackHolder Management</div>
</div>
<br />
<br />
<br />
<div>
<div class="pointer-purple-small" style="width:374px;height:40px;color:white;text-align:center;flo[![enter image description here][1]][1]at:left;padding-left:50px;margin-left:100px;line-height:1.2;display:inline-block">A1104 Update Quality Plan</div>
</div>
</div>
</div>

.left-parent div {
width: 40%;
height: 50px;
}
.row {
justify-content: space-between;
}
.left-parent {
justify-content: space-between;
}
.border {
border: 1px solid;
}
.flex {
display: flex
}
.left,
.right {
width: 50%;
margin: 10px
}
.child {
height: 50px;
margin-top: 20px;
}
<div class="row flex ">
<div class="left">
<div class="flex left-parent">
<div class="border left-parent-child">
</div>
<div class="border left-parent-child">
</div>
</div>
<div class="border child">
</div>
<div class="border child">
</div>
<div class="border child">
</div>
</div>
<div class="right border">
</div>
</div>

How do I align divs in simple HTML page

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; }

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.

IE7 margin issue

and thanks for the help.
I am having a somewhat confusing issue with IE7 when using margins.
I have a contaner, and inside that container I have some floated boxes.
These boxes have margins applied, top, right, left, bottom, except the first box that has no margin on the left, and the last box that has no margin on the right.
Looks fine in all browsers except IE7, where the margin is not applying for the first element in each row (at least this is what I think is happening.
If I remove margin right in ie7 using the dev tools and then check it back on it displays correctly.
Has anyone seen anything like this before?
I am stumped.
EDIT
It appears to being caused by position:relative on the container divs. Changing this back to static fixes the margin issue, but now means my divs are mis aligned in ie7. Does anyone know why position relative would screw up margins??
NEW EDIT
Example download can be found here:
www.jimplode.co.uk/content/stackoverflow.zip
Incorrect view
Correct Margins, after unchecking and rechecking just one of the margin styles.
The HTML:
<div class="lowerContent">
<div class="mediumContentBox contentBoxMarginTop contentBoxMarginRight contentBoxMarginBottom">
<div class="expandableBox">
<div class="topLeft">
<div class="topRight">
<div class="top"></div>
</div>
</div>
<div class="middleLeft">
<div class="middleRight">
<div class="middle">
<img src="/images/frame/transparent.gif" alt="spacer"width="0" height="215" class="fl" />
<div class="textContainer">
<h1>Car Insurance</h1>
<ul>
<li>Protected NCD for life</li>
<li>NCD Accelerator</li>
<li>European Cover Included</li>
<li>Multiple Drivers and Vehicles</li>
<li>Breakdown Cover Included</li>
<li>Legal Cover Included</li>
</ul>
<div class="boxButtons">
<a class="smallButtonLeft" href="#"><span>GET A QUOTE</span></a><a class="smallButtonRight" href="#"><span>FIND OUT MORE</span></a>
</div>
</div>
<div class="imageContainer">
<img src="/images/misc/boxphoto_1.jpg" alt="box image 0" />
</div>
<div class="emptyClear"></div>
</div>
</div>
</div>
<div class="bottomLeft">
<div class="bottomRight">
<div class="bottom">
</div>
</div>
</div>
</div>
</div>
<div class="smallContentBox contentBoxMarginTop contentBoxMarginLeft contentBoxMarginRight contentBoxMarginBottom">
<div class="expandableBox">
<div class="topLeft">
<div class="topRight">
<div class="top"></div>
</div>
</div>
<div class="middleLeft">
<div class="middleRight">
<div class="middle">
<img src="/images/frame/transparent.gif" alt="spacer"width="0" height="215" class="fl" />
<div class="textContainer">
<h2>Home Insurance</h2>
<div class="imageContainer">
<img src="/images/misc/boxphoto_2.jpg" alt="box image 2" />
</div>
<ul>
<li>Working at home Equipment</li>
<li>Helmet and Leathers</li>
<li>Legal Cover</li>
<li>Caravan Cover</li>
<li>Personal Accident Cover</li>
</ul>
<div class="boxButtons">
<a class="smallButtonLeft" href="#"><span>GET A QUOTE</span></a><a class="smallButtonRight" href="#"><span>FIND OUT MORE</span></a>
</div>
</div>
<div class="emptyClear"></div>
</div>
</div>
</div>
<div class="bottomLeft">
<div class="bottomRight">
<div class="bottom">
</div>
</div>
</div>
</div>
</div>
<div class="smallContentBox contentBoxMarginTop contentBoxMarginLeft contentBoxMarginBottom">
<div class="expandableBox">
<div class="topLeft">
<div class="topRight">
<div class="top"></div>
</div>
</div>
<div class="middleLeft">
<div class="middleRight">
<div class="middle">
<img src="/images/frame/transparent.gif" alt="spacer"width="0" height="215" class="fl" />
<div class="textContainer">
<h2>Life Insurance</h2>
<div class="imageContainer">
<img src="/images/misc/boxphoto_3.jpg" alt="box image 3" />
</div>
<ul>
<li>Cover From £5 a month</li>
<li>Your loved ones protected</li>
<li>Immediate cover available</li>
<li>We search, you save</li>
</ul>
<div class="boxButtons">
<a class="smallButtonLeft" href="#"><span>GET A QUOTE</span></a><a class="smallButtonRight" href="#"><span>FIND OUT MORE</span></a>
</div>
</div>
<div class="emptyClear"></div>
</div>
</div>
</div>
<div class="bottomLeft">
<div class="bottomRight">
<div class="bottom">
</div>
</div>
</div>
</div>
</div>
<div class="emptyClear"></div>
<div class="smallContentBox contentBoxMarginTop contentBoxMarginRight">
<div class="expandableBox">
<div class="topLeft">
<div class="topRight">
<div class="top"></div>
</div>
</div>
<div class="middleLeft">
<div class="middleRight">
<div class="middle">
<img src="/images/frame/transparent.gif" alt="spacer"width="0" height="140" class="fl" />
<div class="imageContainerAlternate">
<img src="/images/misc/boxphoto_4.jpg" alt="box image 4" />
</div>
<div class="boxButtons">
<a class="smallButtonLeft" href="#"><span>GET A QUOTE</span></a><a class="smallButtonRight" href="#"><span>FIND OUT MORE</span></a>
</div>
<div class="emptyClear"></div>
</div>
</div>
</div>
<div class="bottomLeft">
<div class="bottomRight">
<div class="bottom">
</div>
</div>
</div>
</div>
</div>
<div class="smallContentBox contentBoxMarginTop contentBoxMarginRight contentBoxMarginLeft">
<div class="expandableBox">
<div class="topLeft">
<div class="topRight">
<div class="top"></div>
</div>
</div>
<div class="middleLeft">
<div class="middleRight">
<div class="middle">
<img src="/images/frame/transparent.gif" alt="spacer"width="0" height="140" class="fl" />
<div class="imageContainerAlternate">
<img src="/images/misc/boxphoto_5.jpg" alt="box image 5" />
</div>
<div class="boxButtons">
<a class="smallButtonLeft" href="#"><span>GET A QUOTE</span></a><a class="smallButtonRight" href="#"><span>FIND OUT MORE</span></a>
</div>
<div class="emptyClear"></div>
</div>
</div>
</div>
<div class="bottomLeft">
<div class="bottomRight">
<div class="bottom">
</div>
</div>
</div>
</div>
</div>
<div class="smallContentBox contentBoxMarginTop contentBoxMarginRight contentBoxMarginLeft">
<div class="expandableBox">
<div class="topLeft">
<div class="topRight">
<div class="top"></div>
</div>
</div>
<div class="middleLeft">
<div class="middleRight">
<div class="middle">
<img src="/images/frame/transparent.gif" alt="spacer"width="0" height="140" class="fl" />
<div class="imageContainerAlternate">
<img src="/images/misc/boxphoto_6.jpg" alt="box image 6" />
</div>
<div class="boxButtons">
<a class="smallButtonLeft" href="#"><span>GET A QUOTE</span></a><a class="smallButtonRight" href="#"><span>FIND OUT MORE</span></a>
</div>
<div class="emptyClear"></div>
</div>
</div>
</div>
<div class="bottomLeft">
<div class="bottomRight">
<div class="bottom">
</div>
</div>
</div>
</div>
</div>
<div class="smallContentBox contentBoxMarginTop contentBoxMarginLeft">
<div class="expandableBox">
<div class="topLeft">
<div class="topRight">
<div class="top"></div>
</div>
</div>
<div class="middleLeft">
<div class="middleRight">
<div class="middle">
<img src="/images/frame/transparent.gif" alt="spacer"width="0" height="140" class="fl" />
<div class="imageContainerAlternate">
<img src="/images/misc/boxphoto_7.jpg" alt="box image 7" />
</div>
<div class="boxButtons">
<a class="smallButtonLeft" href="#"><span>GET A QUOTE</span></a><a class="smallButtonRight" href="#"><span>FIND OUT MORE</span></a>
</div>
<div class="emptyClear"></div>
</div>
</div>
</div>
<div class="bottomLeft">
<div class="bottomRight">
<div class="bottom">
</div>
</div>
</div>
</div>
</div>
<div class="emptyClear"></div>
</div>
The CSS:
.lowerContent
{
position:relative;
margin:0px 0px 0px 0px;
}
.expandableBox
{
display:block;
width:100%;
}
.expandableBox .top
{
background-image:url("/images/backgrounds/bkg_whitebox_t.png");
background-repeat: repeat-x;
height:10px;
}
.expandableBox .topLeft
{
height:10px;
padding:0px 0px 0px 10px;
background-image:url("/images/backgrounds/bkg_whitebox_tl.png");
background-repeat: no-repeat;
background-position:left top;
}
.expandableBox .topRight
{
height:10px;
padding:0px 10px 0px 0px;
background-image:url("/images/backgrounds/bkg_whitebox_tr.png");
background-repeat: no-repeat;
background-position:right top;
}
.expandableBox .middleLeft
{
padding:0px 0px 0px 10px;
background-image:url("/images/backgrounds/bkg_whitebox_l.png");
background-repeat: repeat-y;
background-position:left top;
}
.expandableBox .middle
{
background-color:#FFFFFF;
}
.expandableBox .middleRight
{
padding:0px 10px 0px 0px;
background-image:url("/images/backgrounds/bkg_whitebox_r.png");
background-repeat: repeat-y;
background-position:right top;
}
.expandableBox .bottom
{
background-image:url("/images/backgrounds/bkg_whitebox_b.png");
background-repeat: repeat-x;
background-position:bottom;
height:10px;
margin-bottom:7px;
}
.expandableBox .bottomLeft
{
height:10px;
padding:0px 0px 0px 10px;
background-image:url("/images/backgrounds/bkg_whitebox_bl.png");
background-repeat: no-repeat;
background-position:left bottom;
}
.expandableBox .bottomRight
{
height:10px;
padding:0px 10px 0px 0px;
background-image:url("/images/backgrounds/bkg_whitebox_br.png");
background-repeat: no-repeat;
background-position:right bottom;
}
.contentBoxMarginLeft
{
margin-left:10px;
}
.contentBoxMarginRight
{
margin-right:10px;
}
.contentBoxMarginTop
{
margin-top:10px;
}
.contentBoxMarginBottom
{
margin-bottom:10px;
}
.fullContentBox
{
width:940px;
float:left;
}
.largeContentBox
{
width:700px;
float:left;
}
.mediumContentBox
{
width:460px;
float:left;
}
.smallContentBox
{
width:220px;
float:left;
}
.mediumContentBox .textContainer
{
float:left;
width:210px;
}
.mediumContentBox .imageContainer
{
float:right;
width:210px;
}
.smallContentBox .textContainer
{
}
.smallContentBox .textContainer .imageContainer
{
float:right;
padding:5px 0px 0px 0px;
}
.smallContentBox .imageContainerAlternate
{
float:left;
padding:0px 0px 0px 0px;
}
a.smallButtonLeft,
a.smallButtonRight
{
display:inline-block;
background-image:url('/images/backgrounds/bkg_sprites_buttons.png');
height:30px;
background-position:left top;
background-repeat:no-repeat;
padding:0px 10px;
line-height:23px;
color: #0F4DBC;
font-family: Arial,Helvetica,sans-serif;
font-weight: bold;
text-decoration: none;
text-transform: capitalize;
}
a.smallButtonLeft:hover
{
background-position:left -44px;
}
a.smallButtonRight
{
background-position:right -217px;
color: #4D4F52;
}
a.smallButtonRight:hover
{
background-position:right -262px;
}
.boxButtons
{
float:left;
padding:10px 0px 0px 0px;
}
.smallContentBox .boxButtons
{
width:200px;
text-align:center;
}
Thanks in advance.

Could be something to do with margins collapsing. I would tempted to only have the margin on the left, then margin-left:0 on the first one.
Alternatively, try our old friend "zoom:1" on the floated divs or the parent container. Often fixes a lot of the more obscure IE weirdness.