I'm designing a website, and I'm currently trying to do the part regarding the footer. So far I haven't had any troubles, till I decided to do the footer layout.
To be precise: I want to divide the footer into three separate columns as shown on the image below:
Yet the outcome is this:
As you can see, the footer column does not hold it's width and just stretches to the content. For different settings other things happened, but it never appeared proper to me.
My current, non working approach:
HTML
<html>
<!-- BEGIN HEAD -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<!-- Start WOWSlider.com HEAD section -->
<link rel="stylesheet" type="text/css" href="engine0/style.css" />
<script type="text/javascript" src="engine0/jquery.js"></script>
<!-- End WOWSlider.com HEAD section -->
</head>
<!-- END HEAD -->
<!-- BEGIN BODY -->
<body>
<!-- BEGIN WRAPPER FOR FOOTER PUSHING -->
<div class="wrapper">
<!-- BEGIN .PAGE -->
<div class="page">
<!-- BEGIN .LOGO -->
<div class="logo">
<img class="logoBB" src="images/logo.png">
<br><text class="logosub">Tworzymy Dla Ciebie</text></br>
</div>
<!-- END .LOGO -->
<!-- BEGIN .MENU -->
<div class="menu">
<hr class="top_line">
<ul>
<li>O NAS</li>
<li>GALERIA PRODUKTÓW</li>
<li>AKTUALNOŚCI</li>
<li>ZADAJ PYTANIE</li>
<li>KONTAKT</li>
</ul>
<hr class="bottom_line">
</div>
<!-- END .MENU -->
<!-- Start WOWSlider.com BODY section --> <!-- add to the <body> of your page -->
<div id="wowslider-container0">
<div class="ws_images"><ul>
<li><img src="data0/images/slide1.png" alt="http://wowslider.net/" title="WOOD" id="wows0_0"/></li>
<li><img src="data0/images/3025992posterpdesignwork.jpg" alt="CUBES" title="CUBES" id="wows0_1"/></li>
</ul></div>
<div class="ws_bullets"><div>
<span><img src="data0/tooltips/slide1.png" alt="WOOD"/>1</span>
<span><img src="data0/tooltips/3025992posterpdesignwork.jpg" alt="CUBES"/>2</span>
</div></div><div class="ws_script" style="position:absolute;left:-99%">wowslider.com by WOWSlider.com v8.6</div>
<div class="ws_shadow"></div>
</div>
<script type="text/javascript" src="engine0/wowslider.js"></script>
<script type="text/javascript" src="engine0/script.js"></script>
<!-- End WOWSlider.com BODY section -->
</div>
<!-- END .PAGE -->
<!-- FOOTER PUSHER -->
<div class="push"></div>
</div>
<!-- END .WRAPPER -->
<!-- BEGIN FOOTER -->
<div class="footer">
<!-- BEGIN FOOTER CONTAINER -->
<div class="footer_container">
<!-- BEGIN .FINDUS -->
<div class="findus">
</div>
<!-- END .FINDUS -->
<!-- BEGIN .DESIGNERS -->
<div class="designers">
</div>
<!-- END .DESIGNERS -->
<!-- BEGIN .INSPIRATIONS -->
<div class="inspirations">
</div>
<!-- END .INSPIRATIONS -->
</div>
<!-- END FOOTER CONTAINER -->
</div>
<!-- END FOOTER -->
</body>
<!-- END BODY -->
CSS
/* GENERAL PAGE SETTINGS */
* {
margin: 0;
padding: 0;
}
.page {
margin: 25px auto;
width: 960px;
}
/* WRAPPER & HTML SETTINGS */
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -168px;
}
.footer, .push {
height: 168px; /* .push must be the same height as .footer */
}
/* FOOTER SETTINGS */
.footer {
clear: both;
width: 100%;
background-color: #323232;
}
.footer_container {
width: 960px;
margin: 0 auto;
background-color: red;
}
.footer .findus {
float: left;
width: 33,33333%;
}
.footer .designers {
float: left;
width: 33,33333%;
background-color: red;
}
.footer .inspirations {
float: left;
width: 33,33333%;
}
/* LOGO SETTINGS */
img.logoBB {
margin: 0 28.95833333333333%;
}
.logosub {
font-family: Federant;
font-size: 17.83px;
color: #94979b;
padding: 0 40.625%;
}
/* MENU SETTINGS */
.menu {
margin: 0 90px;
}
.menu ul {
text-align: center;
list-style-type: none;
margin: 17px auto;
}
.menu li {
display: inline-block;
}
.menu a {
color: black;
text-decoration: none;
font-family: slabo;
font-size: 18px;
}
.menu .top_line {
width: 780px;
margin: 32px 0 0;
height: 2px;
color: black;
background-color: black;
}
.menu .bottom_line {
width: 780px;
margin: 0 0 40px;
height: 3px;
color: black;
background-color: black;
}
What I have tried (none worked):
Applying table to a footer
Using left, right and center float (in that order) with both % values and pixel values
Tried fixed values of everything in footer (this worked) yet I'm aiming to make this website responsive so that is not the way to go by any means.
If you happen to notice any other mistakes I have made, I'd be grateful for pointing them out.
Your footer columns need to have position: relative for them to become columns. Also, you have commas in your width percentages that need to be decimals. So each footer css would be as follows (with their correct class names, of course--I just grabbed one as an example):
.footer .inspirations {
float: left;
width: 33.33333%;
position: relative;
}
See Codepen
.findus, .designers, .inspirations{
display:inline-block;
position:relative;
width:calc(100% / 3);
}
Also, your three footer divs are inside the .footer_contatiner div, which has a max-width set to it. Put them outside the wrapper if you want it to extend 100% of the page width.
Try using inline / inline-block. You'd just change a few lines in the container and in each column:
.footer_container {
width: 960px;
margin: 0 auto;
background-color: red;
display: inline;
}
.footer .findus {
display: inline-block;
width: 33,33333%;
}
.footer .designers {
display: inline-block;
width: 33,33333%;
background-color: red;
}
.footer .inspirations {
display: inline-block;
width: 33,33333%;
}
Related
Hi i am trying to create a blog website and i have problem that i divided page section in 3 parts i want 1,3 part section height should be equal to 2part(content part) height how to do that i tried many times but not happening
attaching screenshot of output i highlighted the part where i don't want text.
i know solution by bootstrap and js but i want from html/css
function myfucn(){
var a = document.querySelector(".content");
var b = document.querySelector(".left");
a.innerHeight() = window.innerHeight();
}
*{
padding:0px;
box-shadow: none;
margin: 0px;
}
.top{
width: cover;
height: 200px;
text-align: center;
}
.left{
text-align: center;
height: 100%;
float: left;
width: 200px;
background-color: green;
}
.right{
float: right;
width: 200px;
height: 500px;
}
.bottom{
position:fixed;
bottom: 0;
}
a{
text-decoration: none;
padding-right: 30px;
}
ul li{
list-style: none;
display: inline-block;
}
.name{
text-align: left;
padding-left: 30px;
top: -10px;
}
.name:hover{
color: red;
}
.namedes{
text-align: left;
padding-left: 35px;
}
.authorimg:hover{
transition: 2s;
transition-property: fade-in;
transform:rotate(10deg);
}
.googletranslate{
padding-top: 10px;
font-weight: 10;
}
.hackingsubmenu{
width: 100px;
height: 50px;
background-color: transparent;
font-size: 10px;
list-style: none;
text-align: left;
display: none;
}
/*.hacking:hover .hackingsubmenu{
display: block;
}*/
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="top"><!-- top -->
<ul> <!-- links -->
<li>HOME</li>
<li>ABOUT</li>
<li>HACKING
<ul class="hackingsubmenu">
<li>web hacking</li>
<li>app hacking</li>
<li>android hacking</li>
</ul>
</li>
<li>PROGRAMMING</li>
<li>ANDROID</li>
<li>WINTRICKS</li>
<li>SHARE WITH US</li>
<li>DOWNLOAD SOFTWARE</li>
</ul><!-- end of links -->
<div class="jumbotron"><!-- jumbotron -->
<h3 class="name">VAIBHAV'S BLOG</h3>
<p class="namedes">learn ethical hacking in a good way </p>
</div><!-- end of jumbotron -->
</div>
<div class="left"><!-- left -->
<h3>Author</h3>
<img class="authorimg" src="img/All-Time-Popular-Top-15-Hacking-Tool-For-Hackers-2015-Angry-IP-Scanner.png" alt="image" height="200px; width:cover" />
<h3>Categories</h3>
<ul style="list-style:none;">
<li>Android hacking</li><br/>
<li>Web hacking</li>
<li>Application hacking</li>
<li>Software hacking </li>
</ul>
</div><!-- end of left -->
<div class="right"><!-- right -->
<!-- google translate -->
<h4 class="googletranslate" style="text-align: center;" title="you are at right place you can now easily translate your webpage">GOOGLE TRANSLATE</h4>
<!-- google translate end -->
<!-- page counter -->
<h4 class="pagecounter" style="text-align: center;">PAGE COUNTER</h4>
<!-- end of page counter -->
</div>
<div class="bottom"><!-- bottom -->
<h6 class="fa fa-facebook">follow us on fb </h6>
</div>
screenshot of output
Alright, if you don't want to use any lib. You can wrap all your left, center, and right div into one div call middle (any name you like), then you style middle div with width: 100%.
Your content should be inside the center div. Your center div should have style float: left
<div class="middle" style="width: 100%;">
<!-- left -->
<div class="left" width="20%">
left
</div>
<!-- end of left -->
<!-- left -->
<div class="center" style="width: 60%; float: left">
the very long content here
</div>
<!-- right -->
<div class="right" style="width: 20%">
right
</div>
</div>
Use css grid. You don't have to even touch your html structure.
Here it is:
body {
padding: 0px;
margin: 0px;
height: 100vh;
display: grid;
grid-template-columns: 200px auto;
grid-template-rows: auto auto 50px;
background: peru;
}
.top {
grid-column: 1;
grid-row: 1;
text-align: center;
background: #ccc;
}
.left {
grid-column: 1;
grid-row: 2;
text-align: center;
background-color: green;
}
.right {
grid-column: 2;
grid-row: 1 / span 2;
background: yellow;
overflow: auto;
}
.bottom {
background: pink;
grid-column: 1 / span 2;
grid-row: 3;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>LAYOUT</title>
</head>
<body>
<div class="top">
TOP
</div>
<div class="left">
LEFT
</div>
<div class="right">
RIGHT
</div>
<div class="bottom">
BOTTOM
</div>
</body>
</html>
I am working on a flip card for my personal portfolio. I have my divs set to a certain size and I want two in a row, but they won't go to the size I have set and four go in a row instead of the two I want. Here is the all of my code:
/* Whole Page */
body {
margin: 0;
text-align: center;
}
/* Nav */
nav {
display: block;
position: fixed;
background-color: black;
color: white;
width: 100%;
height: 10vh;
border-bottom: solid white 1px;
}
.btns {
display: inline-block;
float: right;
margin-top: -3.25%;
font-family: sans-serif;
width: 30vw;
}
button {
background-color: black;
border: none;
color: white;
display: inline-block;
float: right;
margin-right: 1%;
margin-left: 1%;
font-size: 22px;
cursor: pointer;
}
#logo {
margin-left: 3.5%;
text-align: left;
}
/* Welcome Section */
#welcome-section {
background-image: url(https://www.walldevil.com/wallpapers/a51/2755-city-cityscape-wallpaper-architecture-wallpapers-albums-skylines.jpg);
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
border-bottom: black 3px solid;
}
h1,
#welcome-section p {
width: 50%;
color: white;
text-align: left;
margin: auto;
font-weight: 800;
}
h1 {
font-size: 60px;
padding-top: 25vh;
font-family: sans-serif;
}
#welcome-section p {
font-size: 27px;
font-family: serif;
}
/* Portfolio */
#projects {
width: 55vw;
margin: auto;
}
#projects-h2 {
font-size: 30px;
text-decoration: underline;
}
.flip-card {
width: 25vw;
height: 25vh;
margin: auto;
position: relative;
perspective: 100vw;
float: left;
}
#media (min-width: 600px) and (max-width: 992px) {
.flip-card {
width: 31%;
margin: 1.16%;
}
}
#media (min-width: 992px) {
.flip-card {
width: 23%;
margin: 1%;
}
}
.flip-card .front,
.flip-card .back {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
background-size: cover;
transition: 0.3s;
backface-visibility: hidden;
/* Change Colors! */
border: solid 1px #333;
box-shadow: 5px 10px 8px #333;
}
.flip-card:hover .front {
transform: rotateY(180deg) scale(0.5);
}
.flip-card .back {
/* Change Colors! */
background: #333;
color: #FFF;
display: flex;
justify-content: center;
transform: rotateY(180deg) scale(0.5);
}
.flip-card:hover .back {
transform: rotateY(360deg) scale(1);
}
.flip-card .front {
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
/* Contact */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- CSS -->
<link rel="stylesheet" href="main.css">
<!-- FreeCodeCamp Tests -->
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<title>Jacob Pieczynski | Front-end Web Developer</title>
</head>
<body>
<!-- Nav -->
<nav id="navbar">
<h2 id="logo">Jacob Pieczynski</h2>
<div class="btns">
<button>Home</button>
<button>Projects</button>
<button>Contact</button>
</div>
</nav>
<!-- Welcome Section -->
<section id="welcome-section">
<h1>I am Jacob Pieczynski</h1>
<p class="h1-desc">An up and coming teen web developer</p>
</section>
<!-- Projects -->
<section id="projects">
<h2 id="projects-h2">Projects</h2>
<!-- New Card -->
<div class="flip-card">
<!-- Front -->
<div class="front" style="background-image:url(https://i.imgur.com/ZmJVBHn.png)">
</div>
<!-- Back -->
<div class="back">
<h2 class="card-header">Loren Impus</h2>
</div>
</div>
<!-- New Card -->
<div class="flip-card">
<!-- Front -->
<div class="front" style="background-image:url(https://i.imgur.com/ZmJVBHn.png)">
</div>
<!-- Back -->
<div class="back">
<h2 class="card-header">Loren Impus</h2>
</div>
</div>
<!-- New Card -->
<div class="flip-card">
<!-- Front -->
<div class="front" style="background-image:url(https://i.imgur.com/ZmJVBHn.png)">
</div>
<!-- Back -->
<div class="back">
<h2 class="card-header">Loren Impus</h2>
</div>
</div>
<!-- New Card -->
<div class="flip-card">
<!-- Front -->
<div class="front" style="background-image:url(https://i.imgur.com/ZmJVBHn.png)">
</div>
<!-- Back -->
<div class="back">
<h2 class="card-header">Loren Impus</h2>
</div>
</div>
<!-- New Card -->
<div class="flip-card">
<!-- Front -->
<div class="front" style="background-image:url(https://i.imgur.com/ZmJVBHn.png)">
</div>
<!-- Back -->
<div class="back">
<h2 class="card-header">Loren Impus</h2>
</div>
</div>
<!-- New Card -->
<div class="flip-card">
<!-- Front -->
<div class="front" style="background-image:url(https://i.imgur.com/ZmJVBHn.png)">
</div>
<!-- Back -->
<div class="back">
<h2 class="card-header">Loren Impus</h2>
</div>
</div>
</section>
<!-- Contact -->
<section id="contact">
<!-- Contact Circle - Instagram -->
<a href="#" id="contact-a">
</a>
<!-- Contact Circle - Email -->
<a href="#" id="contact-a">
</a>
<!-- Contact Circle - FreeCodeCamp -->
<a href="#" id="contact-a">
</a>
<!-- Contact Circle - Github -->
<a href="#" id="contact-a">
</a>
</section>
<!-- Footer -->
<footer id="footer">
</footer>
</body>
</html>
Thanks for the help as this is a major project for me that I am very frustrated with at this point. Have a great day!
It looks like that is happening because you are overriding the width you set with the media queries like for example you have this:
.flip-card {
width: 25vw;
height: 25vh;
margin: auto;
position: relative;
perspective: 100vw;
float: left;
}
Then you have this:
#media (min-width: 600px) and (max-width: 992px) {
.flip-card {
width: 31%;
margin: 1.16%;
}
}
#media (min-width: 992px) {
.flip-card {
width: 23%;
margin: 1%;
}
}
Each of the widths in those media queries are overriding your 25vw, if you remove the width percentages out of each of those media queries or change the width:23% to 48% your cards will go into 2 to each row. The width 23% is telling them to be 23% percentage of the container width which is approximately 1/4 of the width which would cause them to be 4 in a row.
I've got a single header with 70% height, and 5 divs each representing a different section in the page. The <header> element is getting the height property and working as expected, the div elements however won't when setting the height to any percentage value.
I've looked around and apparently I need to setup the root elements height, I did height: 100% on html and body and everything worked as expected; however the header which was responsive now isn't. Whatever is in the header is getting overflowed and out of the container.
/* === GLOBAL === */
* {
box-sizing: border-box;
}
body {
font-family: "Lato", sans-serif;
height: 100%; /* EXPERIMENTAL */
}
/* === HEADER === */
header {
height: 70%;
background-color: #bdc3c7;
}
header h1 { /* The Heading "Saad Al-Sabbagh" */
margin: 0;
font-family: "PT Sans Narrow";
text-align: center;
padding-top: 2em;
}
header p a { /* The Link Inside The Description Paragraph */
text-decoration: none;
color: #3498db;
}
header p a:hover { /* The Link Inside The Description Paragraphs Hover Effect */
color: #d35400;
border-bottom: 3px solid #d35400;
}
header p { /* The Description Paragraph */
text-align: center;
font-size: 3rem;
padding-top: .3em;
font-weight: 700;
}
header ul { /* The Social Links List */
list-style: none;
text-align: center;
}
header ul li { /* The Social Links List Items */
display: inline-block;
font-size: 5em;
padding: 1em .5em;
}
header ul li a { /* The Social Links */
text-decoration: none;
color: black;
}
header ul li a:hover { /* The Social Links On Hover */
color: #d35400;
}
/* === ABOUT === */
#about {
height: 100;
}
<!DOCTYPE html>
<html>
<head>
<!-- Meta -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Title -->
<title>Saad Al-Sabbagh | Web Developer</title>
<!-- CSS -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:400,700,900|PT+Sans+Narrow">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<!-- Header -->
<header>
<h1>Saad Al-Sabbagh</h1>
<p>Front End Web Developer, <br>Educator and Author <br># SitePoint</p>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</header>
<!-- About -->
<div id="about">
</div>
<!-- Expertise -->
<div id="expertise">
</div>
<!-- Recent Works -->
<div id="recent-works">
</div>
<!-- Latest Blog Post -->
<div id="latest-blog-post">
</div>
<!-- Contact -->
<div id="contact">
</div>
<!-- Footer -->
<footer>
</footer>
</body>
</html>
You have a few issues in the example:
A div will have 0 height when it is empty.
A div will wrap its contents and not 'inflate' to fit its parent's height.
Height has to have units, so your #about { height: 100; } won't work
I've corrected #1 and #3, but don't understand what exactly is the desired look you want to achieve.
/* === GLOBAL === */
* {
box-sizing: border-box;
}
body {
font-family: "Lato", sans-serif;
height: 100%;
/* EXPERIMENTAL */
}
/* === HEADER === */
header {
height: 70%;
background-color: #bdc3c7;
}
header h1 {
/* The Heading "Saad Al-Sabbagh" */
margin: 0;
font-family: "PT Sans Narrow";
text-align: center;
padding-top: 2em;
}
header p a {
/* The Link Inside The Description Paragraph */
text-decoration: none;
color: #3498db;
}
header p a:hover {
/* The Link Inside The Description Paragraphs Hover Effect */
color: #d35400;
border-bottom: 3px solid #d35400;
}
header p {
/* The Description Paragraph */
text-align: center;
font-size: 3rem;
padding-top: .3em;
font-weight: 700;
}
header ul {
/* The Social Links List */
list-style: none;
text-align: center;
}
header ul li {
/* The Social Links List Items */
display: inline-block;
font-size: 5em;
padding: 1em .5em;
}
header ul li a {
/* The Social Links */
text-decoration: none;
color: black;
}
header ul li a:hover {
/* The Social Links On Hover */
color: #d35400;
}
/* === ABOUT === */
#about {
height: 100%;
}
<!DOCTYPE html>
<html>
<head>
<!-- Meta -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Title -->
<title>Saad Al-Sabbagh | Web Developer</title>
<!-- CSS -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:400,700,900|PT+Sans+Narrow">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<!-- Header -->
<header>
<h1>Saad Al-Sabbagh</h1>
<p>Front End Web Developer,
<br>Educator and Author
<br># SitePoint
</p>
<ul>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</header>
<!-- About -->
<div id="about">
About
</div>
<!-- Expertise -->
<div id="expertise">
Expertise
</div>
<!-- Recent Works -->
<div id="recent-works">
Recent Works
</div>
<!-- Latest Blog Post -->
<div id="latest-blog-post">
Latest Blog Post
</div>
<!-- Contact -->
<div id="contact">
Contact
</div>
<!-- Footer -->
<footer>
Footer
</footer>
</body>
</html>
I'm working on an aspx master page, and my nav bar is wrapping around even though the width adds up to 100%. What is throwing this off, I've had it work on other projects?
Snippet:
/*General Styling*/
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
#wrapper {
min-height: 100%;
position: relative;
}
.clear:before,
.clear:after {
content: " ";
display: table;
}
/*Header Styling*/
/*Banner Styling*/
#banner {
text-align: center;
border-bottom: 1px solid purple;
}
#banner h1 {
color: blue;
}
#banner h5 {
color: red;
}
/*Nav Styling*/
#nav {
height: 100px;
border-bottom: 1px solid black;
}
.nav-item {
margin: 0;
padding: 0;
display: block;
list-style-type: none;
height: 100%;
}
.nav-child {
overflow: hidden;
font-size: 15px;
border-right: 1px solid green;
float: left;
height: 100%;
text-align: center;
width: 16%;
}
.nav-child:first-child {
width: 20%;
}
/*Content Styling*/
#content {
padding-bottom: 35px;
}
/*Footer Styling*/
#footer {
width: 100%;
border-top: 1px solid orange;
height: 35px;
position: absolute;
bottom: 0;
left: 0;
}
<!-- Start Wrapper -->
<div id="wrapper">
<!-- Start Header -->
<div id="header">
<div id="banner">
<h1>BETTER</h1>
<h5>Battling Elemental Titans Through Exercise Training</h5>
</div>
<!-- Start Navigation Bar -->
<div id="nav" class="clear">
<ul class="nav-item">
<li class="nav-child">
<asp:label ID="exercisePointLabel" runat="server">EP: 500</asp:label>
<br />
Add Exercise Points
</li>
<li class="nav-child">
Home
</li>
<li class="nav-child">
Battle
</li>
<li class="nav-child">
Hall of Legends
</li>
<li class="nav-child">
Settings
</li>
<li class="nav-child">
Logout
</li>
</ul>
</div>
<!-- End Navigation Bar -->
</div>
<!-- End Header -->
<!-- Start Content -->
<div id="content">
<!-- Start Titan Sidebar -->
<div id="titans">
<div class="titan-block">titan block</div>
<div class="titan-block">+<br /><span class="createTitan">(create new titan)</span>
</div>
<div class="titan-block">+<br /><span class="createTitan">(create new titan)</span>
</div>
<div class="titan-block">+<br /><span class="createTitan">(create new titan)</span>
</div>
</div>
<!-- End Titan Sidebar -->
<!-- Start Content Placeholder -->
<form id="form1" runat="server">
<div id="body">
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
<!-- End Content Placeholder -->
</div>
<!-- End Content -->
<!-- Start Footer -->
<div id="footer">
<div class="footer-text">© 2016</div>
</div>
<!-- End Footer -->
</div>
<!-- End Wrapper -->
If someone could please help that would be amazing. This is driving me crazy. I'm trying to build a website where the banner is, obviously, a banner, with heading and subheading. Followed by a navbar where the first child is an info box slightly wider than the other children, with 5 true navigation elements.
This will then be followed by content, which consists of a left aligned "titan" section, which occupies 100% height down to the footer, with a right aligned "content placeholder" section, also 100% height down to the footer.
It's the border-right you have.
You should add box-sizing: border-box; to fix this.
.nav-child {
overflow:hidden;
font-size:15px;
border-right:1px solid green;
float:left;
height:100%;
text-align:center;
width:16%;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
Here is another solution for this.
Replace this style in your css file:
.nav-child:first-child {
/* width: 20%; Remove this style */
}
.nav-item {
display: table;
height: 100%;
list-style-type: none;
margin: 0;
padding: 0;
}
.nav-child {
border-right: 1px solid #008000;
display: table-cell;
font-size: 15px;
height: 100%;
overflow: hidden;
text-align: center;
vertical-align: middle;
width: 1%;
}
Demo: https://jsfiddle.net/4bfg0p18/2/
I want to get something like the following:
The dark grey is the sidebar but I want to apply that color into the body element as an image which repeats itself vertically but at the same time doesn't cover the footer (light gray).
(this is the easiest way I found to stretch the color (dark gray) until the bottom.)
Part of my CSS:
body {
color: #888;
font-family: Arial, "MS Trebuchet", sans-serif;
font-size: 75%
}
.container {
margin: 0 auto;
overflow: hidden;
padding: 0 15px;
width: 960px;
}
/* header */
#header {
background: #444;
}
/* banner */
#header-top {
overflow: hidden;
height: 77px;
width: 960px; /* ie6 hack */
}
#lang {
float: right;
padding: 50px 0 0 0;
}
/* work */
#content {
background: #EEE;
}
#content a {
border-bottom: 0;
}
#mainbar {
overflow: hidden;
margin: 0 10px 0 0;
width: 644;
float: left;
}
#sidebar {
background: #DDD;
color: #777;
overflow: hidden;
margin: 20px 0 10px 0;
padding: 15px;
width: 240px;
float: right;
}
#sidebar h3 {
color: #888;
}
#about {
margin: 0 0 20px;
}
/* footer */
#footer {
color: #777;
background: #DDD;
clear: both;
}
/* contact */
#footer-top {
line-height: 160%;
overflow: hidden;
padding: 30px 0;
width: 960px; /* ie6 hack */
}
#footer-bottom {
font-size: 10px;
margin: 15px auto;
}
Part of my HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
<title>Alex Chen - Web Development, Graphic Design, and Translation</title>
<link rel="stylesheet" type="text/css" href="styles/global.css" />
</head>
<body id="home">
<div id="header">
<div class="container">
<div id="header-top">
</div>
</div><!-- .container -->
</div><!-- #header -->
<div id="content">
<div class="container">
<div id="mainbar">
</div> <!-- #mainbar-->
<div id=sidebar>
</div> <!-- #sidebar -->
</div><!-- .container -->
</div><!-- #content -->
<div id="footer">
<div class="container">
<div id="footer-top">
</div><!-- #footer-top -->
<div id="footer-bottom">
</div>
</div><!-- .container -->
</div><!-- #footer -->
</body>
</html>
You can do this using an image to fake the background or there is a nice CSS solution here - http://jsfiddle.net/spacebeers/s8uLG/2/
#container { overflow: hidden; }
#container div { float: left; background: #ccc; width: 200px; margin-bottom: -2000px; padding-bottom: 2000px; }
#container .col2 { background: #eee;
<div id="container">
<div>
<p>Content 1</p>
</div>
<div class="col2">
<p>Content 2</p>
<p>Content 2</p>
<p>Content 2</p>
<p>Content 2</p>
</div>
</div>