I am working on web page layouts. I created this one.
https://codepen.io/iamgonge/pen/paOxxb
I dont understand why the .container .left-side and .right-side elements start at the top of the browser and not below the header. Shouldn't the layout out be header->section(hero)->section(one)? I would think that the top of any of those three divs would be underneath the header but they are not. What amy I not understanding here?
body {
font-family: Verdana, Geneva, sans-serif;
margin: 0;
padding: 0;
}
.container {
background: #333338;
display: inline-block;
width: 60%;
height: 800px;
}
header {
position: fixed;
background: #10105f;
width: 100%;
height: 150px;
}
.main-links a {
text-decoration: none;
color: #fff;
font-size: 20px;
text-transform: uppercase;
}
.main-links a:hover {
color: #00843d;
}
.main-links a:active {
color: red;
}
.left-side {
display: inline-block;
width: 20%;
background: #4C4C59;
height: 800px;
float: left;
}
nav {
position: absolute;
bottom: 0;
left: 0;
height: 50px;
width: 100%;
text-align: center;
}
nav ul {
margin: auto;
padding: 0;
display: inline-block;
list-style: none;
color: #fff;
// border: 1px solid #00843D;
width: 60%;
;
}
nav li {
display: inline-block;
margin: 5px -3px;
padding: 5px 10px;
// border: 1px solid#fff;
}
nav li:hover {
background: rgba(255, 255, 255, 0.25);
}
nav li:active {
border-bottom: 2px solid red;
color: red;
}
.nav-left {
float: left;
height: 50px;
width: 20%;
padding-bottom: 96px;
// border: 1px solid #00843D;
}
.nav-right {
float: right;
height: 50px;
width: 20%;
padding-bottom: 96px;
//border: 1px solid #00843D;
}
.nav-center {
position: relative;
padding-bottom: 21px;
margin: 0 auto;
height: 75px;
width: 300px;
// border: 1px solid #00843D;
}
.nav-right p a {
font-size: 16px;
text-decoration: none;
color: #fff;
}
.nav-right p a:hover {
color: #00843d;
}
.nav-right p {
margin: 20px;
padding: 0;
color: #fff;
}
.one {
display: block;
width: 100%;
height: 800px;
background: #080853;
}
.right-side {
display: inline-block;
width: 20%;
background: #4C4C59;
height: 800px;
float: right;
}
.rss-title,
.rss-date {
margin: 0px!important;
}
.rss-feed {
margin: 10px 5px 20px 0px;
}
.rss-date {
padding: 0;
font-size: 12px;
font-style: italic;
}
.hero,
.one {
position: relative;
height: 100%;
}
.success {
display: block;
text-align: center;
margin-top: 20%;
font-size: 69px;
color: #00843d;
// margin-left: auto;
// margin-right: auto;
}
.success:hover {
font-size: 71px;
}
#timestamp {
margin: 10px 5px 20px 0px;
text-align: center;
color: #fff;
font-size: 16px;
}
#timestamp,
.rss-feed {
background: #080853;
padding: 10px;
height: 110px;
}
#media (min-width:1530px) {}
<body>
<header>
<div class="nav-left">
<div id="timestamp"></div>
</div>
<div class="nav-right"></div>
<div class="nav-center"></div>
<nav>
<ul class="main-nav">
<li class="main-links">home</li>
<li class="main-links">about</li>
<li class="main-links">projects</li>
<li class="main-links">portal</li>
<li class="main-links">links</li>
</ul>
</nav>
</header>
<section="hero">
<div class="left-side"></div>
<div class="right-side"></div>
<div class="container">
<div class="success"></div>
</div>
<!--***Container***-->
</section>
<section class="one"></section>
</body>
The reason is that you have applied position: fixed; to your <header> tag. When you do this you must account for the height of the header and push down other elements to restore the layout.
Related
I have a site and it has 2 sections. the left section is a navigation bar with menus below.
The section next to it is the main section or where the website content must be placed. My problem is the right section is positioned a few pixels from the header. How can i fix this? I provided some image to let you see how the website should look like.
/*WRITTEN USING SASS*/
#side-menu{
margin-top: 25px;
.side-menu-bg {
width: max-content;
h3 {
position: absolute;
color: white;
padding: 0px 18px;
font-size: 27px;
}
img {
display: -webkit-box;
}
}
.side-nav-bar {
width: 210px;
position: unset;
margin-top: -3px;
display: inline-flex;
z-index: 1;
flex-direction: column;
overflow-x: hidden;
background-color: #ffffff;
a {
display: inherit;
color: #707070;
text-decoration: none;
font-size: 15px;
padding: 10px 18px;
position: relative;
border-bottom: 1px solid #e8e8e8;
}
.active-link{
color: #a40022;
border-bottom: 2px solid #8a001c;
}
}
.right-contents {
float: right;
.title h3 {
font-size: 38px;
}
.body-content {
background-color: #d3d3d3;
height: 1094px;
width: 738px;
}
}
}
<div class="wrapper"> <!--to make contents center-->
<div id="side-menu">
<div class="side-menu-bg">
<h3>KU 스타트업</h3>
<img src="images/bg/bg_03.png">
</div>
<div class="side-nav-bar">
인사말
창업 비전
창업 프로세스
창업부서소개
찾아오시는 길
</div>
<div class="right-contents">
<div class="title">
<h3>인사말</h3>
<div class="body-content">
sample text
</div>
</div>
</div>
</div>
</div>
Add margin: 0 to your h3 tag.. h3 has margin-to and margin-bottom by default. thanks
.right-contents {
float: right;
.title h3 {
font-size: 38px;
margin: 0; /*add this*/
}
.body-content {
background-color: #d3d3d3;
height: 1094px;
width: 738px;
}
<style>
/*WRITTEN USING SASS*/
#side-menu{
margin-top: 25px;
.side-menu-bg {
width: max-content;
h3 {
position: absolute;
color: white;
padding: 0px 18px;
font-size: 27px;
}
img {
display: -webkit-box;
}
}
.side-nav-bar {
width: 210px;
position: unset;
margin-top: -3px;
display: inline-flex;
z-index: 1;
flex-direction: column;
overflow-x: hidden;
background-color: #ffffff;
}
a {
display: inherit;
color: #707070;
text-decoration: none;
font-size: 15px;
padding: 10px 18px;
position: relative;
border-bottom: 1px solid #e8e8e8;
}
.active-link{
color: #a40022;
border-bottom: 2px solid #8a001c;
}
}
.right-contents {
width: 65%;
margin-top: -3px;
display: inline-flex;
.title h3 {
font-size: 38px;
}
.body-content {
background-color: #d3d3d3;
height: 1094px;
width: 738px;
}
</style>
I'm having a little positioning error and I'm sure it's a simple fix, but after trying lots of different combinations of margin and padding, I can't get it perfect. The problem is I can't seem to get my drop-up menu (footer-nav ul ul) to move down 10px when it appears by hovering over #info. If I remove the margin from the css under #info, it drops the footer-nav ul ul down 10px where I need it, but it removes the 10px margin between the black box (streaks-content) and the footer-nav. Anyone know how to fix this? I appreciate it so so much! I don't know what I would do without you geniuses!
Here is the JS Fiddle: https://jsfiddle.net/fe2zk4L8/19/
Here is the html:
<header id="header">
<div id="nav">
<ul>
<li id="projects">PROJECTS
<ul>
<li id="one"> ONE </li>
<li id="two"> TWO </li>
<li id="three"> THREE </li>
<li id="four"> FOUR </li>
</ul>
</li>
</ul>
</div>
</header>
<div id="color">
<div id="streaks-content">
</div>
</div>
<footer id="footer">
<div id="footer-nav">
<ul>
<li id="info">INFO
<ul>
<li id="twitter">
TWITTER
</li>
<li id="instagram">
INSTAGRAM
</li>
<li id="email">
EMAIL
</li>
</ul>
</li>
</ul>
</div>
</footer>
Here is the css:
a {
text-decoration: none;
color: inherit;
display: block;
}
#header {
width: 100%;
position: fixed;
background-color: #FFFFFF;
margin: 0px;
padding: 0px;
top: 0;
left: 0;
text-align: center;
z-index: 10;
}
#nav {
width: 100%;
background-color: #FFFFFF;
}
#projects {
display: inline-block;
padding-bottom: 10px;
}
#nav ul {
font-family: Arial;
font-size: 15px;
font-weight: bold;
color: #000000;
list-style-type: none;
text-align: center;
margin: auto;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
#nav ul ul {
width: 300px;
list-style-type: none;
font-weight: normal;
display: none;
}
#nav ul li:hover>ul {
display: block;
position: absolute;
text-align: center;
margin: 0 auto;
left: 0;
right: 0;
}
#one {
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid black;
color: #000000;
background-color: white;
}
#one:hover {
background-color: black;
color: white;
}
#two {
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid black;
color: #000000;
background-color: white;
}
#two:hover {
background-color: black;
color: white;
}
#three {
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid black;
color: #000000;
background-color: white;
}
#three:hover {
background-color: black;
color: white;
}
#four {
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid black;
color: #000000;
background-color: white;
}
#four:hover {
background-color: black;
color: white;
}
#footer {
width: 100%;
background-color: white;
position: fixed;
margin: 0px;
bottom: 0;
left: 0;
text-align: center;
z-index: 11;
}
#footer-nav {
width: 100%;
}
#info {
display: inline-block;
padding-top: 10px;
}
#footer-nav ul {
font-family: Arial;
font-size: 15px;
font-weight: bold;
color: #000000;
list-style-type: none;
text-align: center;
margin: auto;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 10px;
padding-left: 0px;
}
#footer-nav ul ul {
width: 300px;
list-style-type: none;
font-weight: normal;
display: none;
}
#footer-nav ul li:hover>ul {
display: block;
position: absolute;
bottom: 100%;
text-align: center;
margin: 0 auto;
left: 0;
right: 0;
}
#twitter {
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid black;
color: #000000;
background-color: white;
}
#twitter:hover {
background-color: black;
color: white;
}
#email {
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid black;
color: #000000;
background-color: white;
}
#email:hover {
background-color: black;
color: white;
}
#instagram {
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid black;
color: #000000;
background-color: white;
}
#instagram:hover {
background-color: black;
color: white;
}
#color {
width: 100%;
align-content: center;
}
#streaks-content {
background-color: black;
width: 300px;
height: 1000px;
display: block;
margin: 0 auto;
}
Please add to the following CSS selector #footer-nav ul li:hover>ul that rule padding-bottom: 0;
so, in total you should have:
#footer-nav ul li:hover>ul {
display: block;
position: absolute;
bottom: 100%;
text-align: center;
margin: 0 auto;
left: 0;
right: 0;
padding-bottom: 0;
}
Update:
I'm sure this will be easy fix for advanced members. I have created drop down menu with the 'nav' element. For some reason as hard as I try, I cannot get the menu to overlap the slider images below it when you expand it on mobile. I've tried lowering the Z-index on the slider and raising it on the menu. What am I doing wrong? Thanks in advance:
UPDATE: Here is a fiddle link as requested by a comment which includes the HTML. https://jsfiddle.net/wknow6cv/#&togetherjs=ADxkd31O6q
#import 'https://fonts.googleapis.com/css?family=Alegreya+Sans';
* {
margin: 0;
padding: 0;
border: 0;
overflow-x: hidden;
}
html,body
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
body {
background: #F5F5F5;
color: #67727A;
font-family: 'Alegreya', Sans-serrif;
margin: 0;
}
h3 {
font-size: 150%;
line-height: 155%;
padding: 5% 0;
font-weight: 400;
}
p{
font-size: 120%;
line-height: 150%;
padding: 3%;
text-indent: 2%;
text-align: center;
}
img{
max-width: 100%;
height: auto;
width: auto;
margin-bottom: -4px;
}
header{
background-color: #6991AC;
width: 100%;
height: 120px;
}
h1{
position:absolute;
right: 600px;
top:30px;
}
#top-left-menu {
right: 0px;
}
#logo{
margin: 20px;
float: left;
width: 380px;
height: 60px;
background: url(img/RD.png) no-repeat center;
left: 0px;
top: 0px;
}
p {
font-size: 1.4vw;
}
h3{
font-size: 1.5vw;
}
/*--- Start Navigation --*/
nav{
float: right;
padding: 25px 20px 0 0; /*--top right bottom left--*/
}
#menu-icon{
display: hidden;
width: 40px;
height: 40px;
background: url(img/nav.png) center;
}
a:hover#menu-icon {
border-radius: 4px 4px 0 0;
}
ul{
list-style-type: none;
}
nav ul li {
font-family: 'Alegreya Sans', Sans-serrif;
font-size: 150%;
display: inline-block;
/*makes the links go left from right instead of up and down*/
float: left;
padding: 10px;
}
nav ul li a {
text-decoration: none;
color: #F5F5F5;
}
nav ul li a:hover {
color: #C3D7DF;
}
/*.current{
color: #C3D7DF;
}
/*--End Navigation--*/
.one-fourth {
width: 25%;
float: left;
text-align: center;
font-family: Arial;
color: #F0F0F0;
}
#cloud {
background-color: #C3D7DF;
}
#lock {
background-color: #6991AC;
}
#headset {
background-color: #C3D7DF;
}
#truck {
background-color: #6991AC;
}
.one-fourth i { /*--Icons at one fourth blocks--*/
color: #F0F0F0;
font-size: 410%;
padding: 13% 0 4% 0;
}
article {
float: left;
margin: 0 auto;
width: 50%;
height: auto;
}
#sec-1 {
background-color: #FFFFFF;
}
aside {
float: right;
margin: 0 auto;
width: 50%;
height: auto;
}
.one-third {
width: 33.3333333%;
float: left;
text-align: center;
color: #FFFFFF
}
#google{
background-color: #A2B1C1;
}
#marketing {
background-color: #BEB9AD;
}
#customers {
background-color: #AADCD2;
}
/*--Start Footer--*/
footer {
background-color: #4682B4;
width: 100%;
}
.social {
list-style-type: none;
text-align: center;
}
.social li {
display: inline;
}
.social i { /*--icons--*/
font-size: 220%;
padding: 3% 3% 3% 2%;
color: #C3D7DF;
}
.social i:hover {
color: F5F5F5;
}
footer.second { /*--Socket--*/
border-top: 1px solid #AADCD2;
background-color: #544B59;
max-height: 55px;
text-align: center;
margin: 0;
}
footer.second p {
padding: 5px 0 9px 0;
text-align: center;
}
.carouselbox {
font-family: helvetica,sans-serif;
font-size: 14px;
width: 100px;
position: relative;
margin: 1em;
border: 1px solid #ccc;
box-shadow: 2px 2px 10px #ccc;
overflow: hidden;
}
.content {
margin: 0;
padding: 0;
}
.content li {
font-size: 100px;
margin: 0;
padding: 0;
width: 100%;
list-style: none;
text-align: center;
}
.new-inner {
height: 800px;
width: 100%;
float: left;
background-color: #FFFAFA;
font-family: Arial;
}
.nip1 {
width: 40%;
}
/*---------Insert Slideshow stuff below------*/
.cycle-slideshow{
width: 100%;
display: block;
position: relative;
margin: 0 auto;
overflow: hidden;
}
.cycle-prev, .cycle-next {
font-size: 200%;
color: #FFF;
top: 50%;
display: block;
position: absolute;
z-index: 9999;
cursor: pointer;
}
.cycle-prev {left: 10%;}
.cycle-next {right: 10%}
.cycle-pager{
width: 100%;
text-align: center;
display: block;
position: absolute;
bottom: 20px;
z-index: 9999;
cursor: pointer;
}
.cycle-pager span {
text-indent: 100%;
white-space: normal;
width: 12px;
height: 12px;
display: inline-block;
border: 1px solid #FFF;
border-radius: 50%;
margin: 0 10px;
}
.cycle-pager .cycle-pager-active {background: #FFF;}
/*------------MEDIA QUERIES ARE NOW STARTING-------------*/
#media screen and (max-width: 768px){
p {
font-size: 250%;
}
h3{
font-size: 260%;
}
header{
width: 100%;
}
#logo {
margin: 15px 0 20 -25px;
background: url(img/RD_mobile.png) no-repeat center;
float: left;
width: 170px;
height: 60px;
}
#menu-icon {
display: inline-block;
}
nav ul, nav:active ul {
display: none;
z-index: 1000;
position: absolute;
padding: 20px;
background: #6991AC;
right: 20px;
top: 60px;
border: 1px solid #FFF;
border-radius: 2px 0 2px 2px;
width: 50%;
}
nav:hover ul {
display: block;
}
nav li {
text-align: center;
width: 100%;
padding: 10px 0;
}
.one-fourth {
float: left;
width: 100%;
font-size: 30%;
}
.one-fourth i {
font-size: 500%;
padding: 4% 0 1% 0;
}
article {
width: 100%;
}
aside {
width: 100%;
}
.hand-mobile {
display: none;
}
.social i {
font-size: 100%;
}
}
Maybe try to change the media queries nav to position: relative;
EDIT:
Try this instead, change the display: none to inline:
nav ul, nav:active ul {
display: inline;
z-index: 1000;
position: relative;
padding: 20px;
background: #6991AC;
right: 20px;
top: 60px;
border: 1px solid #FFF;
border-radius: 2px 0 2px 2px;
width: 50%;
}
I have been working on a grid system for a practice website for about two weeks now and I still can't figure it out. I have been watching youtube videos and reading articles left and right with no luck. This is what I have come up with thus far:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #2A2A2A;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
li {
float: right;
text-color: white;
border-left: 1px solid white;
font-family: "Comic Sans MS";
}
li:hover {
background-color: #1D1D1D;
}
li a {
display: block;
padding: 8px;
color: white;
margin: 7px 5px 7px 5px;
}
li a:hover {
background-color: #1D1D1D;
color: white;
text-decoration: none;
}
li:first-child {
background-color: #00E006;
border: none
}
li:first-child:hover {
background-color: #05aa0a;
}
li:first-child a:hover {
background-color: #05aa0a;
}
.fit {
max-width: 100%;
max-height: 100%;
}
.background {
background-color: grey;
}
p {
color: black;
font-family: "Trebuchet MS";
font-size: 16px;
margin: 10px;
}
a:hover {
text-decoration: none;
}
.bigger-text {
font-size: 20px;
}
.profile-img-border {
border: 1px solid black;
border-radius: 50%;
}
.img-border {
border: 3px solid black;
border-radius: 100%;
margin: 5px
}
div.img {
margin: 0 auto;
border: 1px solid #ccc;
float: left;
width: 280px;
display: block;
}
div.img:hover {
border: 1px solid #777;
}
div.img img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
background-color: white;
}
.container {
width: 1460px;
margin-right: auto;
margin-left:auto
}
five:first-child, four:first-child, three:first-child, two:first-child, one:first-child, six:first-child {
margin-left: 0;
}
.six {
width: 100%;
display: block;
}
.five {
width: 80%;
display: block;
float: left;
margin-left: 2%;
}
.four {
width: 66%;
display: block;
float: left;
margin-left: 2%;
}
.three {
width: 49%;
display: block;
float: left;
margin-left: 2%;
}
.two {
width: 32%;
display: block;
float: left;
margin-left: 2%;
}
.one {
width: 15%;
display: block;
float: left;
margin-left: 2%;
}
.row {
width: 100%;
clear: both;
padding: 0px;
margin: 0px;
}
<!DOCTYPE html>
<html>
<head>
<Title>Personal Portfolio FCC</Title>
<link rel="stylesheet" href="Hello%20World.css">
</head>
<body class="background">
<div class="container">
<div class="row">
<div class="top-bar-box align-middle-v" align="right">
<ul>
<li style="float:left">
<a class="active">Home</a>
</li>
<li><a>About</a></li>
<li><a>Portfolio</a></li>
<li><a>Contact</a></li>
</ul>
</div>
</div><!--Row 1 closer-->
<div class="row"><!--Row 2 opener-->
<div class="four">
<p>"text text text"</p>
</div>
<div class="two">
<img src="#" alt="A picture of a verry handsome
fellow(me)" class="profile-img-border"></img>
</div>
</div><!--Row 2 closer-->
</div>
</body>
</html>
you could start by moving this to the end
five:first-child,
four:first-child,
three:first-child,
two:first-child,
one:first-child,
six:first-child {
margin-left: 0;
}
and replacing it with
.five:first-child,
.four:first-child,
.three:first-child,
.two:first-child,
.one:first-child,
.six:first-child {
margin-left: 0;
}
I'm sure this is a facepalm moment for me, but a need some fresh eyes to have a look and tell me what I'm doing wrong... because I can't spot it!
That last button on the right needs to be in line with the other two, please help.
body {
padding: 0;
margin: 0;
font-family: Arial, sans-serif;
font-size: 14px;
color: #333;
}
p {
line-height: 1.65em;
margin: 0 0 1em 0;
}
h1, h2, h3, h4, h5, h6 {
margin: 0 0 1em 0;
font-weight: normal;
}
/* BUTTON CONTAINER */
#buttoncointainer {
width: 100%;
}
.buttontext {
font-size: 175%;
font: #fff;
}
/* LEFT BUTTON */
#arrowleft {
float: left;
width: 20%;
height: 40px;
background: #FFFFFF;
border: 1px solid #005698;
margin-right: 3px;
position: relative;
}
#arrowleft:hover {
float: left;
width: 20%;
height: 40px;
background: #ECECEC;
}
.leftarrow {
float: left;
width: 100%;
display: table-cell;
vertical-align: middle;
text-align: center;
height: 40px;
}
.leftarrow a:hover {
color: #006ec3;
}
.leftarrow a {
text-decoration:none;
color: #fff;
}
/* SHARE BUTTON */
#sharebutton {
width: 40%;
margin: 0 auto;
text-align: center;
background: #005698;
height: 40px;
border: 1px solid #005698;
}
#sharebutton:hover {
width: 40%;
text-align: center;
background: #006ec3;
height: 40px;
}
.fb-share-text {
color: #fff;
text-align: center;
}
.sbutton {
margin: 0 auto;
}
.sbutton a {
text-decoration:none;
display:block
}
.sbutton a:hover {
text-decoration:none;
display:block;
color: #006ec3;
}
/* RIGHT BUTTON */
#arrowright {
float: right;
width: 20%;
height: 40px;
background: #FFFFFF;
border: 1px solid #005698;
margin-left: 3px;
position: relative;
}
#arrowright:hover {
float: right;
width: 20%;
height: 40px;
background: #ECECEC;
}
.rightarrow {
float: right;
width: 100%;
display: table-cell;
vertical-align: middle;
text-align: center;
height: 40px;
}
.rightarrow a:hover {
color: #006ec3;
}
.rightarrow a {
text-decoration:none;
color: #fff;
}
<div id="buttoncointainer">
<div id="arrowleft">
<div class="leftarrow">
<p class="buttontext">
◄
</p>
</div>
</div>
<div id="sharebutton">
<div class="sbutton">
<p class="buttontext">
Share
</p>
</div>
</div>
<div id="arrowright">
<div class="rightarrow">
<p class="buttontext">
►
</p>
</div>
</div>
</div>
Change the order of your html for your code to take hold...
The float:right; element should be before the center aligned element.
body {
padding: 0;
margin: 0;
font-family: Arial, sans-serif;
font-size: 14px;
color: #333;
}
p {
line-height: 1.65em;
margin: 0 0 1em 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0 0 1em 0;
font-weight: normal;
}
/* BUTTON CONTAINER */
#buttoncointainer {
width: 100%;
}
.buttontext {
font-size: 175%;
font: #fff;
}
/* LEFT BUTTON */
#arrowleft {
float: left;
width: 20%;
height: 40px;
background: #FFFFFF;
border: 1px solid #005698;
margin-right: 3px;
position: relative;
}
#arrowleft:hover {
float: left;
width: 20%;
height: 40px;
background: #ECECEC;
}
.leftarrow {
float: left;
width: 100%;
display: table-cell;
vertical-align: middle;
text-align: center;
height: 40px;
}
.leftarrow a:hover {
color: #006ec3;
}
.leftarrow a {
text-decoration: none;
color: #fff;
}
/* SHARE BUTTON */
#sharebutton {
width: 40%;
margin: 0 auto;
text-align: center;
background: #005698;
height: 40px;
border: 1px solid #005698;
}
#sharebutton:hover {
width: 40%;
text-align: center;
background: #006ec3;
height: 40px;
}
.fb-share-text {
color: #fff;
text-align: center;
}
.sbutton {
margin: 0 auto;
}
.sbutton a {
text-decoration: none;
display: block
}
.sbutton a:hover {
text-decoration: none;
display: block;
color: #006ec3;
}
/* RIGHT BUTTON */
#arrowright {
float: right;
width: 20%;
height: 40px;
background: #FFFFFF;
border: 1px solid #005698;
margin-left: 3px;
position: relative;
}
#arrowright:hover {
float: right;
width: 20%;
height: 40px;
background: #ECECEC;
}
.rightarrow {
float: right;
width: 100%;
display: table-cell;
vertical-align: middle;
text-align: center;
height: 40px;
}
.rightarrow a:hover {
color: #006ec3;
}
.rightarrow a {
text-decoration: none;
color: #fff;
}
<div id="buttoncointainer">
<div id="arrowleft">
<div class="leftarrow">
<p class="buttontext">
◄
</p>
</div>
</div>
<div id="arrowright">
<div class="rightarrow">
<p class="buttontext">
►
</p>
</div>
</div>
<div id="sharebutton">
<div class="sbutton">
<p class="buttontext">
Share
</p>
</div>
</div>
</div>
I've made you a fiddle here http://jsfiddle.net/vmb0sfag/3/
Use float left on your main elements:
body {
padding: 0;
margin: 0;
font-family: Arial, sans-serif;
font-size: 14px;
color: #333;
}
p {
line-height: 1.65em;
margin: 0 0 1em 0;
}
h1, h2, h3, h4, h5, h6 {
margin: 0 0 1em 0;
font-weight: normal;
}
/* BUTTON CONTAINER */
#buttoncointainer {
width: 100%;
}
.buttontext {
font-size: 175%;
font: #fff;
}
/* LEFT BUTTON */
#arrowleft {
float: left;
width: 20%;
height: 40px;
background: #FFFFFF;
border: 1px solid #005698;
margin-right: 3px;
position: relative;
float: left;
}
#arrowleft:hover {
float: left;
width: 20%;
height: 40px;
background: #ECECEC;
}
.leftarrow {
float: left;
width: 100%;
display: table-cell;
vertical-align: middle;
text-align: center;
height: 40px;
float: left;
}
.leftarrow a:hover {
color: #006ec3;
}
.leftarrow a {
text-decoration:none;
color: #fff;
}
/* SHARE BUTTON */
#sharebutton {
float: left;
width: 40%;
margin: 0 auto;
text-align: center;
background: #005698;
height: 40px;
border: 1px solid #005698;
}
#sharebutton:hover {
width: 40%;
text-align: center;
background: #006ec3;
height: 40px;
}
.fb-share-text {
color: #fff;
text-align: center;
}
.sbutton {
margin: 0 auto;
}
.sbutton a {
text-decoration:none;
display:block
}
.sbutton a:hover {
text-decoration:none;
display:block;
color: #006ec3;
}
/* RIGHT BUTTON */
#arrowright {
float: right;
width: 20%;
height: 40px;
background: #FFFFFF;
border: 1px solid #005698;
margin-left: 3px;
position: relative;
float: left;
}
#arrowright:hover {
float: left;
width: 20%;
height: 40px;
background: #ECECEC;
}
.rightarrow {
float: right;
width: 100%;
display: table-cell;
vertical-align: middle;
text-align: center;
height: 40px;
}
.rightarrow a:hover {
color: #006ec3;
}
.rightarrow a {
text-decoration:none;
color: #fff;
}