I'm new to coding, this is my first week in my Fullstack course and we have some homework that I've been working on for a while now. I've managed to get my wireframe to look similar to the homework example (we're supposed to make it look the same) and I'm not sure where I'm going wrong with this html/css code.
Also, I'm not sure exactly how else to show what I am working on other than posting the majority of my css, so i apologize if I do this wrong.
:)
I've placed red borders around the content I'm attempting to align evenly on all sides. I've tried changing the padding, margins, float positions, width (all that I know that would adjust the box(es), but I still cannot seem to get the "aside" content to align with the rest of the wireframe objects.
`````HTML````
<header class="main-head">
<p>header</p>
</header>
<link rel="stylesheet" href="style.css">
<nav>nav</nav>
<div class="divCont">
<div class="aside1">
<aside>aside</aside>
</div>
<div>
<div>
<article class="sect1">section
<p class="art1">article</p>
<div class="inside1">
<h3>h1, h2, h3</h3>
</div>
<div class="paraCont">
<p class="para1">p</p>
</div>
</article>
</div>
</div>
</div>
<footer>footer</footer>
``` </div>
`````````external css```````````````````
body {
margin: auto;
width: 50%;
background-color: #777;
text-align: center;
}
div.layout {
width: 495px;
}
/* left section */
.sect1 {
padding: 2%;
width: 100%;
}
/* right section */
div.aside1 {
margin-left: 100px;
border: solid red;
padding: 2%;
color: #777;
width: 200px;
height: 165px;
float: right;
font-size: 18px;}
article {
color:#777;
font-size: 18px;
background-color: #ebebeb;
}
div.divCont {
border: solid red;
}
/* article box */
.art1 {
width: 60%;
color: #ebebeb;
background-color: #777;
}
/* h1,h2,h3 box */
.inside1 {
width: 60%;
color: #ebebeb;
background-color: #777;
}
/* para box */
p.para1 {
width: 60%;
color:#ebebeb;
background-color: #777;
}
body {
margin: auto;
width: 50%;
background-color: #777;
text-align: center;
}
div.layout {
width: 495px;
}
/* left section */
.sect1 {
padding: 2%;
width: 100%;
}
/* right section */
div.aside1 {
margin-left: 100px;
border: solid red;
padding: 2%;
color: #777;
width: 200px;
height: 165px;
float: right;
font-size: 18px;
}
article {
color: #777;
font-size: 18px;
background-color: #ebebeb;
}
div.divCont {
border: solid red;
}
/* article box */
.art1 {
width: 60%;
color: #ebebeb;
background-color: #777;
}
/* h1,h2,h3 box */
.inside1 {
width: 60%;
color: #ebebeb;
background-color: #777;
}
/* para box */
p.para1 {
width: 60%;
color: #ebebeb;
background-color: #777;
}
<div class="layout">
<header class="main-head">
<p>header</p>
</header>
<link rel="stylesheet" href="style.css">
<nav>nav</nav>
<div class="divCont">
<div class="aside1">
<aside>aside</aside>
</div>
<div>
<div>
<article class="sect1">section
<p class="art1">article</p>
<div class="inside1">
<h3>h1, h2, h3</h3>
</div>
<div class="paraCont">
<p class="para1">p</p>
</div>
</article>
</div>
</div>
</div>
<footer>footer</footer>
</div>
this is what I'm trying to do - https://gyazo.com/6f27f40e4f3e75831b5e4728387ea11f
this is what I've done so far - https://gyazo.com/79299a16a0eb2208db98519005b3bf9d
This is just a quick edit. Also your link tag should be above in tag
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
body {
margin: auto;
width: 50%;
background-color: #777;
text-align: center;
}
div {
border: 1px solid #000000;
}
.aside1 {
width: 49%;
float: left;
height: 165px;
}
.aside2 {
width: 49%;
float: right;
height: 165px;
}
article {
background-color:green;
padding: 20px;
margin: 5px
}
footer {
width: 100%;
}
</style>
</head>
<body>
<header class="main-head">
<p>header</p>
</header>
<nav>nav</nav>
<section class="divCont">
<div class="aside1">
<p>Section</p>
<article>
Article
<div style="background-color:white; margin: 5px;">
H1,h2,H3
</div>
<div style="background-color:yellow;margin: 5px; ">
p
</div>
</article>
</div>
<div class="aside2">
Aside
</div>
</section>
<footer> Footer </footer>
</body>
</html>
Related
So I am new to coding and stuff and I am wondering why there is a space of the body in between the divs in this fiddle?
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>title</title>
<link href="main.css" rel="stylesheet" type="text/css">
<meta charset="UTF-8">
</head>
<!-- body -->
<body>
<div class="top-navbar navbar" id="color-1">
About
Art
Home
</div>
<div class="image">
<img src="sgrumble.png" alt="sg-rumble" class="front-image">
</div>
<div class="top-bar-2 navbar" id="color-1">
Project
Champions
divname2
divname3
</div>
<div class="about-text" id="color-1">
<h4>title</h4>
<p>short info text about text text text text text text text text text</p>
</div>
<div class="collection art" id="project color-2">
<h3>text</h3>
<p>text.</p>
<div class="project-blue">
<img src="/asset/images/project-ashe256x256.png" class="project-ashe">
</div>
CSS:
body {
margin: 0;
padding: 0;
background-color: green;
}
#color-1 {
background-color: #d3d3d3;
}
#color-2 {
background-color: #fff;
}
.top-navbar {
width: 100%;
height: 50px;
}
.top-navbar a {
padding: 14px 16px;
text-align: center;
float: right;
display: block;
color: black;
text-decoration: none;
}
.top-navbar a:hover {
background-color: #8a8a8a;
}
.image {
width: 100%;
height: 491px;
background-color: red;
}
.top-bar-2 {
width: 100%;
height: 50px;
text-align: center;
}
.top-bar-2 a {
padding: 14px 16px;
text-align: center;
display: inline-block;
color: black;
text-decoration: none;
}
.top-bar-2 a:hover {
background-color: #8a8a8a;
}
.collection {
height: 300px;
width: 100%;
text-align: center;
background-color: blue
The green part which is the body is showing in between the second navbar and the two text divs. Anyone know whats wrong cause I can't find it.
The h4 and the p elements have a margin set. You can see that using the "inspect" option right clicking the element in the browser.
its good to use:
* {margin:0;padding:0;}
this will remove every space in your document.
note: in html, document itself have default space. so by above CSS you can remove them easily.
it is a good practice to use above CSS in your every stylesheet files.
This happens because you have not reset the default margins of header elements.
Reset defaults using
* {
margin: 0;
padding: 0;
box-sizing: border-box
}
At the top of your sheet.
* {
margin: 0;
padding: 0;
box-sizing: border-box
}
body {
margin: 0;
padding: 0;
background-color: green;
}
#color-1 {
background-color: #d3d3d3;
}
#color-2 {
background-color: #fff;
}
.top-navbar {
width: 100%;
height: 50px;
}
.top-navbar a {
padding: 14px 16px;
text-align: center;
float: right;
display: block;
color: black;
text-decoration: none;
}
.top-navbar a:hover {
background-color: #8a8a8a;
}
.image {
width: 100%;
height: 491px;
background-color: red;
}
.top-bar-2 {
width: 100%;
height: 50px;
text-align: center;
}
.top-bar-2 a {
padding: 14px 16px;
text-align: center;
display: inline-block;
color: black;
text-decoration: none;
}
.top-bar-2 a:hover {
background-color: #8a8a8a;
}
.collection {
height: 300px;
width: 100%;
text-align: center;
background-color: blue
<!DOCTYPE html>
<html lang="en">
<head>
<title>title</title>
<link href="main.css" rel="stylesheet" type="text/css">
<meta charset="UTF-8">
</head>
<!-- body -->
<body>
<div class="top-navbar navbar" id="color-1">
About
Art
Home
</div>
<div class="image">
<img src="sgrumble.png" alt="sg-rumble" class="front-image">
</div>
<div class="top-bar-2 navbar" id="color-1">
Project
Champions
divname2
divname3
</div>
<div class="about-text" id="color-1">
<h4>title</h4>
<p>short info text about text text text text text text text text text</p>
</div>
<div class="collection art" id="project color-2">
<h3>text</h3>
<p>text.</p>
<div class="project-blue">
<img src="/asset/images/project-ashe256x256.png" class="project-ashe">
</div>
Green is body color. Where is no element with background-color there is body color because nothing is overlapping it.
CSS boxmodel will be helpfull: https://www.w3schools.com/css/css_boxmodel.asp
Margin property is external part of an element.
Solved :
h3,h4,p{
margin:0;
}
body {
margin: 0;
padding: 0;
background-color: green;
}
#color-1 {
background-color: #d3d3d3;
}
#color-2 {
background-color: #fff;
}
.top-navbar {
width: 100%;
height: 50px;
}
.top-navbar a {
padding: 14px 16px;
text-align: center;
float: right;
display: block;
color: black;
text-decoration: none;
}
.top-navbar a:hover {
background-color: #8a8a8a;
}
.image {
width: 100%;
height: 491px;
background-color: red;
}
.top-bar-2 {
width: 100%;
height: 50px;
text-align: center;
}
.top-bar-2 a {
padding: 14px 16px;
text-align: center;
display: inline-block;
color: black;
text-decoration: none;
}
.top-bar-2 a:hover {
background-color: #8a8a8a;
}
.collection {
height: 300px;
width: 100%;
text-align: center;
background-color: blue
<!DOCTYPE html>
<html lang="en">
<head>
<title>title</title>
<link href="main.css" rel="stylesheet" type="text/css">
<meta charset="UTF-8">
</head>
<!-- body -->
<body>
<div class="top-navbar navbar" id="color-1">
About
Art
Home
</div>
<div class="image">
<img src="sgrumble.png" alt="sg-rumble" class="front-image">
</div>
<div class="top-bar-2 navbar" id="color-1">
Project
Champions
divname2
divname3
</div>
<div class="about-text" id="color-1">
<h4>title</h4>
<p>short info text about text text text text text text text text text</p>
</div>
<div class="collection art" id="project color-2">
<h3>text</h3>
<p>text.</p>
<div class="project-blue">
<img src="/asset/images/project-ashe256x256.png" class="project-ashe">
</div>
you can specify (add to existing) the following css and the spaces will be removed.
.about-text {
overflow: hidden;
}
.collection {
overflow: hidden;
}
So I have multiple divs. Like this:
<div id="LeftContent"></div>
<div id="RightContent"></div>
And so on. My goal is to create a centered div after all that. When I try to, I end up with the div being in the empty spaces between the 'left' and 'right' divs. An answer with some CSS code would be most appreciated.
HTML5:
<!doctype html>
<html>
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="css/style.css">
<head>
<meta charset="utf-8">
<title>OneClickLearn</title>
</head>
<body>
<aside>
<br>
<nav>
<ul>
<li>Home</li>
<hr>
<li>Learn HTML</li>
<li>Learn CSS</li>
<li>Learn the Basics of Web Design</li>
<hr class="nav">
<li>Learn PHP</li>
<li>Learn JAVASCRIPT</li>
</ul>
</nav>
</aside>
<a id="nav-toggle" href="#" class="position"><span></span></a>
<main>
<header>
<div href="#" class="container">
<h1 class="title">OneClickLearn</h1>
</div>
</header>
</main>
<div class="header">
<div class="content">
<h1 class="large">Welcome To OneClickLearn</h1>
<hr class="hr">
<h2>A website for web developers everywhere</h2>
</div>
</div>
<div class="left">
<h1>What you can do with us</h1>
<h3>OneClickLearn offers several web design courses, as well as tools like Cascading Style Sheet libraries, and special colors to use for your website! Unlike some other coding websites, OneClickLearn is absolutely free!</h3>
<a class="abutton"><button>Learn More</button></a>
</div>
<div>
<div class="right">
<h1>CSS Libraries</h1>
<h3>What's a CSS Library? Simple. This tool is made for web developers who are advanced in website functionality, but maybe not so great in what we would call, 'the pretties'. A CSS library is all the tools in design you need-- waiting for you on the web.</h3>
<a class="abutton"><button>Learn More</button></a>
<a class="abutton"><button class="buttonop">Get Ocelot.css</button></a>
</div>
</div>
<div class="left">
<h1>Courses</h1>
<h3>All our courses (so far!) are based off of web design. With these courses, you learn the basics of HTML5, CSS3, and more languages coming soon. Also, you can learn our Cascading Style Sheet libraries' functions. If you have any reccomendations, just email us down below</h3>
<a class="abutton"><button>Email Us</button></a>
<a class="abutton"><button class="buttonop">Learn More</button></a>
</div>
<div class="div">
<h1>Having trouble with your website?</h1>
<h3>We'll see what we can do.</h3>
<button class="abutton">Contact Us</button>
</div>
</body>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<script src="js/nav.js"></script>
</html>
CSS:
#import url('https://fonts.googleapis.com/css?family=Open+Sans');
.div {
clear: both;
margin: 0 auto;
height: 100px;
width: 600px;
text-align: center;
}
.greyback {
background-color: #4B4949;
}
.nav {
background-color: #bdc3c7;
}
.denied {
color: #bdc3c7;
}
.denied:hover {
cursor: not-allowed;
}
body {
size: 100%;
display: cover;
margin: 0;
padding: 0;
}
p a {
color: #27ae60;
text-decoration: none;
}
p a:hover {
color: #27ae60;
text-decoration: underline;
cursor: pointer;
}
.header {
color: white;
width: 100%;
height: 300px;
background-color: #2980b9;
}
.content {
margin-top: 70px;
padding-top: 60px;
text-align: center;
}
.large {
font-size: 40px;
}
.hr {
width: 100px;
}
.left {
margin: 20px;
float: left;
height: auto;
width: 50%;
color: #4B4949;
}
.right {
margin: 20px;
float: right;
height: auto;
width: 50%;
color: #4B4949;
}
a {
color: #2AABAD;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.side {
margin: 20px;
}
.img {
display: inline-block;
}
button {
background-color: #2980b9;
border: none;
border-radius: 5PX;
height: 40px;
width: auto;
color: white;
}
button:hover {
background-color: #3498db;
cursor: pointer;
}
.abutton {
color: none;
text-decoration: none;
}
.buttonop {
background-color: #3498db;
border: none;
border-radius: 5PX;
height: 40px;
width: auto;
color: white;
}
.buttonop:hover {
background-color: #2980b9;
cursor: pointer;
}
.main {
width: 100%;
text-align: center;
}
.main-content {
display: inline-block;
}
P.S. I am using float:left; and float:right; for the left and right divs :)
Thanks :) (If I need any elaboration please let me know)
I'm not 100% clear on what you are asking, but you could try something like the following:
Html
<div id="LeftContent"></div>
<div id="RightContent"></div>
<div id="CentredDiv"></div>
CSS
div {
border: 1px solid #f0f;
height: 50px;
box-sizing: border-box;
width: 400px;
}
#LeftContent,
#RightContent {
float: left;
}
#CentredDiv {
width: 800px;
clear: left;
}
Yeah, not totally sure what you want, but maybe something like this?
#CenteredContent {
clear: both;
margin: 0 auto;
height: 100px;
width: 100px;
background-color: red;
}
What I understand from your question is that you need a centered div. You can do this to achieve centered div.
HTML:
<div class="centered-div">
Some Content
</div>
CSS:
.centered-div {
width: 400px;
min-height: 400px;
margin: 0 auto;
clear: both;
}
I hope that helps :)
I am trying to make a header wider, so that it extends to both sides of the browser size. I have all of my content inside of a wrapper div that is set to 990px. My header is the part I want to be full width. I also am trying to make my header have a fixed position. But when i put the corrected position into the css for the header, the title and the navigation bar stack vertically and do not remain how I originally set them.
<body>
<div class="wrapper">
<header class="header">
<h1>Automotive Industries</h1>
<ul class="navbar">
<li id="contact" class="navlist">Contact</li>
<li class="navlist">Services</li>
<li class="navlist">About</li>
<li class="navlist">Home</li>
</ul>
</header>
<div class="main">
<p>Welcome to the #1 stop in automotive today</p>
<div class="article">
<img class="image" src="http://cdnedge.vinsolutions.com/dealerimages/Dealer%204697%20Images/content/car-tire-repair.jpg">
</div>
<div class="article">
<img class="image" src="http://www.lonniesautomachineshop.com/shopimg/Engines1.jpg">
</div>
<div class="article">
<img class="image" src="http://image.superstreetonline.com/f/features/modp-1011-castrol-syntec-top-car-challenge-nissan-gtr/29181584/eurp_1011_02_o+castrol_syntec_top_car_challenge+lift.jpg">
</div>
</div><!--end of main-->
<div class="main-two">
<p id="two-header">Schedule today for a free consultation</p>
<div class="article">
<img class="image" src="http://s3-media2.fl.yelpcdn.com/bphoto/YDLPwsEk_fMXIw9Xwu_8rw/ls.jpg">
</div>
<div class="article">
<img class="image" src="http://image.trucktrend.com/f/tech/1011tr_2004_gmc_sierra_buildup/28770854/1011tr_03+2004_GMC_sierra_buildup+factory_ring_and_pinion.jpg">
</div>
<div class="article">
<img class="image" src="http://aautomotivetx.com/wp-content/uploads/2013/04/Brakes.jpg">
</div>
</div><!--end of main-two-->
<div class="main-three">
<p id="two-header">Guranteed service for 30 days</p>
<div class="article">
<img class="image" src="http://bernalautobodyrepair.com/images/paint_booth.jpg">
</div>
<div class="article">
<img class="image" src="https://www.bkreader.com/wp-content/uploads/2015/06/welding-1.jpg">
</div>
<div class="article">
<img class="image" src="http://cdn.instructables.com/F4Q/QD4F/HHS9SLP0/F4QQD4FHHS9SLP0.LARGE.jpg">
</div>
</div><!--end of main-three-->
<footer class="footer">
<p class="copyright">Schedule now! Call today at (123)456-7890.</p>
<p class="copyright-two">Copyright © All Rights Reserved.</p>
<div class="social-icons">
<img src="http://www.voxlumiere.com/wp-content/uploads/2009/12/facebook-logo-resized-image-50x50.png"/>
<img src="http://www2.actionforchildren.org.uk/media/128162/twitter_50x50.jpg"/>
<img src="http://www.clickondetroit.com/image/view/-/21435108/highRes/1/-/ubsa5pz/-/50x50-Instagram-logo-png.png"/>
</div><!--end of social-icons-->
</footer>
</div><!--end of wrapper-->
* {
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-size: 62.5%;
font-family: arial, sans-serif;
color: black;
background-image: url("http://www.theonecar.com/wp-content/uploads/2014/02/car-shops-499.jpg"), url("http://i.ytimg.com/vi/1n5j3sy-Rok/maxresdefault.jpg");
background-repeat: no-repeat;
background-position: top, bottom;
}
.wrapper {
font-size: 1.6em;
margin: 0 auto;
width: 990px;
background-color: white;
/*padding: 2em;*/
}
header {
background-color: white;
height: 50px;
display: block;
width: 100%;
}
header h1 {
float: left;
padding: 5px;
color: rgb(95, 207, 128);
margin-top: 5px;
margin-left: 100px;
font-size: 1.8em;
}
.navlist a {
text-decoration: none;
color: black;
}
.navlist a:hover {
color: white;
background-color: rgb(95, 207, 128);
padding: 15px;
}
.navlist {
float: right;
display: inline-block;
text-align: center;
padding: 15px;
font-size: 1.2em;
}
.main {
min-height: 20px;
background-color: rgb(95, 207, 128);
display: block;
width: 100%;
}
.main p {
color: white;
font-size: 1.6em;
padding: 50px;
float: left;
width: 100%;
}
.article {
display: inline-block;
width: 33%;
padding: 63px;
}
.image {
min-width: 200px;
min-height: 200px;
max-width: 200px;
max-height: 200px;
}
.main-two {
background-color: #39ADD1;
display: block;
}
.main-two p {
color: white;
font-size: 1.6em;
padding: 50px;
text-align: right;
width: 100%;
}
.main-three {
min-height: 20px;
background-color: #f08c35;
display: block;
width: 100%;
}
.main-three p {
color: white;
font-size: 1.6em;
padding: 50px;
float: left;
width: 100%;
}
.article {
display: inline-block;
width: 33%;
padding: 63px;
}
.article {
display: inline-block;
width: 33%;
padding: 63px;
}
footer {
background-color: #294860;
}
.copyright {
text-align: center;
padding: 5px;
color: white;
font-size: 1.4em;
}
.copyright-two {
text-align: center;
padding: 5px;
color: white;
font-size: 1.4em;
}
.social-icons {
display: inline-block;
padding: 5px;
margin-left: 40.2%;
width: 100%;
}
.social-icons a {
margin-left: 5px;
header {
...
width: 100%;
min-width: 990px;
position: fixed;
left: 0;
}
Demo
You're seeing horizontal scrolling because the site loads in a frame. That shouldn't happen in a full browser window.
you header would need to be outside the wrapper since the wrapper is 990px wide.
make the header width 100% but it needs to either be on the root of the div structure or in another 100% width element.
Because it's inside you're <div class="wrapper"> It's not possible,
Move it above the wrapper and it should work.
<header class="header">
<h1>Automotive Industries</h1>
<ul class="navbar">
<li id="contact" class="navlist">Contact</li>
<li class="navlist">Services</li>
<li class="navlist">About</li>
<li class="navlist">Home</li>
</ul>
</header>
<div class="wrapper">
I am making myself a homepage for my browser, and I'm trying to put 3 images with captions evenly spaced in a divider. It seems to work but the border for the outmost divider does not cover the images. What do I do? Here is the code.
/* Body: */
body {
background-color: #CCCCCC;
}
/* Title: */
#title {
color: #00FFFD;
text-align: center;
font-size: 1000%;
}
/* Main Border: */
#outer_div {
width: 100%;
}
#inner_div {
width: 80%;
margin: auto;
border: 10px groove #000;
}
#main {
border: 40px solid transparent;
}
/* Link Dividers */
.link {
width: 33%;
float: left;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<title>Hub</title>
<link rel="stylesheet" type="text/css" href="css/hub.css" />
</head>
<body>
<div id="title"><u>Website Hub</u></div>
<div id="outer_div">
<div id="inner_div">
<div id="main">
<div id="row1">
<div class="link">
<a><img src="img/one.png" border="2px"></a>
<caption>One</caption>
</div>
<div class="link">
<a><img src="img/two.jpg" border="2px"></a>
<caption>Two</caption>
</div>
<div class="link">
<a><img src="img/three.jpg" border="2px"></a>
<caption>Three</caption>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
You could always put the border declaration in the CSS instead...
.link {
width: 33%;
float: left;
text-align: center;
border: 2px solid #1f1f1f;
}
Or extend the declaration:
.link a img { border: 2px solid #1f1f1f; }
.link a { width: 100%; } // Will be inherited by the child element...
I have a layouting problem while using this html/css coding.
Actually I want the symbols to be vertically aligned to the center of the div.
The second layout is displaying fine with float value set to left on child divs.
Whats wrong with the first layout. Any ideas?
Here is the code
<html>
<head>
<style type="text/css">
div, p {
margin:0;
padding:0;
}
div.wrapper {
background: #FFFFFF;
border-radius: 3px;
padding: 20px;
}
/* LAYOUT 1 STYLE */
div.list1 div {
display: inline-block;
}
div.thumb1 {
border:#3C6BBC 2px solid;
border-radius: 2px;
width: 120px;
height: 120px;
}
div.symbol1 {
font-size: 25px;
width: 20px;
height: 70px;
margin: 2px;
text-align: center;
padding-top:50px;
}
/* LAYOUT 2 STYLE */
div.list2 {
overflow: hidden;
}
div.list2 div {
float: left;
}
div.thumb2 {
border:#3C6BBC 2px solid;
border-radius: 2px;
width: 120px;
height: 120px;
}
div.symbol2 {
font-size: 25px;
width: 20px;
height: 70px;
margin: 2px;
text-align: center;
padding-top:50px;
}
</style>
</head>
<body>
<div class="wrapper" id="layout1">
<h1>MAIN HEADING</h1>
<h2>Sub Heading</h2>
<div class="list1">
<div class="thumb1"></div>
<div class="symbol1"><p>+</p></div>
<div class="thumb1"></div>
<div class="symbol1"><p>+</p></div>
<div class="thumb1"></div>
<div class="symbol1"><p>=</p></div>
<div class="thumb1"></div>
</div>
</div>
<div class="wrapper" id="layout2">
<h1>MAIN HEADING</h1>
<h2>Sub Heading</h2>
<div class="list2">
<div class="thumb2"></div>
<div class="symbol2"><p>+</p></div>
<div class="thumb2"></div>
<div class="symbol2"><p>+</p></div>
<div class="thumb2"></div>
<div class="symbol2"><p>=</p></div>
<div class="thumb2"></div>
</div>
</div>
</body>
</html>
Just give vertical-align:middle to your to mentioned below class
div.list1 div {
display: inline-block;
vertical-align: middle;
}
Demo