I created my first email template (exercise). In the beginning I did it without tables, but later I converted it to tables. Now I have a mess; I'd like to center all text and the header, but I don't know how. I've used table-align but it did not work.
Code before (divs):
https://jsbin.com/pusokiyido/edit?html%2Coutput
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>emailer</title>
<meta name="description" content="Interaktywny poradnik szybkiego startu dla Brackets.">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
html, body {
/*font-size: calc 8px + (16 -8) * ((100vw - 200px) / (1200 - 200))); */
color:white;
}
}
.emailer-background {
background:#eee;
}
.emial-container {
max-width: 700px;
background: #fff;
font-family: sans-serif;
text-align: center;
margin: 0 auto;
display:block;
overflow: hidden;
border-radius: 5px;
margin-bottom:30px;
}
.text{
font-size: 0,6em;
margin-left: 5px;
margin-right:5px;
padding-left:5px;
padding-right:5px;
padding-top:20px;
color:white !important;
}
.center{
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.content {
background-image: url("img/bg.jpg");
background-color: #793985;
background-repeat: no-repeat;
background-size: cover;
}
.slogan h1 {
font-size: 3vw;
color:white;
padding-right:10px;
padding-left:10px;
letter-spacing:-0.6pt;
line-height:/*44pt*/ 2,7vw; }
.separator {
background-color: rgba(154, 207, 141, 0.1);
background: rgba(154, 207, 141, 0.1);
}
/*.separator h1, h2, h3 {
color:white !important; */
}
.separator h2 {
font-size:1,5vw;
}
.column {
float: left;
width: 33.33%;
padding: 5px;
}
img {
max-width:100%;
}
.flexcontainer {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
align-items: center;
justify-content: space-around;
padding-top:10px;
}
.qr, .logo {
padding-right:10px;
padding left:10px;
min-width:45px;
}
.logo {
max-width:80px;
min-width:45px;
}
.link {
letter-spacing:10pt;
font-size:16px !important;
padding-top:15px;
padding-bottom:15px;
}
.koperta li:before{
content: “\f13d”;
font-family: “FontAwesome”;
width: 10px;
height: 10px;
margin-right: 5px;
}
</style>
</head>
<body>
<div class="emailer-background">
<div class="emial-container">
<div class="content">
<div class="separator">
<img src="img/heder.jpg" alt="header image">
<div class="text"><b>usługi fotograficzne</b>: wywoływanie fotografii z każdego typu nośnika i klisz, renowacja,
retusz zdjęć, fotografia okolicznosciowa, sesje fotograficzne studyjne i plenerowe, fotografia
reklamowa i katalogowa, akcesoria foto, <br>ramki, albumy, kubki, koszulki, poduszki z Twoim projektem</p>
<p><b>usługi poligraficzne:</b> ksero, bindowanie, drukowanie, skanowanie. </div>
</div><!--separator end-->
<div class="slogan">
<h1>Zamrażanie chwil
<br>i malowanie światłem <br>
to sztuka ! </h1>
</div>
<div class="slogan2">
<div class="separator">
<h2>Chcesz zobaczyć jak to działa?<br>
Przyjdź, przyjmiemy Cię z radością ! </h2>
</div>
</div><!--slogan 2 end-->
<div class="flexcontainer">
<div class="qr">
<img src="img/qr.svg">
</div>
<div class="logo">
<img src="img/logo.svg">
</div>
<div class="qr">
</div>
<div>
<ul class="fa-ul">
<li class="koperta"> Email: <br>zorza.studio#gmail.com</li>
<li>Tel. <b>697 625 645</b></li>
</ul>
</div>
</div><!--- felx end-->
<div class="separator">
<h2 class="link">facebook.com/zorza.studio</h2>
</div>
</div><!--content end-->
</div><!--container end-->
</div><!--background end-->
</html>
After (tables)
https://jsbin.com/muzokadutu/edit?html,output
text-align:left/rignt/center !important ;
try this.
Remove text-align: center; in .emial-container.
Related
I would like to get this result below:
Example
My problem is that, I don't understand why my blocks are not centered correctly even with the propriety display: inline-block in my selector homebotblock1?
I tried this:
*{
margin:0;
padding:0;
}
.homebot{
background:url('https://zupimages.net/up/20/21/9zj3.jpg') no-repeat center;
background-size:cover;
background-attachment:fixed;
min-height:500px;
display:inline-block
width:100%;
}
.homebotbg{
background-color:rgba(255,255,255,0.7);
min-height:500px;
display:block;
width:43%;
float:right;
padding:100px 50px 50px 30px;
text-shadow:#fff 1px 1px 0px;
text-align:left;
}
.homebottit{
font-size:24pt;
font-family:roboto;color:#c22312;
text-transform:uppercase;
margin-bottom:50px;
display:inline-block;
}
.homebotpad{
padding-left:10px;
}
.homebottxt1{
font-size:16pt;
font-family:roboto;
color:#000;
}
.homebottxt2{
font-size:10pt;
font-family:open sans2;
color:#000;
}
.homebotblock1{
width:80px;
display:inline-block;
}
.homebotblock2{
width:450px;
display:inline-block;
}
<!Doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Titre de la page</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="homebot">
<div class="homebotbg">
<span class="homebottit">Security Investment Solutions</span>
<img class="homebotblock1" src="https://zupimages.net/up/20/21/yljn.png" alt="img" />
<div class="homebottxt1">ADVANTAGEOUS CONDITIONS</div>
<div class="homebottxt2">We use your money to make a source of long-term profit. At the same time you become both our client and a shareholder.</div>
</div>
</div>
</body>
</html>
You need to wrap the homebottxt1 and homebottxt2 text in its own <div> then wrap that <div> and the image in another <div> with the class homebotblock3.
Then add this CSS:
.homebotblock3 {
display: flex;
}
.homebotblock3 > div {
margin-left: 20px;
}
Modified Code
JSFiddle: https://jsfiddle.net/Zeraora/gefhov6b/
* {
margin: 0;
padding: 0;
}
.homebot {
background: url('https://zupimages.net/up/20/21/9zj3.jpg') no-repeat center;
background-size: cover;
background-attachment: fixed;
min-height: 500px;
display: inline-block width:100%;
}
.homebotbg {
background-color: rgba(255, 255, 255, 0.7);
min-height: 500px;
display: block;
width: 43%;
float: right;
padding: 100px 50px 50px 30px;
text-shadow: #fff 1px 1px 0px;
text-align: left;
}
.homebottit {
font-size: 24pt;
font-family: roboto;
color: #c22312;
text-transform: uppercase;
margin-bottom: 50px;
display: inline-block;
}
.homebotpad {
padding-left: 10px;
}
.homebottxt1 {
font-size: 16pt;
font-family: roboto;
color: #000;
}
.homebottxt2 {
font-size: 10pt;
font-family: open sans2;
color: #000;
}
.homebotblock1 {
width: 80px;
display: inline-block;
}
.homebotblock2 {
width: 450px;
display: inline-block;
}
.homebotblock3 {
display: flex;
}
.homebotblock3>div {
margin-left: 20px;
}
<!Doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Titre de la page</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="homebot">
<div class="homebotbg">
<span class="homebottit">Security Investment Solutions</span>
<div class="homebotblock3">
<img class="homebotblock1" src="https://zupimages.net/up/20/21/yljn.png" alt="img" />
<div>
<div class="homebottxt1">ADVANTAGEOUS CONDITIONS</div>
<div class="homebottxt2">We use your money to make a source of long-term profit. At the same time you become both our client and a shareholder.</div>
</div>
</div>
</div>
</div>
</body>
</html>
* {
box-sizing: border-box;
}
p {
margin: 0;
padding: 0;
}
.homebot{
background: url('https://zupimages.net/up/20/21/9zj3.jpg');
background-size: 100% auto;
background-position-x: center;
background-position-y: -100px;
height: 25vw;
display: block;
position: relative;
}
.homebotbg {
position: relative;
left: 40%;
width: 60%;
height: 100%;
background-color: rgba(255, 255, 255, .7);
padding: 10px 30px;
display: flex;
flex-direction: column;
align-content: flex-end;
}
.homebot-header {
flex-basis: 50%;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.homebottit {
color: red;
font-size: 24px;
}
.homebot-footer {
flex-basis: 50%;
display: flex;
align-items: center;
}
.homebotblock1 {
margin-right: 15px;
}
.homebottxt1 {
font-size: 18px;
margin-bottom: 5px;
}
<!Doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Titre de la page</title>
</head>
<body>
<div class="homebot">
<div class="homebotbg">
<div class="homebot-header">
<p class="homebottit">Security Investment Solutions</p>
</div>
<div class="homebot-footer">
<img class="homebotblock1" src="https://zupimages.net/up/20/21/yljn.png" alt="img" />
<div class="homebot-footer-right">
<p class="homebottxt1">ADVANTAGEOUS CONDITIONS</p>
<p class="homebottxt2">We use your money to make a source of long-term profit. At the same time you become both our client and a shareholder.</p>
</div>
</div>
</div>
</div>
</body>
</html>
You can design like this.
The key point here is to use flex layout.
Using flex layout by display: flex, you can make this structure easily.
Since you are applying inline-block to the image separately, it is not horizontally aligning the image to any other element in the page.
To achieve your result, you will need to create a div structure that suits your needs and then apply your property.
Also, use flex instead of inline-block, it's much powerful. I have modified your code to achieve your result.
P.S. Kindly add in a padding as per your need. Since it is not the objective of the question, I have not included it in my answer.
*{
margin:0;
padding:0;
}
.homebot{
background:url('https://zupimages.net/up/20/21/9zj3.jpg') no-repeat center;
background-size:cover;
background-attachment:fixed;
min-height:500px;
display:inline-block
width:100%;
}
.homebotbg{
background-color:rgba(255,255,255,0.7);
min-height:500px;
display:block;
width:43%;
float:right;
padding:100px 50px 50px 30px;
text-shadow:#fff 1px 1px 0px;
text-align:left;
}
.homebottit{
font-size:24pt;
font-family:roboto;color:#c22312;
text-transform:uppercase;
margin-bottom:50px;
display:inline-block;
}
.homebotpad{
padding-left:10px;
}
.homebottxt1{
font-size:16pt;
font-family:roboto;
color:#000;
}
.homebottxt2{
font-size:10pt;
font-family:open sans2;
color:#000;
}
.block{
display: flex;
}
.homebotblock1{
width:80px;
display:inline-block;
}
.homebotblock2{
width:450px;
display:inline-block;
}
<!Doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Titre de la page</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="homebot">
<div class="homebotbg">
<span class="homebottit">Security Investment Solutions</span>
<div class="block">
<img class="homebotblock1" src="https://zupimages.net/up/20/21/yljn.png" alt="img" />
<div>
<div class="homebottxt1">ADVANTAGEOUS CONDITIONS</div>
<div class="homebottxt2">We use your money to make a source of long-term profit. At the same time you become both our client and a shareholder.</div>
</div>
</div>
</div>
</div>
</body>
</html>
So essentially I am writing a game in javascript. I have a canvas on the left, a canvas in the middle, a textarea topright, and a canvas bottom right. But I can't seem to get the right CSS code to figure out this layout like the picture. I want the middle to take up about 50-60% of the middle of the page, and the left and right columns taking the rest of the space. Would be nice if it auto resized with browser window. Any help would be appreciated.
Set a container to hold all the elements and then make smaller containers inside. Target each with CSS and set its properties.
Here I set a general CSS class .generalStyles just to simplify the code.
You would use something like this: (run the snippet)
.generalStyles
{
position:relative;
float:left;
background-color:#000;
border-radius:4px;
box-sizing:border-box;
color:#f00;
height:100px;
padding:5px;
text-align:center;
}
.container
{
width:100%;
background-color:#FFF;
}
.leftPanel
{
width:24%;
margin:0 1% 0 0;
}
.rightPanel
{
width:24%;
margin:0 0 0 1%;
background-color:#FFF;
padding:0;
}
.middlePanel
{
width:50%;
margin:0;
}
.topPanel
{
width:100%;
margin:0;
height:49.5%;
}
.bottomPanel
{
width:100%;
margin:1% 0 0 0;
height:49.5%;
}
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<div class="container generalStyles">
<div class="leftPanel generalStyles">left stuff goes here<br/>and more here<br/>and more here<br/>and more here</div>
<div class="middlePanel generalStyles">middle goes here<br/>and more here<br/>and more here<br/>and more here</div>
<div class="rightPanel generalStyles">
<div class="topPanel generalStyles">top stuff<br/>and more here</div>
<div class="bottomPanel generalStyles">bottom stuff<br/>and more here</div>
</div>
</div>
</body>
</html>
* {
box-sizing: border-box;
}
body {
margin: 0;
}
h2 {
text-align:center;
font-family:arial;
color:red;
font-weight:normal;
}
.left {
background-color: #000;
border-radius:10px;
float: left;
width: 20%;
padding: 10px;
margin:10px;
height: 300px;
}
.middle {
background-color: #000;
border-radius:10px;
float: left;
width: 60%;
padding: 10px;
margin:10px;
height: 300px;
}
.right {
float: left;
width: 20%;
margin: 10px;
height: 300px;
position: relative;
top: 0;
}
.top {
background-color: #000;
border-radius:10px;
width: 100%;
height: 47%;
padding: 10px;
}
.bottom {
background-color: #000;
border-radius:10px;
width: 100%;
height: 47%;
padding: 10px;
position: absolute;
bottom: 0;
right: 0;
}
.row {
box-sizing:border-box;
display: flex;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
<div class="row">
<div class="left">
<h2>left</h2>
</div>
<div class="middle">
<h2>middle</h2>
</div>
<div class="right">
<div class="top">
<h2>top right</h2>
</div>
<div class="bottom">
<h2>bottom right</h2>
</div>
</div>
</div>
<div class="container">
<div class="left"></div>
<div class="middle"></div>
<div class="right">
<div class="rightDiv"></div>
<div class="rightDiv"></div>
</div>
</div
and css
.container{display:block;width:100%}.left,.middle,.right{width:100px;display:inline-block}.left{border:1px solid red;height:100px}.middle{border:1px solid green;height:100px}.rightDiv{border:1px solid #ff0;height:40px;margin:10px 0}
Fiddle
My background image cannot responsive, i try this code on my other page and it worked but when i apply this code. the background wont display in fullscreen if i minimize the screen.
Here's the the html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?
family=Cookie">
<link rel="stylesheet" href="assets/fonts/font-awesome.min.css">
<link rel="stylesheet" href="assets/fonts/material-icons.css">
<link rel="stylesheet" href="css/landing-page.css">
</head>
<body>
<!-- Navigation Bar -->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header"><a class="navbar-brand navbar-link"
href="#"><strong>Hello</strong>'s Builder</a>
<button class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#navcol-1"><span class="sr-only">Toggle navigation</span><span
class="icon-bar"></span><span class="icon-bar"></span><span class="icon-
bar"></span></button>
</div>
<div class="collapse navbar-collapse" id="navcol-1">
</div>
</div>
</nav>
<!-- End of Navigation -->
<div class="intro-header">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="intro-message">
<h2>Build Your Website</h2>
<hr class="intro-divider">
<ul class="list-inline intro-social-buttons">
<li>
Get Started
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- /.container -->
</div>
<!-- /.intro-header -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
and here's my css:
body,
html {
width: 100%;
height: 100%;
}
body,
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight: 700;
}
/* NAVIGATION BAR */
nav.navbar.navbar-inverse{
border-radius:0px;
}
.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav >
.active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus{
background-color:#dbe1f4;
}
.navbar-brand{
transform:translateX(-50%);
left:50%;
position:absolute;
}
/* INTRO */
.intro-header {
padding-top: 50px;
padding-bottom: 50px;
text-align: center;
color: #f8f8f8;
background: url(../image/intro-bg.jpg);
background-repeat:no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
background-position:center center;
background-attachment: fixed;
}
.intro-message {
position: relative;
padding-top: 20%;
padding-bottom: 20%;
}
.intro-message > h1 {
margin: 0;
text-shadow: 2px 2px 3px rgba(0,0,0,0.6);
font-size: 5em;
}
.intro-divider {
width: 400px;
border-top: 1px solid #f8f8f8;
border-bottom: 1px solid rgba(0,0,0,0.2);
}
.intro-message > h3 {
text-shadow: 2px 2px 3px rgba(0,0,0,0.6);
}
#media(max-width:500px) {
.intro-header{
background-size:cover;
min-width: 500px;
background-position:center center;
background-attachment: fixed;
}
.intro-message {
padding-bottom: 15%;
}
.intro-message > h1 {
font-size: 3em;
}
ul.intro-social-buttons > li {
display: block;
margin-bottom: 20px;
padding: 0;
}
ul.intro-social-buttons > li:last-child {
margin-bottom: 0;
}
.intro-divider {
width: 100%;
}
}
there's always white space underneath it. I dont know whats wrong cause it worked with my other background
Update 2:
Remove the min-width line and update to include max-width and background-size: contain, like this:
#media (max-width: 500px) {
.intro-header {
max-width: 500px;
background-size:contain;
}
}
Something really odd happens when I scale my website down to a mobile device. Everything but the images seems to be forced to the left, and can't cover the whole width. Why is this happening? / How can I fix it?\
* {
margin: 0;
padding: 0;
}
.entry-header {
display: none;
}
body {
overflow-x: hidden;
width: 100%;
}
:root {
background: #fff;
}
#logo {
display: block;
margin: auto;
width: 200px;
text-align: center;
}
nav ul {
display: flex;
justify-content: space-around;
list-style: none;
background: #38b449;
color: #fff;
font-size: 1.5rem;
font-family: 'Segoe UI', sans-serif;
}
li.selected {
color: #f05a2a;
}
nav ul li:hover {
color: springgreen;
cursor: pointer;
}
nav ul li.selected:hover {
color: #f07a2a;
}
main * {
margin: 20px auto;
}
#btns {
display: flex;
justify-content: space-around;
flex-direction: row;
}
#btns input {
width: 30%;
display: block;
padding: 10px;
background: springgreen;
border: none;
border-radius: 10px;
color: #fff;
font-size: 1.3rem;
font-weight: bold;
font-family: 'Verdana';
}
#btns input:hover {
background: #f05a2a;
cursor: pointer;
}
main p {
text-align: center;
max-width: 80%;
font-size: 1.5rem;
font-family: 'Segoe UI';
}
main {
width:100%;
}
main p:nth-of-type(4) {
font-weight: bold;
}
main hr {
width: 100%;
background: #0a0;
height: 1px;
}
.img-c {
width: 40%;
background-color: #000;
max-width: 200px;
min-width: 50px;
}
.container {
display: flex;
justify-content: space-between;
width: 200%;
}
main div {
display: flex;
justify-content: space-between;
}
main > div {
justify-content: flex-end;
width: 100%;
margin: auto;
}
#media screen and (max-width: 416px) {
.img-c {
width: 40%;
}
main > div {
display: flex;
flex-direction: column;
align-items: center;
}
}
#media screen and (max-width: 358px) {
nav ul {
flex-direction: column;
padding: 0;
}
nav ul li {
width: 100%;
text-align: center;
}
nav ul li:nth-child(2n) {
background: #0c0;
}
}
.entry-footer {
background: #efe;
}
article {
width:100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html lang="en-US" class="no-js gr__computerimmersion_com"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="http://www.computerimmersion.com/beta/xmlrpc.php">
<link rel="stylesheet" href="http://computerimmersion.com/beta/wp-content/themes/twentyfifteen/style.css">
<!--[if lt IE 9]>
<script src="http://www.computerimmersion.com/beta/wp-content/themes/twentyfifteen/js/html5.js"></script>
<![endif]-->
</head>
<body class="page page-id-165 page-template-default" data-gr-c-s-loaded="true">
<article id="post-165" class="post-165 page type-page status-publish hentry">
<header class="entry-header">
<h1 class="entry-title">beta-main</h1> </header><!-- .entry-header -->
<div class="entry-content">
<header>
<img src="http://www.computerimmersion.com/wp-content/uploads/2015/10/CompImmer_logo_final_web4.png" id="logo" alt="logo"><p></p>
<nav>
<ul>
<li class="selected">Home</li>
<li>About</li>
<li>Classes</li>
<li>Jobs</li>
</ul>
</nav>
</header>
<p></p><main><p></p>
<div id="btns">
<input type="button" id="open-contact" value="Contact"><br>
<input type="button" id="open-player" value="Media">
</div>
<div>
<div class="container">
<img src="http://www.computerimmersion.com/wp-content/uploads/2015/10/2.jpg" alt="img" class="img-c" style="height: 200px;"><br>
<img src="http://www.computerimmersion.com/wp-content/uploads/2015/10/5.jpg" alt="img" class="img-c" style="height: 200px; background: magenta;">
</div>
<div class="container">
<img src="http://www.computerimmersion.com/wp-content/uploads/2015/10/1.jpg" alt="img" class="img-c" style="height: 200px;"><br>
<img src="http://www.computerimmersion.com/wp-content/uploads/2015/10/4.jpg" alt="img" class="img-c" style="height: 200px; background: magenta;">
</div>
<p></p></div>
<p>Are you looking for computer classes that go beyond the typical summer camp or one-day experience?</p>
<p>Does your child have an interest in coding or computer hardware and want to learn what to do next?</p>
<p>Computer Immersion has the answer!</p>
<p>We teach computer science and tech culture to children who are 12-18 years old. Our classes immerse students in a wide range of hardware and software related topics such as scripting, coding, “tech speak”, networking, and hardware.</p>
<p>Our classes are taught by instructors with real world industry experience and meet for 9-week sessions at locations convenient for you.</p>
<p></p></main><br>
<script src="http://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script><br>
<script>
function setHeight() {
$('.img-c').css('height', $('.img-c').innerWidth());
}
setInterval(setHeight, 10);
</script><p></p>
</div><!-- .entry-content -->
</article><!-- #post-## -->
<footer id="colophon" class="site-footer" role="contentinfo">
<img class="icon" id="facebook" src="http://computerimmersion.com/beta/wp-content/facebook.png" alt="face">
<img class="icon" id="facebook" src="http://computerimmersion.com/beta/wp-content/facebook.png" alt="twitter">
<p id="copy">© 2016</p>
</footer><!-- .site-footer -->
</body><span class="gr__tooltip"><span class="gr__tooltip-content"></span><i class="gr__tooltip-logo"></i><span class="gr__triangle"></span></span></html>
The issue here is you need to change the flex alignment from row to column and the width of your container was at 200% which went past the screen.
* {
margin: 0;
padding: 0;
}
.entry-header {
display: none;
}
body {
overflow-x: hidden;
width: 100%;
}
:root {
background: #fff;
}
#logo {
display: block;
margin: auto;
width: 200px;
text-align: center;
}
nav ul {
display: flex;
justify-content: space-around;
list-style: none;
background: #38b449;
color: #fff;
font-size: 1.5rem;
font-family: 'Segoe UI', sans-serif;
}
li.selected {
color: #f05a2a;
}
nav ul li:hover {
color: springgreen;
cursor: pointer;
}
nav ul li.selected:hover {
color: #f07a2a;
}
main * {
margin: 20px auto;
}
#btns {
display: flex;
justify-content: space-around;
flex-direction: row;
}
#btns input {
width: 30%;
display: block;
padding: 10px;
background: springgreen;
border: none;
border-radius: 10px;
color: #fff;
font-size: 1.3rem;
font-weight: bold;
font-family: 'Verdana';
}
#btns input:hover {
background: #f05a2a;
cursor: pointer;
}
main p {
text-align: center;
max-width: 80%;
font-size: 1.5rem;
font-family: 'Segoe UI';
}
main {
width:100%;
}
main p:nth-of-type(4) {
font-weight: bold;
}
main hr {
width: 100%;
background: #0a0;
height: 1px;
}
.img-c {
width: 40%;
background-color: #000;
max-width: 200px;
min-width: 50px;
}
.container {
display: flex;
justify-content: space-between;
width: 200%;
}
main div {
display: flex;
justify-content: space-between;
}
main > div {
justify-content: flex-end;
width: 100%;
margin: auto;
}
#media screen and (max-width: 416px) {
.img-c {
width: 100%;
}
.container {
flex-direction: column;
width: 100% !important;
}
main > div {
display: flex;
flex-direction: column;
align-items: center;
}
}
#media screen and (max-width: 358px) {
nav ul {
flex-direction: column;
padding: 0;
}
nav ul li {
width: 100%;
text-align: center;
}
nav ul li:nth-child(2n) {
background: #0c0;
}
}
.entry-footer {
background: #efe;
}
article {
width:100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html lang="en-US" class="no-js gr__computerimmersion_com"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="http://www.computerimmersion.com/beta/xmlrpc.php">
<link rel="stylesheet" href="http://computerimmersion.com/beta/wp-content/themes/twentyfifteen/style.css">
<!--[if lt IE 9]>
<script src="http://www.computerimmersion.com/beta/wp-content/themes/twentyfifteen/js/html5.js"></script>
<![endif]-->
</head>
<body class="page page-id-165 page-template-default" data-gr-c-s-loaded="true">
<article id="post-165" class="post-165 page type-page status-publish hentry">
<header class="entry-header">
<h1 class="entry-title">beta-main</h1> </header><!-- .entry-header -->
<div class="entry-content">
<header>
<img src="http://www.computerimmersion.com/wp-content/uploads/2015/10/CompImmer_logo_final_web4.png" id="logo" alt="logo"><p></p>
<nav>
<ul>
<li class="selected">Home</li>
<li>About</li>
<li>Classes</li>
<li>Jobs</li>
</ul>
</nav>
</header>
<p></p><main><p></p>
<div id="btns">
<input type="button" id="open-contact" value="Contact"><br>
<input type="button" id="open-player" value="Media">
</div>
<div>
<div class="container">
<img src="http://www.computerimmersion.com/wp-content/uploads/2015/10/2.jpg" alt="img" class="img-c" style="height: 200px;"><br>
<img src="http://www.computerimmersion.com/wp-content/uploads/2015/10/5.jpg" alt="img" class="img-c" style="height: 200px; background: magenta;">
<img src="http://www.computerimmersion.com/wp-content/uploads/2015/10/1.jpg" alt="img" class="img-c" style="height: 200px;"><br>
<img src="http://www.computerimmersion.com/wp-content/uploads/2015/10/4.jpg" alt="img" class="img-c" style="height: 200px; background: magenta;">
</div>
<p></p></div>
<p>Are you looking for computer classes that go beyond the typical summer camp or one-day experience?</p>
<p>Does your child have an interest in coding or computer hardware and want to learn what to do next?</p>
<p>Computer Immersion has the answer!</p>
<p>We teach computer science and tech culture to children who are 12-18 years old. Our classes immerse students in a wide range of hardware and software related topics such as scripting, coding, “tech speak”, networking, and hardware.</p>
<p>Our classes are taught by instructors with real world industry experience and meet for 9-week sessions at locations convenient for you.</p>
<p></p></main><br>
<script src="http://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script><br>
<script>
function setHeight() {
$('.img-c').css('height', $('.img-c').innerWidth());
}
setInterval(setHeight, 10);
</script><p></p>
</div><!-- .entry-content -->
</article><!-- #post-## -->
<footer id="colophon" class="site-footer" role="contentinfo">
<img class="icon" id="facebook" src="http://computerimmersion.com/beta/wp-content/facebook.png" alt="face">
<img class="icon" id="facebook" src="http://computerimmersion.com/beta/wp-content/facebook.png" alt="twitter">
<p id="copy">© 2016</p>
</footer><!-- .site-footer -->
</body><span class="gr__tooltip"><span class="gr__tooltip-content"></span><i class="gr__tooltip-logo"></i><span class="gr__triangle"></span></span></html>
I have just copied the code for a Facebook Like box into a new site design I am building but when it loads it's not expanding the containing div.
Also I've noticed that it will disappear sometimes and the page needs to be refreshed to bring it back.
What is causing it not to expand the div. I thought it was to do with a float but can't see one that will affect it.
I've attached the xhtml/css
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#">
<head>
<title></title>
<link href="css/styles.css" rel="stylesheet" type="text/css" media="screen" />
<link href='http://fonts.googleapis.com/css?family=Anton|Oswald' rel='stylesheet' type='text/css'>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div class="body">
<div class="body_bottom">
<div class="body_top">
<div id="header">
<img src="images/banner.jpg" />
</div>
<div id="content">
</div>
<div id="sidebar">
<div class="sidebar_item">
<div class="sidebar_item_top"></div>
<div class="sidebar_item_pad">
<p>Get updates for our latest news, events and blogs.</p>
<form id="addressform" action="/" method="get">
<div class="textl1"><label id="namLbl" for="mlName">Name</label><input type="text" id="mlName" name="mlName" /></div>
<div class="textl1"><label id="emlLbl" for="mlEmail">Email</label><input type="text" id="mlEmail" name="mlEmail" /></div>
<div class="textr1"><input type="submit" id="mlbutton" name="mlbutton" value="" class="button-signup" /></div>
<p id="response" style="text-align: left"></p>
</form>
</div>
<div class="sidebar_item_bottom"></div>
</div>
<div class="sidebar_item">
<div class="sidebar_item_top"></div>
<div class="sidebar_item_pad">
<div id="fbook">
<div class="fb-like-box" data-href="https://www.facebook.com/FacebookDevelopers" data-width="292" data-show-faces="true" data-header="false" data-stream="false" data-show-border="false"></div>
<br style="clear:both">
</div>
<div id="fb-root"></div>
<script>
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "http://connect.facebook.net/en_GB/all.js#xfbml=1&appId=151487781542911";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
$(window).bind("load resize", function(){
var container_width = $('#fbook').width();
$('#fbook').html('<div class="fb-like-box" ' +
'data-href="https://www.facebook.com/adobegocreate"' +
' data-width="' + container_width + '" data-height="730" data-show-faces="true" ' +
'data-stream="false" data-header="false"></div>');
FB.XFBML.parse( );
});
</script>
</div>
<div class="sidebar_item_bottom"></div>
</div>
<div class="clearboth"></div>
</div>
</div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
and the css
body {
background: #f2f2f2;
}
#header {
}
#container {
width:1009px;
margin:20px auto;
}
#largeimage {
float:left;
width:943px;
margin: 10px 0 10px 8px;
}
#content {
float:left;
width:620px;
margin: 11px 19px 0 9px;
}
#sidebar {
float:left;
width:304px;
}
.clearboth {
clear:both;
}
#footer {
clear:both;
width: 962px;
height:208px;border-top:1px dotted #CCCCCC;padding:10px 0;background: #373737 url(../images/sniper_scope.jpg) no-repeat 15px 10px;
margin: 10px 22px;
}
.body {
background: url('../images/body_center.png') repeat-y;
width: 1009px;
}
.body_top {
background: url('../images/body_top.png') no-repeat;
width: 1009px;
padding: 0px 24px;
}
.body_bottom {
background: url('../images/body_bottom.png') no-repeat bottom;
width: 1009px;
}
.img_top {
background: url('../images/img_top.png') no-repeat;
height: 8px;
width: 943px;
}
.img_center {
background: url('../images/img_center.png') repeat-y;
width: 943px;
}
.img_pad {
margin: 2px 8px 2px;
}
.img_bottom {
background: url('../images/img_bottom.png') no-repeat;
height: 15px;
width: 943px;
}
#contentimg {
border: 1px solid #CECECE;
}
.content_item_top {
background: url('../images/content_item_top.jpg') no-repeat;
width: 623px;
}
.content_item {
width: 623px;
margin: 0 0 15px;
}
.content_item_main {
border: 1px solid #CECECE;
padding: 10px 22px;
}
.content_item_bottom {
background: url('../images/content_shadow.png') no-repeat;
height: 9px;
width: 623px;
}
.sidebar_item_top {
background: url('../images/sidebar_item_top.jpg') no-repeat;
height: 39px;
width: 304px;
}
.sidebar_item {
background: url('../images/sidebar_item_centre.jpg') repeat-y;
width: 304px;
margin: 0 0 15px;
}
.sidebar_item_pad {
margin: 5px 26px 12px;
}
.sidebar_item_bottom {
background: url('../images/sidebar_item_bottom.jpg') no-repeat;
height: 9px;
width: 304px;
}
ul.footerlist {
float:left;
list-style-type:none;
padding:20px 16px;
}
ul.footerlist li {
font-family: Verdana,Tahoma,Arial,Helvetica,sans-serif;
font-size:10px;
color: #373737;
}
#footer h5 {
font-size:120%;
color: #E5DFCA;
}
#footertop, #footerbottom {width:710px;float:right;}
#footerbottom p{font-size:11px;color:#f0f0f0;font-style:normal;font-weight:normal;margin:0;padding:0px;line-height:20px;text-align:left;}
#footertop a{color:#f0f0f0;text-decoration:none;}
#footertop a:hover{color:#c3c3c3;text-decoration:underline;}
h1, h2 {
margin:0;
/*font-family: 'Anton', sans-serif;*/
font-family: 'Oswald', sans-serif;
color: #1a1e1c;
}
p {
font-family: tahoma;
font-size: 10pt;
color: #424242;
line-height:20px;
}
#fbook {
}
Maybe try an overflow:auto on the container of the facebook embed? So put it on #fbook