This question already has answers here:
How can I horizontally center an element?
(133 answers)
Closed 6 years ago.
I know this question has been frequently asked but I can never seem to get it to work. Can you tell me what's wrong?
I have three divs within a #container div, which I want to centre side by side. The #container is 1000px wide (I want to keep it that way). Here is my code:
#container {
margin-top: 500px;
position: absolute;
width: 1000px;
}
.related-article {
background-color: #D6A400;
display: inline-block;
width: 230px;
height: 300px;
border-radius: 30px;
margin-bottom: 0px;
}
.related-article > img {
width: 200px;
height: 150px;
border-radius: 15px;
margin-top: 15px;
}
.related-article > h3 {
font-size: 15px;
width: 180px;
text-align: justify;
margin-left: auto;
margin-right: auto;
color: #f1f1f1;
font-family: Abel, serif;
margin-bottom: none;
}
a {
text-decoration: none;
}
#right {
float: right;
}
#left {
float: left;
}
#center {
margin-left: 385px;
margin-right: 385px;
}
<div id="container">
<h2>Here's what you'll do!</h2>
<div id="left">
<a href="#" class="related-article first" align="middle">
<img src="download.jpeg" alt="T-rex">
<h3>Constructing amazing fossils you never even dreamed of</h3>
</a>
</div>
<div id="center">
<a href="#" class="related-article second" align="middle">
<img src="fossil-fish-10-lg.jpg" alt="Fish">
<h3>Studying ancient marine biology</h3>
</a>
</div>
<div id="right">
<a href="#" class="related-article third" align="middle">
<img src="fossil.turtle2.jpg" alt="Turtle">
<h3>Uncovering the world's greatest mysteries</h3>
</a>
</div>
</div>
All help would be gladly appreciated.
You can do that quite simple using flexbox:
#container {
/* margin-top: 500px; */
width: 1000px;
margin: 0 auto;
}
.related-article {
background-color: #D6A400;
display: inline-block;
border-radius: 30px;
margin-bottom: 0px;
}
.related-article > img {
width: 200px;
height: 150px;
border-radius: 15px;
margin-top: 15px;
}
.related-article > h3 {
font-size: 15px;
width: 180px;
text-align: justify;
margin-left: auto;
margin-right: auto;
color: #f1f1f1;
font-family: Abel, serif;
margin-bottom: none;
}
a {
text-decoration: none;
}
}
#container {
width: 1000px;
}
.related-article {
background-color: #D6A400;
display: inline-block;
width: 230px;
height: 300px;
border-radius: 30px;
margin-bottom: 0px;
}
.related-article > img {
width: 200px;
height: 150px;
border-radius: 15px;
margin-top: 15px;
}
.related-article > h3 {
font-size: 15px;
width: 180px;
text-align: justify;
margin-left: auto;
margin-right: auto;
color: #f1f1f1;
font-family: Abel, serif;
margin-bottom: none;
}
a {
text-decoration: none;
}
.box {
margin-right: 10px;
width: 230px;
height: 300px;
}
.flex-container {
display: flex;
align-items: center;
justify-content: center;
}
<div id="container">
<h2>Here's what you'll do!</h2>
<div class="flex-container">
<div id="left" class="box">
<a href="#" class="related-article first" align="middle">
<img src="download.jpeg" alt="T-rex">
<h3>Constructing amazing fossils you never even dreamed of</h3>
</a>
</div>
<div id="center" class="box">
<a href="#" class="related-article second" align="middle">
<img src="fossil-fish-10-lg.jpg" alt="Fish">
<h3>Studying ancient marine biology</h3>
</a>
</div>
<div id="right" class="box">
<a href="#" class="related-article third" align="middle">
<img src="fossil.turtle2.jpg" alt="Turtle">
<h3>Uncovering the world's greatest mysteries</h3>
</a>
</div>
</div>
</div>
A solution using display: flex. Read more about flexbox here
Apply display: flex to the container
Add flex: 1 to all the child's which are to be centered horizontally.
h2 {
margin-top: 500px;
}
#container {
position: absolute;
width: 1000px;
display: flex;
text-align: center;
}
#container div {
flex: 1;
}
.related-article {
background-color: #D6A400;
display: inline-block;
width: 230px;
height: 300px;
border-radius: 30px;
margin-bottom: 0px;
}
.related-article > img {
width: 200px;
height: 150px;
border-radius: 15px;
margin-top: 15px;
}
.related-article > h3 {
font-size: 15px;
width: 180px;
text-align: justify;
margin-left: auto;
margin-right: auto;
color: #f1f1f1;
font-family: Abel, serif;
margin-bottom: none;
}
a {
text-decoration: none;
}
<h2>Here's what you'll do!</h2>
<div id="container">
<div id="left">
<a href="#" class="related-article first" align="middle">
<img src="download.jpeg" alt="T-rex">
<h3>Constructing amazing fossils you never even dreamed of</h3>
</a>
</div>
<div id="center">
<a href="#" class="related-article second" align="middle">
<img src="fossil-fish-10-lg.jpg" alt="Fish">
<h3>Studying ancient marine biology</h3>
</a>
</div>
<div id="right">
<a href="#" class="related-article third" align="middle">
<img src="fossil.turtle2.jpg" alt="Turtle">
<h3>Uncovering the world's greatest mysteries</h3>
</a>
</div>
</div>
Remove all the floats and replace them with :
display: inline-block;
Also, as much as i have tried, with that spacing between divs, you wont be able to display them the right way. Make the space between the #left, #center and #right divs less than 50px, or work with percentage(%).
You may use display:table for that..
You can have Parent div with style
display:table
and your 3 child divs as
display:table-cell
#container {
margin-top: 500px;
position: absolute;
width: 1000px;
}
.related-article {
background-color: #D6A400;
display: inline-block;
width: 230px;
height: 300px;
border-radius: 30px;
margin-bottom: 0px;
}
.related-article > img {
width: 200px;
height: 150px;
border-radius: 15px;
margin-top: 15px;
}
.related-article > h3 {
font-size: 15px;
width: 180px;
text-align: justify;
margin-left: auto;
margin-right: auto;
color: #f1f1f1;
font-family: Abel, serif;
margin-bottom: none;
}
a {
text-decoration: none;
}
#container {
margin-top: 500px;
position: absolute;
width: 1000px;
display: table;
}
.related-article {
background-color: #D6A400;
display: inline-block;
width: 230px;
height: 300px;
border-radius: 30px;
margin-bottom: 0px;
}
.related-article > img {
width: 200px;
height: 150px;
border-radius: 15px;
margin-top: 15px;
}
.related-article > h3 {
font-size: 15px;
width: 180px;
text-align: justify;
margin-left: auto;
margin-right: auto;
color: #f1f1f1;
font-family: Abel, serif;
margin-bottom: none;
}
a {
text-decoration: none;
}
#left,
#right,
#center {
display: table-cell;
}
#center {
margin-left: 385px;
margin-right: 385px;
}
h2 {
display: table-row;
}
<div id="container">
<h2>Here's what you'll do!</h2>
<div id="left">
<a href="#" class="related-article first" align="middle">
<img src="download.jpeg" alt="T-rex">
<h3>Constructing amazing fossils you never even dreamed of</h3>
</a>
</div>
<div id="center">
<a href="#" class="related-article second" align="middle">
<img src="fossil-fish-10-lg.jpg" alt="Fish">
<h3>Studying ancient marine biology</h3>
</a>
</div>
<div id="right">
<a href="#" class="related-article third" align="middle">
<img src="fossil.turtle2.jpg" alt="Turtle">
<h3>Uncovering the world's greatest mysteries</h3>
</a>
</div>
</div>
remove float from and add display: inline-block to all three, then add text-align: center; to the container.
Try this, and add float:left to your right,left and center div and reduce your margin left and right of center div.
#right {
float: left;
}
#left {
float: left;
}
#center {
margin-left: 85px;
margin-right: 85px;
float:left;
}
Instead adding center, left and right. Use ul and set the width of li in percentage. It will improve the code and reduce the css code.
The codepen url is http://codepen.io/SESN/pen/pbbjrb
CSS
#container { width: 100%; }
.ulContainer { margin: 0px auto; list-style: none; width: 80%; }
.ulContainer li { width: 33.33%; float: left; }
HTML
<div id="container">
<h2>Here's what you'll do!</h2>
<ul class="ulContainer">
<li>
<a href="#" class="related-article first" align="middle">
<img src="download.jpeg" alt="T-rex">
<h3>Constructing amazing fossils you never even dreamed of</h3>
</a>
</li>
<li>
<a href="#" class="related-article second" align="middle">
<img src="fossil-fish-10-lg.jpg" alt="Fish">
<h3>Studying ancient marine biology</h3>
</a>
</li>
<li>
<a href="#" class="related-article third" align="middle">
<img src="fossil.turtle2.jpg" alt="Turtle">
<h3>Uncovering the world's greatest mysteries</h3>
</a>
</li>
</ul>
</div>
Related
I'm trying to line up 3 images and some text on one 'line', the first 2 images are lined up fine, same with the text but the 3rd image refuses to and i'm not sure why.
here is my code so far:
* {
box-sizing: border-box;
}
body {
display: inline-block;
width: 800px;
height: 1000px;
}
.logo {
padding: 5px;
display: inline;
}
.pfp {
display: inline;
}
.msg {
display: inline;
}
.userid {
text-decoration-color: white;
background-color: rgb(250, 250, 250);
text-align: left;
width: 50px;
border-radius: 20%;
display: block;
font-size: 10px;
margin-left: 160px;
margin-top: -18px;
}
<div class='logo'>
<img src='logo.jpg' , width=1 00px>
</div>
<div class="pfp">
<a href="Profile Page.html">
<img src='pfp.jpg' , width=5 0px>
</a>
</div>
<div class='userid'>
<span>[user_id]</span>
</div>
<div class='msg'>
<a href='messages.html'>
<img src='messages.jpg' , width=5 0px>
</a>
</div>
Your .userid also needs to be displayed inline or inline-block so the next item can be inline with it. Right now it's displayed as block so it's shoving anything after it to the next line.
* {
box-sizing: border-box;
}
body {
display: inline-block;
width: 800px;
height: 1000px;
}
.logo {
padding: 5px;
display: inline;
}
.pfp {
display: inline;
}
.msg {
display: inline;
}
.userid {
text-decoration-color: white;
background-color: rgb(250, 250, 250);
text-align: left;
width: 50px;
border-radius: 20%;
//display: block;
display: inline;
font-size: 10px;
margin-left: 160px;
margin-top: -18px;
}
<div class='logo'>
<img src='logo.jpg' , width=1 00px>
</div>
<div class="pfp">
<a href="Profile Page.html">
<img src='pfp.jpg' , width=5 0px>
</a>
</div>
<div class='userid'>
<span>[user_id]</span>
</div>
<div class='msg'>
<a href='messages.html'>
<img src='messages.jpg' , width=5 0px>
</a>
</div>
I'm building a panel for a front end system, but I got an annoying problem.
I am not that good with CSS. This is what happens:
This is my HTML code:
#main #myTopMenu #iconBar {
margin-right: 10px;
float: right;
}
#main #myTopMenu #iconBar a {
display: inline-block;
margin-left: 30px;
color: white;
}
#main #myTopMenu #iconBar .optionsContainer {
line-height: 55px;
}
#main #myTopMenu #iconBar .optionsContainer img {
vertical-align: middle;
position: relative;
}
#main #myTopMenu #iconBar .valueWithOption {
background-color: #59a632;
height: 25px;
width: 35px;
position: absolute;
top: 10px;
margin-left: 27px;
border-radius: 4px;
}
#main #myTopMenu #iconBar .valueWithOption span {
background-color: blue;
width: 100%;
height: 100%;
}
<div id="iconBar">
<a href="#">
<div class="optionsContainer">
<img src="images/icons/message.png">
<div class="valueWithOption">
<span>5</span>
</div>
</div>
</a>
<a href="#">
<div class="optionsContainer"><img src="images/icons/bell.png">
<div class="valueWithOption"><span>5</span></div>
</div>
</a>
<a href="#">
<div class="optionsContainer"><img src="images/icons/settings.png"></div>
</a>
</div>
Also do you guys have tips to make it so that the width of the green box expands so that the value in the green box always fits properly.
I made some significant changes to your codes for expected results. See snippet
#iconBar {
margin-right: 10px;
float: right;
}
#iconBar a {
display: inline-block;
margin-left: 30px;
color: white;
}
#iconBar .optionsContainer img {
vertical-align: middle;
position: relative;
}
#iconBar .valueWithOption {
background-color: #59a632;
padding: 5px;
top: 10px;
border-radius: 4px;
position: relative;
top: -10px;
display:inline-block
}
#iconBar .valueWithOption span {
background-color: blue;
width: 100%;
height: 100%;
}
<br>
<br>
<div id="iconBar">
<a href="#">
<div class="optionsContainer">
<img src="images/icons/message.png">
<div class="valueWithOption">
<span>5</span>
</div>
</div>
</a>
<a href="#">
<div class="optionsContainer"><img src="images/icons/bell.png">
<div class="valueWithOption"><span>500</span></div>
</div>
</a>
<a href="#">
<div class="optionsContainer"><img src="images/icons/settings.png"></div>
</a>
</div>
So i'm trying to place some text under an image but for some reason it stays on the right till the container ends and then goes under the image.
I want it to be fully under the image.
And here is the code:
.post {
margin-top: 3px;
width: 80%;
font-size: 20px;
border-bottom: 1px solid #ddd;
}
.post h2 {
font-size: 20px;
cursor: pointer;
}
.post h2:hover {
color: #0099FF;
}
.post img {
display: block;
width: 95%;
height: auto;
float: left;
position: relative;
}
.post p {
display: block;
top: 7px;
font-size: 13px;
color: #999;
}
.rating {
display: inline-block;
}
.rate {
display: inline-block;
height: 34px;
width: 44px;
border: 1px solid #ddd;
border-radius: 3px;
text-align: center;
cursor: pointer;
line-height: 30px;
margin-bottom: 25px;
margin-left: 5px;
}
.rate:first-child {
margin-left: 0;
}
.rate:hover {
border: 1px solid #999;
}
.rate img {
position: relative;
top: 7px;
left: 12px;
width: 20px;
height: 20px;
}
.social {
display: inline-block;
height: 34px;
float: right;
}
.social a img {
display: inline-block;
height: 34px;
width: auto;
margin-right: 10px;
}
<div class="post">
<h2>I know I'm a douche for wearing sunglasses at night but...</h2>
<img src="http://img-9gag-fun.9cache.com/photo/a77Pzr2_700b.jpg" />
<div class="postfooter">
<p>Over 9000 points · 56 comments</p>
<div class="rating">
<div class="rate">
<img src="up.png">
</div>
<div class="rate">
<img src="down.png">
</div>
<div class="rate">
<img src="comment.png">
</div>
</div>
<div class="social">
<a href="#">
<img src="facebook.png">
</a>
<a href="#">
<img src="twitter.png">
</a>
<a href="#">
<img src="googleplus.png">
</a>
</div>
</div>
Also it looks alright in chrome for some reason and not alright in FF.
Add css for .postfooter
.postfooter {
clear: both;
}
This will ensure it's on its own line.
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 trying to put together 4-column footer. However I am struggling with making the columns and the elements inside of them fully aligned. For some reason the 2nd column comes out lower than the first one. Like this:
#footer_wrapper {
width: 100%;
height: 502px;
min-width: 960px;
}
.line_breaker {
display: block;
width: 100%;
height: 50px;
border-bottom: 2px solid orangered;
}
/* ----------- THE 4 LOGO CONTAINER--------------------*/
.logo_container {
display: block;
height: 150px;
width: 100%;
}
.logo_container img {
margin: 50px 0 50px 10%;
height: 50px;
}
/* ----------- THE 4 COLUMNS --------------------------*/
.content_container {
position: relative;
display: block;
width: 80%;
margin: 0px 10%;
height: 300px;
text-align: center;
}
.footer_column {
display: inline-block;
height: 350px;
width: 18%;
margin: 20px 1%;
}
.column_item_wrapper {
position: relative;
width: 100%;
height: 30px;
}
.column_item_square {
display: inline;
float: left;
margin: 1px 10px 10px 0px;
width: 15px;
height: 15px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
border: 2px solid orangered;
}
.column_item_text {}
<footer>
<div id="footer_wrapper">
<div class="line_breaker"></div>
<div class="logo_container">
<img id="logo" src="images/brand.png">
</div>
<div class="content_container">
<div class="footer_column">
<div class="column_item_wrapper">
<div class="column_item_square"></div>
<a href="#" class="column_item_text">
<span>About Us</span>
</a>
</div>
<div class="column_item_wrapper">
<div class="column_item_square"></div>
<a href="#" class="column_item_text">
<span>About Us</span>
</a>
</div>
</div>
<div class="footer_column">
<div class="column_item_wrapper">
<div class="column_item_square"></div>
<a href="#" class="column_item_text">
<span>About Us</span>
</a>
</div>
</div>
<div class="footer_column">
Column 1
</div>
<div class="footer_column">
Column 1
</div>
</div>
</div>
</footer>
Here is my HTML:
Can someone help me figure out why the 2nd column item begins lower than the first column?
Add vertical-align: top to the footer_column class or use inline-table instead of inline-block.
Inline-block elements by default generate spaces in between them and thus the cause of your problem. Learn more about it here: Space between inline-block elements
.footer_column {
display: inline-block; /* or inline-table */
height: 350px;
width: 18%;
margin: 20px 1%;
vertical-align: top; /* Add */
}
#footer_wrapper {
width: 100%;
height: 502px;
min-width: 960px;
}
.line_breaker {
display: block;
width: 100%;
height: 50px;
border-bottom: 2px solid orangered;
}
/* ----------- THE 4 LOGO CONTAINER--------------------*/
.logo_container {
display: block;
height: 150px;
width: 100%;
}
.logo_container img {
margin: 50px 0 50px 10%;
height: 50px;
}
/* ----------- THE 4 COLUMNS --------------------------*/
.content_container {
position: relative;
display: block;
width: 80%;
margin: 0px 10%;
height: 300px;
text-align: center;
}
.footer_column {
display: inline-block;
height: 350px;
width: 18%;
margin: 20px 1%;
vertical-align: top;
}
.column_item_wrapper {
position: relative;
width: 100%;
height: 30px;
}
.column_item_square {
display: inline;
float: left;
margin: 1px 10px 10px 0px;
width: 15px;
height: 15px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
border: 2px solid orangered;
}
.column_item_text {}
<footer>
<div id="footer_wrapper">
<div class="line_breaker"></div>
<div class="logo_container">
<img id="logo" src="images/brand.png">
</div>
<div class="content_container">
<div class="footer_column">
<div class="column_item_wrapper">
<div class="column_item_square"></div>
<a href="#" class="column_item_text">
<span>About Us</span>
</a>
</div>
<div class="column_item_wrapper">
<div class="column_item_square"></div>
<a href="#" class="column_item_text">
<span>About Us</span>
</a>
</div>
</div>
<div class="footer_column">
<div class="column_item_wrapper">
<div class="column_item_square"></div>
<a href="#" class="column_item_text">
<span>About Us</span>
</a>
</div>
</div>
<div class="footer_column">
Column 1
</div>
<div class="footer_column">
Column 1
</div>
</div>
</div>
</footer>