I'm getting different results on my legend centering across browsers:
Should be like this:
But instead I get different margins on other browsers:
HTML
<div class="teaser-header">
<fieldset class="teaser-fieldset">
<legend class="teaser-legend">We are a very passionate team</legend>
<h1>Who we are</h1>
</fieldset>
</div>
CSS
.teaser-header {
padding-top: 70px;
}
.teaser-fieldset {
border: 1px solid white;
color: white;
text-align: center;
width: 400px;
margin: auto;
}
.teaser-fieldset h1 {
color: white;
text-align: center;
margin: 0;
padding-bottom: 20px;
font-family: "Montserrat";
}
.teaser-legend {
padding: 0 10px;
width: 80%;
margin-left: auto;
margin-right: auto;
color: white;
font-size: 1em;
text-transform: uppercase;
margin-bottom: 0;
}
Any ideas? Thanks!
Setting the margin-left and margin-right explicitly as 10% seems to fix the centering issue. The 10% value is nothing but half of (100% - width).
.teaser-header {
padding-top: 70px;
}
.teaser-fieldset {
border: 1px solid white;
color: white;
text-align: center;
width: 400px;
margin: auto;
}
.teaser-fieldset h1 {
color: white;
text-align: center;
margin: 0;
padding-bottom: 20px;
font-family: "Montserrat";
}
.teaser-legend {
/* padding: 0 10px; remove this */
width: 80%;
margin-left: 10%; /* change this */
margin-right: 10%; /* change this */
color: white;
font-size: 1em;
text-transform: uppercase;
margin-bottom: 0;
text-align: center; /* add this */
}
body {
background: black;
}
<div class="teaser-header">
<fieldset class="teaser-fieldset">
<legend class="teaser-legend">We are a very passionate team</legend>
<h1>Who we are</h1>
</fieldset>
</div>
Related
I am making a sidebar for my site and I want the side bar to fill the rest of the screen but also scroll separate to the right of the screen when it overflows with other elements inside. When I use 100% for the height the element only goes to the height of the last element inside of it.
I am trying to get it to fill the rest of the screen as I stated previously but it only goes to not all the way.
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.main {
margin-left: 345px;
border: 0px solid #ffffff;
padding: 0px 0px;
flex-direction: column;
align-content: center;
text-align: center;
width: 450px;
}
.card {
display: inline-block;
width: 400px;
height: 160px;
background-color: #404040;
border: 1px solid #404040;
border-radius: 4px;
margin: 0px;
margin-top: 20px;
text-decoration: none;
}
.toptext {
display: inline-block;
width: 400px;
height: 45px;
color: #ffffff;
background-color: #ffffff;
border: 1px solid #ffffff;
border-radius: 4px;
margin: 0px;
margin-top: 5px;
text-decoration: none;
text-align: left;
}
.toptext h1 {
font-size: 20px;
margin-left: 0px;
margin-top: 1px;
color: #404040;
}
.toptext p {
font-size: 12px;
margin-left: 0px;
margin-top: -10px;
color: #404040;
}
.flexcolumn {
flex-direction: column;
}
.leftmain {
height: 100%;
width: 325px;
padding: 0px 10px;
flex-direction: column;
align-content: center;
background-color: #333333;
overflow: scroll;
}
.leftmain p {
float: left;
color: #ffffff;
text-align: left;
padding: 0px 10px;
text-decoration: none;
font-size: 12px;
line-height: 25px;
border-radius: 4px;
background-color: #333333;
width: 300px;
}
.leftmain p:hover {
background-color: #404040;
color: #ffffff;
}
.header {
overflow: hidden;
background-color: #404040;
padding: 10px 10px;
height: 36px;
text-align: center;
}
.header-right {
float: right;
padding: 0px 0px;
}
.header a {
float: left;
color: #ffffff;
text-align: center;
padding: 5px 10px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
align-content: center;
}
.header a:hover {
background-color: #333333;
color: #ffffff;
}
<div class="header">
📄 My Paper Company
<div class="header-right">
Settings
Contact
Donate
<div class="flexcolumn">
</div>
</div>
</div>
<div id="leftmain" class="leftmain">
<p id="button" div="leftmain" onclick='show("htpmain")'>📢 How To Play</p>
</div>
<center>
<div id=htpmain class="main">
<div class="toptext">
<h1>
📢 How To Play
</h1>
<p>This guide will get you start the game and will be helpful to grasp everything you need to do.
</p>
</div>
<div class="card" />
</div>
</center>
Your leftmain IS taking up 100% of the space available to it, leftmain stops when it reaches . You have leftmain set to flex-direction: column;
when only the .main should have it. Also don't use the tag, it is no longer supported in HTML5 and is display: block; when it should be inline-block.
I would change just to and set display to inline-block and set a width so the leftmain has room to go past it.
I hope this solves your problem.
.leftmain {
height: 100%;
width: 325px;
padding: 0px 10px;
align-content: center;
background-color: #333333;
overflow: scroll;
}
#nameOfCenterDiv {
position: absolute;
left: 300px;
display: inline-block;
}
Give to the sidebar a position fixed so it always stays there wherever you scroll and and a margin-left to your content on the right (the width of the margin-left must be the same of sidebar width)
.leftmain{
position: fixed
}
.main{
margin-left: 345px;
width: 450px //remove this so it's 100%
}
You have to wrap the left sidebar and right panel within the same container.
Using the display: flex on the container, you no longer need to specify a 100% height for the left sidebar since it will automatically fill in the remaining space.
You also need to remove the margin-left rule for the right content so that it lays nicely with the sidebar.
You can optionally set a max-height of 100vh to the sidebar so that it scrolls when its content exceeds the viewport height.
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.main {
border: 0px solid #ffffff;
padding: 0px 0px;
flex-direction: column;
align-content: center;
text-align: center;
width: 450px;
}
.card {
display: inline-block;
width: 400px;
height: 160px;
background-color: #404040;
border: 1px solid #404040;
border-radius: 4px;
margin: 0px;
margin-top: 20px;
text-decoration: none;
}
.toptext {
display: inline-block;
width: 400px;
height: 45px;
color: #ffffff;
background-color: #ffffff;
border: 1px solid #ffffff;
border-radius: 4px;
margin: 0px;
margin-top: 5px;
text-decoration: none;
text-align: left;
}
.toptext h1 {
font-size: 20px;
margin-left: 0px;
margin-top: 1px;
color: #404040;
}
.toptext p {
font-size: 12px;
margin-left: 0px;
margin-top: -10px;
color: #404040;
}
.flexcolumn {
flex-direction: column;
}
.container {
display: flex;
}
.leftmain {
width: 325px;
padding: 0px 10px;
flex-direction: column;
align-content: center;
background-color: #333333;
overflow: scroll;
}
.leftmain p {
float: left;
color: #ffffff;
text-align: left;
padding: 0px 10px;
text-decoration: none;
font-size: 12px;
line-height: 25px;
border-radius: 4px;
background-color: #333333;
width: 300px;
}
.leftmain p:hover {
background-color: #404040;
color: #ffffff;
}
.header {
overflow: hidden;
background-color: #404040;
padding: 10px 10px;
height: 36px;
text-align: center;
}
.header-right {
float: right;
padding: 0px 0px;
}
.header a {
float: left;
color: #ffffff;
text-align: center;
padding: 5px 10px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
align-content: center;
}
.header a:hover {
background-color: #333333;
color: #ffffff;
}
<div class="header">
📄 My Paper Company
<div class="header-right">
Settings
Contact
Donate
<div class="flexcolumn">
</div>
</div>
</div>
<div class="container">
<div id="leftmain" class="leftmain">
<p id="button" div="leftmain" onclick='show("htpmain")'>📢 How To Play</p>
</div>
<center>
<div id=htpmain class="main">
<div class="toptext">
<h1>
📢 How To Play
</h1>
<p>This guide will get you start the game and will be helpful to grasp everything you need to do.
</p>
</div>
<div class="card" />
</div>
</center>
</div>
I'm trying to create a description box for a website in React. The image below is the desired look:
but when I resize the screen to be large, the h1 tag doesn't seem to hold its absolute position anymore. I would like the box to resize like it has with the screen but the "Project 1" title should stay in the same place.
The CSS code to produce the images is:
body {
font-family: sans-serif;
margin: 0 auto;
padding: 25px;
max-width: 800px;
min-width: 400px;
background-color: #e0e0e0;
text-align: center;
}
.card {
position: relative;
padding: 25px 0px;
background-color: #ffffff;
margin: 50px 0;
text-align: left;
}
.top {
height: 100px;
width: 100%;
background-color: #69143a;
position: absolute;
top: 0;
left: 0;
display: flex;
}
h1 {
position: relative;
display: flex;
}
.name {
font-size: 2em;
color: #ffffff;
display: flex;
flex: 1;
margin: 10% 25px 0;
}
.supervisor {
font-size: 1em;
margin: 20px 20px;
color: #353535;
}
.bottom {
margin-top: 100px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 10px;
color: #353535;
}
.info {
margin: 20px 20px;
}
.subjects {
margin: 20px 20px;
font-style: italic;
}
and the React component is:
function Project(props) {
return (
<div className="card">
<div className="top">
<h2 className="name">{props.title}</h2>
</div>
<div className="bottom">
<h4 className="supervisor">Supervisor: {props.supervisor}</h4>
<p className="info">{props.description}</p>
<p className="subjects">Prerequisites: {props.subjects}</p>
</div>
</div>
)
}
Any help would be greatly appreciated - been banging my head on the wall all day trying to get it to format correctly.
The root of the issue is the dynamic margin you had set on .name. You can remove that and also remove the position: absolute; and exchange it with relative. Then remove the top padding on .card and you are good to go.
body {
font-family: sans-serif;
margin: 0 auto;
padding: 25px;
max-width: 800px;
min-width: 400px;
background-color: #e0e0e0;
text-align: center;
}
.card {
position: relative;
padding: 0px 0px 25px 0px;
background-color: #ffffff;
margin: 50px 0;
text-align: left;
}
.top {
width: 100%;
background-color: #69143a;
position: relative;
top: 0;
left: 0;
text-align: center;
}
h1 {
position: relative;
display: flex;
}
.name {
font-size: 2em;
color: #ffffff;
padding: 30px;
}
.supervisor {
font-size: 1em;
margin: 20px 20px;
color: #353535;
}
.bottom {
margin-top: 100px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 10px;
color: #353535;
}
.info {
margin: 20px 20px;
}
.subjects {
margin: 20px 20px;
font-style: italic;
}
<div class="card">
<div class="top">
<h2 class="name">{props.title}</h2>
</div>
<div class="bottom">
<h4 class="supervisor">Supervisor: {props.supervisor}</h4>
<p class="info">{props.description}</p>
<p class="subjects">Prerequisites: {props.subjects}</p>
</div>
</div>
I have this website with a showcase div, within the div I have a "Get Started" button. I am able to vertically align the button with the margin attribute. However I do not want to horizontally align the button with margin as this will lead to some trouble for me in the future, I've tried align: center; and align="center" but the button sticks to the left side of the showcase. How can I unstick this button and horizontally align it without having to use a margin attribute?
html,
body,
header {
position: absolute;
left: 0;
top: 0;
width: 100%;
margin: 0;
margin-top: 0;
margin: auto;
padding: 0;
}
h1 {
display: inline-block;
font-family: Trebuchet MS;
font-size: 75px;
letter-spacing: 3px;
margin: 10px 0px 0px 20px;
}
h2 {
display: inline-block;
flex-direction: row;
margin: 0px 0px 0px 50px;
font-family: Georgia;
}
.highlight {
color: #45d845;
}
.heading {
background-color: #d84545;
border-bottom: 5px solid black;
padding-top: 20px;
padding-bottom: 20px;
}
#comet {
font-size: 65px;
margin-left: 20px;
}
.showcase {
background: url('background1.jpeg');
border-bottom: 5px solid black;
height: 1000px;
width: 100%;
background-size: 100% 100%;
background-repeat: no-repeat;
color: #cccccc;
}
.showcase h2 {
color: #fff;
margin-top: 170px;
font-size: 60px;
font-family: Verdana;
text-align: center;
text-shadow: 1px 3px #000;
}
#start {
align: center;
margin-top: 130px;
background-color: transparent;
color: #fff;
padding: 20px 30px 20px 30px;
text-align: center;
font-family: Helvetica;
font-weight: bold;
border-radius: 10px;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
}
#start:hover {
cursor: pointer;
background-color: #fff;
color: #000;
}
<header>
<div class="heading">
<h1>ThumbTac <span id="comet">☄</span> </h1>
</div>
</header>
<div class="showcase">
<h2>He moonlight difficult engrossed an it sportsmen. Interested has all devonshire difficulty jay assistance joy. Unaffected at ye </h2>
<button id="start" align="center">Get Started</button>
</div>
You can wrap your button in a div with the style text-align: center; to horizontally center your button. Example:
html, body, header{
position:absolute;
left:0;
top:0;
width: 100%;
margin: 0;
margin-top: 0;
margin: auto;
padding: 0;
}
/*Heading*/
h1{
display: inline-block;
font-family: Trebuchet MS;
font-size: 75px;
letter-spacing: 3px;
margin: 10px 0px 0px 20px;
}
h2{
display: inline-block;
flex-direction: row;
margin: 0px 0px 0px 50px;
font-family: Georgia;
}
.highlight{
color: #45d845;
}
.heading{
background-color: #d84545;
border-bottom: 5px solid black;
padding-top: 20px;
padding-bottom: 20px;
}
#comet{
font-size: 65px;
margin-left: 20px;
}
/*Showcase*/
.showcase{
background: url('background1.jpeg');
border-bottom: 5px solid black;
height: 1000px;
width: 100%;
background-size: 100% 100%;
background-repeat: no-repeat;
color: #cccccc;
}
.showcase h2{
color: #fff;
margin-top: 170px;
font-size: 60px;
font-family: Verndana;
text-align: center;
text-shadow: 1px 3px #000;
}
#start{
align: center;
margin-top: 130px;
background-color: transparent;
color: #fff;
padding: 20px 30px 20px 30px;
text-align: center;
font-family: Helvetica;
font-weight: bold;
border-radius: 10px;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
}
#start:hover{
cursor: pointer;
background-color: #fff;
color: #000;
}
<header>
<div class="heading">
<h1>ThumbTac <span id="comet">☄</span> </h1>
</div>
</header>
<div class="showcase">
<h2>He moonlight difficult engrossed an it sportsmen.
Interested has all devonshire difficulty jay
assistance joy. Unaffected at ye </h2>
<div style="text-align: center;">
<button id="start">Get Started</button>
</div>
</div>
You can consider using a flexbox. Documentation in the CSS source.
/* Global Sets */
html,
body,
header {
position: absolute;
left: 0;
top: 0;
width: 100%;
margin: 0;
margin-top: 0;
margin: auto;
padding: 0;
}
/*Heading*/
h1 {
display: inline-block;
font-family: Trebuchet MS;
font-size: 75px;
letter-spacing: 3px;
margin: 10px 0px 0px 20px;
}
h2 {
display: inline-block;
flex-direction: row;
margin: 0px 0px 0px 50px;
font-family: Georgia;
}
.highlight {
color: #45d845;
}
.heading {
background-color: #d84545;
border-bottom: 5px solid black;
padding-top: 20px;
padding-bottom: 20px;
}
#comet {
font-size: 65px;
margin-left: 20px;
}
/*Showcase*/
.showcase {
background: url('background1.jpeg');
border-bottom: 5px solid black;
height: 1000px;
width: 100%;
background-size: 100% 100%;
background-repeat: no-repeat;
color: #cccccc;
display: flex; /* Added */
flex-direction: column; /* Added */
align-items: center; /* Added, horizonal alignment */
}
.showcase h2 {
color: #fff;
margin-top: 170px;
font-size: 60px;
font-family: Verndana;
text-shadow: 1px 3px #000;
text-align: center;
}
#start {
/* align: center; Not valid CSS */
margin-top: 130px;
background-color: transparent;
color: #fff;
padding: 20px 30px 20px 30px;
/* text-align: center; No longer required */
font-family: Helvetica;
font-weight: bold;
border-radius: 10px;
-webkit-transition-duration: 0.4s;
/* Safari */
transition-duration: 0.4s;
}
#start:hover {
cursor: pointer;
background-color: #fff;
color: #000;
}
<header>
<div class="heading">
<h1>ThumbTac <span id="comet">☄</span> </h1>
</div>
</header>
<div class="showcase">
<h2>He moonlight difficult engrossed an it sportsmen. Interested has all devonshire difficulty jay assistance joy. Unaffected at ye </h2>
<button id="start" align="center">Get Started</button>
</div>
I am working on a calculator layout and have a small issue with the layout. On the right side of the calculator, the black spacing on the edge of the calculator is slightly off. I've been banging my head trying to figure it out and was hoping that I could get some assistance with it. I have attached the link to the codepen for your review.
Click here to go to my Codepen
My CSS code is listed below:
.button-container > a {
width: 50px;
height: 50px;
float: left;
margin: 0 auto;
padding: 0;
display: inline-block;
line-height: 50px;
text-align: center;
color: white;
font-family: 'Roboto', serif;
background: #333333;
margin: 1px;
text-decoration: none;
#import url('https://fonts.googleapis.com/css?family=Merriweather:700|Roboto');
.button-container {
width: 209px;
height: 255px;
background: #1a1a1a;
border-bottom-left-radius: .5em;
border-bottom-right-radius: .5em;
}
.button-container > a {
width: 51px;
height: 50px;
float: left;
margin: 0 auto;
padding: 0;
display: inline-block;
line-height: 50px;
text-align: center;
color: white;
font-family: 'Roboto', serif;
background: #333333;
margin: 1px 0px 0px 1px;
text-decoration: none;
}
.calc-container{
height: 129px;
width: 209px;
background: black;
padding: 8em 0em ;
border-radius: .5em;
}
body {
background: #25383C;
margin: 10em 0 10em 40em;
}
.button-container .buttonE {
width: 51px;
height: 100px;
float: right;
margin: 0 auto ;
padding: 0px;
line-height: 50px;
text-align: center;
color: white;
font-family: 'Roboto', serif;
background: #333333;
margin: 1px;
text-decoration: none;
border-bottom-right-radius: .5em;
}
.button-container .button0 {
width: 155px;
height: 48px;
float: left;
line-height: 50px;
text-align: center;
color: white;
font-family: 'Roboto', serif;
background: #333333;
margin: 1px 0px 0px 1px;
text-decoration: none;
border-bottom-left-radius: .5em;
}
#blue {
color: #008b8b;
}
Please use the above CSS
there was margin issue *.button-container .buttonE *
I want to sharpen my HTML & CSS skills by recreating the Bootstrap homepage in pure HTML & CSS. I am almost finished, but I seem to be having trouble with my footer. Everything else is positioned the way I would like it, but everything on the footer shoots up to the top and middle of my page. Can anyone tell me what I am missing here?
HTML
<header>
<div class="top-bar">
<p>Aww yeah, Bootstrap 4 is coming!</p>
</div>
<nav>
<div class="nav-bar">
<div class="logo">
Bootstrap
</div>
<div class="left-nav">
<ul>
<li>Getting Started</li>
<li>CSS</li>
<li>Components</li>
<li>JavaScript</li>
<li>Customize</li>
</ul>
</div>
<div class="right-nav">
<ul>
<li>Themes</li>
<li>Expo</li>
<li>Blog</li>
</ul>
</div>
</div>
<nav>
</header>
</div>
<center>
<main>
<section>
<div class="head-component">
<div class="b-logo">
<p>B</p>
</div>
<div class="short-description">
<p>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.</p>
</div>
<div class="download-button">
<button class="dwn">Download Bootstrap</button>
</div>
<div class="current">
<p>Currently v3.3.5</p>
</div>
</div>
</section>
<section>
<div class="mid-section">
<div class="mid-info">
<h2>Designed for everyone, everywhere.</h2>
<p>Bootstrap makes front-end web development faster and easier. It's made for folks of all skill levels, devices of all shapes, and projects of all sizes.</p>
</div>
<hr class="hz-line" />
<div class="column-left">
<img src="http://getbootstrap.com/assets/img/sass-less.png" />
<h4>Preprocessors</h4>
<p>Bootstrap ships with vanilla CSS, but its source code utilizes the two most popular CSS preprocessors, Less and Sass. Quickly get started with precompiled CSS or build on the source.</p>
</div>
<div class="column-middle">
<img src="http://getbootstrap.com/assets/img/devices.png" />
<h4>One framework, every device.</h4>
<p>Bootstrap easily and efficiently scales your websites and applications with a single code base, from phones to tablets to desktops with CSS media queries.</p>
</div>
<div class="column-right">
<img src="http://getbootstrap.com/assets/img/components.png" />
<h4>Full of features</h4>
<p>With Bootstrap, you get extensive and beautiful documentation for common HTML elements, dozens of custom HTML and CSS components, and awesome jQuery plugins.</p>
</div>
<div class="clear"></div>
<hr class="hz-line" />
<div class="github">
<p>Bootstrap is open source. It's hosted, developed, and maintained on GitHub.</p>
</div>
<div class="github-button">
<button class="view-git">View the Github Project</button>
</div>
<div class="clear"></div>
<div class="spacer"></div>
<div class="clear"></div>
<div class="photo-section">
<hr class="hrln-full" />
<div class="second-mid-info">
<h2>Built with Bootstrap.</h2>
<p>Millions of amazing sites across the web are being built with Bootstrap. Get started on your own with our growing collection of examples or by exploring some of our favorites.</p>
</div>
<hr class="hz-line" />
<div class="photos">
<img src="http://expo.getbootstrap.com/thumbs/lyft-thumb.jpg" />
<img src="http://expo.getbootstrap.com/thumbs/vogue-thumb.jpg" />
<img src="http://expo.getbootstrap.com/thumbs/riot-thumb.jpg" />
<img src="http://expo.getbootstrap.com/thumbs/newsweek-thumb.jpg" />
</div>
<hr class="hz-line" />
<div class="expo-button">
<p>We showcase dozens of inspiring projects built with Bootstrap on the Bootstrap Expo.</p>
<button class="expo">Explore the Expo</button>
</div>
<hr class="hrln-full" />
</div>
</div>
<div class="clearfooter"></div>
</section>
</main>
<div class="clear"></div>
<footer>
<p>Designed and built with all the love in the world by #mdo and #fat.
<br /> Maintained by the core team with the help of our contributors.
<br /> Code licensed under MIT, documentation under CC BY 3.0.</p>
<ul>
<li>Github</li>
<li>Examples</li>
<li>v2.3.2 docs</li>
<li>About</li>
<li>Expo</li>
<li>Blog</li>
<li>Releases</li>
</ul>
</footer>
</center>
CSS
*, *:before, *:after {
box-sizing: border-box;
}
html, body, #wrap {
height: 100%;
}
body {
margin: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
background-color: #fff;
}
h1 {
font-size: 50px;
}
h2 {
font-size: 40px;
}
h3 {
font-size: 30px;
}
h4 {
font-size: 22px;
font-weight: 100px;
}
h5 {
font-size: 15px;
}
h6 {
font-size: 14px;
}
#container {}
ul {
list-style: none;
}
li {
list-style: none;
display: inline;
padding: 10px;
}
a {
list-style: none;
color: inherit;
text-decoration: none;
padding-top: 15px;
padding-bottom: 15px;
margin: 0;
}
main {
padding-bottom: 150px;
display: block;
margin: 0 auto;
}
.top-bar {
margin: 0;
padding: 15px 0;
background-color: #0275D8;
text-align: center;
}
.top-bar p {
color: #fff;
font-size: 15px;
font-weight: 600;
text-align: center;
margin: 0;
}
.top-bar:hover {
margin: 0;
padding: 15px 0;
background-color: #0269C2;
text-align: center;
}
.nav-bar {
background-color: #fff;
position: relative;
color: #583F7E;
display: block;
width: 100%;
height: 50px;
}
.logo {
position: absolute;
font-size: 20px;
font-weight: 700;
color: #583F7E;
padding: 15px;
line-height: 0.8em;
margin-left: 100px;
}
.left-nav {
float: left;
font-size: 15px;
font-weight: 500;
text-align: center;
margin-left: 200px;
}
.right-nav {
float: right;
text-align: right;
font-size: 15px;
font-weight: 500;
margin-right: 120px;
}
.left-nav a:hover {
background-color: #f9f9f9;
}
.right-nav a:hover {
background-color: #f9f9f9;
}
.head-component {
background-color: #583F7E;
height: 700px;
display: block;
margin: 0 auto;
}
.b-logo {
margin: 0 auto;
padding-top: 5px;
width: 160px;
height: 300px;
display: block;
}
.b-logo p {
font-size: 130px;
font-weight: 700;
color: #fff;
border: 1px solid #fff;
border-radius: 25px;
text-align: center;
}
.short-description {}
.short-description p {
font-size: 30px;
color: #fff;
font-weight: 300;
width: 850px;
text-align: center;
display: block;
margin: 0 auto;
padding-top: 40px;
}
.download-button {
padding-top: 40px;
}
.dwn {
background: none;
font-size: 20px;
padding: 15px;
color: #fff;
font-weight: 400;
border: 1px solid #fff;
border-radius: 5px;
text-align: center;
display: block;
margin: 0 auto;
}
.dwn:hover {
background: #fff;
font-size: 20px;
padding: 15px;
color: #583F7E;
font-weight: 400;
border: 1px solid #fff;
border-radius: 5px;
text-align: center;
display: block;
margin: 0 auto;
}
.current p {
color: #9781A9;
font-size: 14px;
padding-bottom: 75px;
padding-top: 20px;
display: block;
margin: 0 auto;
text-align: center;
}
.mid-section {
height: 100%;
background-color: #fff;
display: block;
margin: 0 auto;
}
.mid-info {
padding-top: 75px;
font-weight: 300;
color: #333;
width: 900px;
text-align: center;
display: block;
margin: 0 auto;
}
.mid-info p {
font-weight: 400;
font-size: 22px;
color: #555;
padding-bottom: 20px;
display: block;
margin: 0 auto;
text-align: center;
}
.hz-line {
width: 10%;
color: #f3f3f3;
opacity: 0.5;
}
.column-left {
width: 32%;
float: left;
padding-top: 25px;
padding-left: 75px;
font-weight: 100;
color: #333;
}
.column-left img {
width: 100%;
}
.column-left p {
font-weight: 400;
font-size: 16px;
color: #555;
padding-bottom: 20px;
}
.column-middle {
width: 32%;
float: left;
padding-top: 25px;
padding-left: 75px;
font-weight: 100;
color: #333;
}
.column-middle img {
width: 100%;
}
.column-middle p {
font-weight: 400;
font-size: 16px;
color: #555;
padding-bottom: 20px;
}
.column-right {
width: 32%;
float: left;
padding-top: 25px;
padding-left: 75px;
font-weight: 100;
color: #333;
}
.column-right img {
width: 100%;
}
.column-right p {
font-weight: 400;
font-size: 16px;
color: #555;
padding-bottom: 20px;
}
.clear {
clear: both;
}
.github {
padding-top: 15px;
font-weight: 300;
color: #333;
width: 1024px;
display: block;
margin: 0 auto;
text-align: center;
}
.github p {
font-weight: 400;
font-size: 18px;
color: #555;
padding-bottom: 20px;
text-align: center;
}
.view-git {
background: none;
font-size: 20px;
padding: 10px;
color: #583F7E;
font-weight: 400;
border: 1px solid #583F7E;
border-radius: 5px;
text-align: center;
display: block;
margin: 0 auto;
}
.view-git:hover {
background: #583F7E;
font-size: 20px;
padding: 10px;
color: #fff;
font-weight: 400;
border: 1px solid #fff;
border-radius: 5px;
text-align: center;
display: block;
margin: 0 auto;
}
.hrln-full {
color: #f3f3f3;
opacity: 0.5;
}
.spacer {
height: 60px;
}
.second-mid-info {
padding-top: 75px;
font-weight: 300;
color: #333;
width: 900px;
display: block;
margin: 0 auto;
text-align: center;
}
.second-mid-info p {
font-weight: 400;
font-size: 22px;
color: #555;
text-align: center;
display: block;
margin: 0 auto;
padding-bottom: 30px;
}
.photo-section {
height: 100%;
display: block;
margin: 0 auto;
}
.photos {
padding: 30px;
padding-left: 115px;
}
.photos img {
width: 23%;
}
.expo-button {
padding-top: 15px;
padding-bottom: 120px;
font-weight: 300;
color: #333;
width: 1024px;
display: block;
margin: 0 auto;
}
.expo-button p {
font-weight: 300;
font-size: 22px;
color: #555;
padding-bottom: 30px;
text-align: center;
display: block;
margin: 0 auto;
}
.expo {
background: none;
font-size: 20px;
padding: 10px;
color: #583F7E;
font-weight: 400;
border: 1px solid #583F7E;
border-radius: 5px;
text-align: center;
display: block;
margin: 0 auto;
}
.expo:hover {
background: #583F7E;
font-size: 20px;
padding: 10px;
color: #fff;
font-weight: 400;
border: 1px solid #fff;
border-radius: 5px;
text-align: center;
display: block;
margin: 0 auto;
}
.clearfooter {
height: 130px;
clear: both;
}
footer {
text-align: center;
bottom: 0;
height: 100%;
left: 0;
width: 100%;
display: block;
margin: 0 auto;
}
footer p {
text-align: center;
}
footer ul {
position: relative;
}
footer li {
color: #489FD6;
}
footer li:hover {
color: #23517C;
text-decoration: underline;
}
footer a {}
From what I can tell I believe its because of two main reasons.
You have set fixed heights for elements with content that is height than the fixed height.
.mid-section {
height: 500px;
background-color: #fff;
margin: 0;
}
.photo-section {
height:500px;
}
The footer has position: absolute but isn't contained by a parent with position: relative. If you would like the footer to stick to the bottom use position: fixed instead.
footer {
text-align: center;
bottom: 0;
height: 100px;
left: 0;
position: absolute;
width: 100%;
}