I'm unsure how to make the main container ("main") centred? The div box needs to be centred but it is stuck on the left. I wish to keep a certain amount of margin between the overall space and the main div section, but I don't wish to restrict it to snap left?
I am still learning CSS. Any feedback on the layout or how I've done my coding is appreciated. Many thanks.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Business Title</title>
<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
<header>
<img class="mainImage" src="image/logo.png">
</header>
</head>
<body>
<div class="main">
<h1>Simple Business.</h1>
<ul>
<li>I need Option 1.</li>
<li>I just need Option 2.</li>
<li>I just need Option 3.</li>
<li>I need Option 4.</li>
</ul>
<footer>
<h1>About THIS BUSINESS.</h1>
<p class="about"> Insert About Text Here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vitae dolor nibh. Ut at pulvinar ex. Cras nibh ante, iaculis quis aliquet at, placerat quis enim. In maximus nulla ut commodo sollicitudin. Etiam a erat laoreet augue tempus pellentesque. Fusce tempor sed urna in cursus. Sed lectus leo, tempor sed magna quis, maximus vulputate velit. Ut non pellentesque arcu, quis placerat magna. Cras ac odio in leo egestas convallis. Nunc egestas pulvinar placerat.
</p>
</footer>
</div>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
----------
**CSS:**
/******************************************
/* SETUP
/*******************************************/
/* Box Model Hack */
* {
-moz-box-sizing: border-box; /* Firexfox */
-webkit-box-sizing: border-box; /* Safari/Chrome/iOS/Android */
box-sizing: border-box; /* IE */
}
/* Clear fix hack */
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clear {
clear: both;
}
.alignright {
float: right;
padding: 0 0 10px 10px; /* note the padding around a right floated image */
}
.alignleft {
float: left;
padding: 0 10px 10px 0; /* note the padding around a left floated image */
}
/******************************************
/* BASE STYLES
/*******************************************/
body {
color: #000;
background-color: #ececec;
font-size: 12px;
line-height: 1.4;
font-family: Helvetica, Arial, sans-serif;
text-align: center;
}
h1 {
font-family:'Arial Black';
font-size: 4em;
padding-top: 5px;
}
li {
text-decoration: none;
font-size: 2em;
line-height: 2.5em;
color: #FF48D0;
}
ul {
list-style: none;
padding: 0;
}
.mainImage {
width:75%;
max-width:483px;
}
a:active, a:hover {outline: 0 none; text-decoration: none;}
a {text-decoration: none}
/******************************************
/* LAYOUT
/*******************************************/
.main {
background-color: #FFF;
margin:1em;
margin-left: 2em;
margin-right: 2em;
float: center;
max-width: 960px;
}
.about, p {
float:center;
max-width: 960px;
padding-left: 1em;
padding-right: 1em;
text-align: justify;
}
header {
padding:10px;
}
footer {
padding: 5px;
}
/******************************************
/* ADDITIONAL STYLES
/*******************************************/
/* =======================================================================
Media Queries
========================================================================== */
#media only screen and (max-width: 930px) {
.main {
max-width: 95%;
margin: 0 auto;
text-align:center;
padding-bottom: 1.5em;
float: none;
}
h1 {
font-size: 2.5em;
text-align: center;
}
li {
font-size: 2em;
line-height: 2.5em;
}
}
#media only screen and (max-width: 480px) {
.main {
max-width: 95%;
}
h1 {
font-size: 2em;
text-align: center;
}
li {
font-size: 1.4em;
line-height: 2em;
}
}
You just need to add margin: 0 auto; to your css for that element.
Like so:
.main {
margin: 0 auto;
}
This will centre the element automatically to the users browser.
CSS Margins
The classical way to center an element with CSS is to set left and right margin to auto
Your code should be
.main {
background-color: #FFF;
margin: 1em auto;
max-width: 960px;
}
.main {
background-color: #FFF;
max-width: 960px;
display: table;
margin: 0 auto;
}
Fiddle: Demo
Related
Upon clicking the mobile menu extra space appears on the right of the page causing a horizontal scroll bar to appear.
It appears that width: 100vw; on line 126 is causing the issue but changing this also changes the size of the menu item.
After investigating this issue I found it only appears on windows and not on mac(tested in firefox and chrome).
Codepen
const toggleButton = document.getElementsByClassName("toggle-button")[0];
const navbarLinks = document.getElementsByClassName("nav-links")[0];
toggleButton.addEventListener("click", () => {
navbarLinks.classList.toggle("active");
});
/****************************
PAGE STYLES
***************************/
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
font-family: "Roboto", sans-serif;
font-size: 1.3125rem;
line-height: 1.6;
background-color: #e8e8e8;
}
.navbar {
background-color: #333;
color: #fff;
margin-bottom: 1.5rem;
}
.container-nav {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #333;
width: 80%;
margin: 0 auto;
max-width: 1440px;
}
.nav-logo {
font-size: 1.5rem;
margin: 0.5rem;
}
.nav-links ul {
margin: 0;
padding: 0;
display: flex;
}
.nav-links li {
list-style: none;
}
.nav-links li a {
text-decoration: none;
color: #fff;
padding: 1rem;
display: block;
font-size: 1rem;
}
.nav-links li:hover {
background-color: #555;
}
.toggle-button {
position: absolute;
top: 1rem;
right: 1rem;
display: none;
width: 30px;
height: 21px;
}
.toggle-button .bar {
height: 3px;
width: 100%;
background-color: #fff;
border-radius: 10px;
}
.container {
width: 80%;
margin: 0 auto;
max-width: 1440px;
background-color: #fff;
padding: 2rem;
margin-bottom: 1rem;
}
img {
max-width: 100%;
height: auto;
display: block;
}
#media (max-width: 600px) {
/* NAV */
.toggle-button {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.nav-links {
display: none;
/* width: 100vw; */
}
.navbar {
flex-direction: column;
align-items: flex-start;
/* justify-items: first baseline; */
}
.container-nav {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
background-color: #333;
}
.nav-links ul {
flex-direction: column;
}
.nav-links li {
text-align: center;
width: 100vw;
}
.nav-links li a {
padding: 0.5rem 1rem;
}
.nav-links.active {
display: flex;
}
/* NAV END*/
.container {
width: 100%;
margin: 0 auto;
max-width: 1440px;
background-color: #fff;
padding: 2rem;
margin-bottom: 1rem;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="/style/style.css" />
<script src="/scripts/navbar.js" defer></script>
<title>test</title>
</head>
<body>
<nav class="navbar">
<div class="container-nav">
<div class="nav-logo">test</div>
<a href="#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="nav-links">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</nav>
<section class="">
<div class="container row">
<h2 class="section-title">container 1</h2>
<p>
Felis donec et odio pellentesque diam volutpat. Aliquam purus sit amet luctus venenatis. Turpis in eu mi bibendum neque egestas congue quisque egestas. Pellentesque sit amet porttitor eget dolor morbi non.
</p>
</div>
</section>
<section class="">
<div class="container row">
<h2 class="section-title">container 2</h2>
<p>
Felis donec et odio pellentesque diam volutpat. Aliquam purus sit amet luctus venenatis. Turpis in eu mi bibendum neque egestas congue quisque egestas. Pellentesque sit amet porttitor eget dolor morbi non.
</p>
</div>
</section>
</body>
</html>
Why is this happening?
The reason this is happening is because 100vw is the full width of the viewport, but your page has a vertical scrollbar so the available width is actually "viewport width - scrollbar width". (If you delete the content from the page so that there is no vertical scrollbar, the horizontal scroll doesn't appear).
So for example, if the viewport width is 600px and the scrollbar is 24px, then 100vw is 600px, but the actual space for the menu item is just 576px (600px - 24px) resulting in a scroll bar.
How to fix it?
It is rare that 100vw is really necessary in CSS layouts - 100% is usually preferable as it takes 100% of the available space of its container. So we just need to make sure each of your menu options' containers are also set up correctly. In your case, you need to make just a few changes to the CSS in your #media (max-width: 600px) query:
.nav-links {
width: 100%; /* change from 100vw; */
}
.nav-links li {
width: 100%; /* change from 100vw; */
}
.nav-links.active {
display: block; /* change from flex (it isn't needed and just affects the display) */
}
.container-nav {
width: 100%; /* this was 80% for some reason? */
}
Working Example
(Note I've changed the media query to #media (max-width: 800px) below, so we can see the dropdown menu here in the snippet window without resizing the screen)
const toggleButton = document.getElementsByClassName("toggle-button")[0];
const navbarLinks = document.getElementsByClassName("nav-links")[0];
toggleButton.addEventListener("click", () => {
navbarLinks.classList.toggle("active");
});
/****************************
PAGE STYLES
***************************/
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
font-family: "Roboto", sans-serif;
font-size: 1.3125rem;
line-height: 1.6;
background-color: #e8e8e8;
}
.navbar {
background-color: #333;
color: #fff;
margin-bottom: 1.5rem;
}
.container-nav {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #333;
width: 80%;
margin: 0 auto;
max-width: 1440px;
}
.nav-logo {
font-size: 1.5rem;
margin: 0.5rem;
}
.nav-links ul {
margin: 0;
padding: 0;
display: flex;
}
.nav-links li {
list-style: none;
}
.nav-links li a {
text-decoration: none;
color: #fff;
padding: 1rem;
display: block;
font-size: 1rem;
}
.nav-links li:hover {
background-color: #555;
}
.toggle-button {
position: absolute;
top: 1rem;
right: 1rem;
display: none;
width: 30px;
height: 21px;
}
.toggle-button .bar {
height: 3px;
width: 100%;
background-color: #fff;
border-radius: 10px;
}
.container {
width: 80%;
margin: 0 auto;
max-width: 1440px;
background-color: #fff;
padding: 2rem;
margin-bottom: 1rem;
}
img {
max-width: 100%;
height: auto;
display: block;
}
#media (max-width: 800px) {
/* NAV */
.toggle-button {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.nav-links {
display: none;
width: 100%;
}
.navbar {
flex-direction: column;
align-items: flex-start;
/* justify-items: first baseline; */
}
.container-nav {
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
background-color: #333;
}
.nav-links ul {
flex-direction: column;
}
.nav-links li {
text-align: center;
width: 100%;
}
.nav-links li a {
padding: 0.5rem 1rem;
}
.nav-links.active {
display: block;
}
/* NAV END*/
.container {
width: 100%;
margin: 0 auto;
max-width: 1440px;
background-color: #fff;
padding: 2rem;
margin-bottom: 1rem;
}
}
<nav class="navbar">
<div class="container-nav">
<div class="nav-logo">test</div>
<a href="#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="nav-links">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</nav>
<section class="">
<div class="container row">
<h2 class="section-title">container 1</h2>
<p>
Felis donec et odio pellentesque diam volutpat. Aliquam purus sit amet luctus venenatis. Turpis in eu mi bibendum neque egestas congue quisque egestas. Pellentesque sit amet porttitor eget dolor morbi non.
</p>
</div>
</section>
<section class="">
<div class="container row">
<h2 class="section-title">container 2</h2>
<p>
Felis donec et odio pellentesque diam volutpat. Aliquam purus sit amet luctus venenatis. Turpis in eu mi bibendum neque egestas congue quisque egestas. Pellentesque sit amet porttitor eget dolor morbi non.
</p>
</div>
</section>
So I am trying to center my image inside one of my two columns. In this case is the left column. Take the image below for example.
I got some text in column two, but the image in column one does not look center as the way I envision it. Here is what it is currently looking like right now.
The red circled is where I want my picture to actually be located.
Here is my code
/* Regular Desktop View */
h1 {
display: none;
}
img {
width: 170px;
height: 170px;
border-radius: 50%;
text-align: center;
}
h2 {
text-align: left;
margin-top: 30px;
}
p {
margin-right: 50px;
}
/* Create two equal columns that floats next to each other */
.column {
float: left;
width: 50%;
padding: 15px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* End regular Desktop View */
/* Tablet/Smartphone view begins */
#media screen and (max-width: 768px) {
img {
width: 170px;
height: 170px;
display: block;
margin-left: auto;
margin-right: auto;
}
h1 {
display: block;
font-family: sans-serif, arial, verdana, lucida;
}
h2 {
text-align: center;
}
p {
width: 100%;
padding: 10px;
}
/* Home Page */
.column {
width: 100%;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Homepage</title>
<link rel="stylesheet" type="text/css" href="main.css">
<style>
/* Regular Desktop View */
h1 {
display: none;
}
img {
width: 170px;
height: 170px;
border-radius: 50%;
text-align: center;
}
h2 {
text-align: left;
margin-top: 30px;
}
p {
margin-right: 50px;
}
/* Create two equal columns that floats next to each other */
.column {
float: left;
width: 50%;
padding: 15px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* End regular Desktop View */
/* Tablet/Smartphone view begins */
#media screen and (max-width: 768px) {
img {
width: 170px;
height: 170px;
display: block;
margin-left: auto;
margin-right: auto;
}
h1 {
display: block;
font-family: sans-serif, arial, verdana, lucida;
}
h2 {
text-align: center;
}
p {
width: 100%;
padding: 10px;
}
/* Home Page */
.column {
width: 100%;
}
}
</style>
</head>
<body>
<ul class="topnav">
<label for="toggle">☰</label>
<input type="checkbox" id="toggle">
<div class="menu">
<li>Home
<li>About</li>
<li>Portfolio</li>
<li>Gallery</li>
<li>Contact Me</li>
</div>
</ul>
<h1 align="center">HOME</h1>
<div class="row">
<div class="column">
<img src="img/image1.jpg" class="float-center">
</div>
<div class="column">
<h2>This is an h2 Title</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus
quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.
</p>
</div>
</div>
</body>
</html>
When I view this in full screen in desktop mode, it is just not how I want it. But when I resize my browser to tablet/smartphone mode, I'm cool with that. My goal here is to center the image in column one no matter how you resize it under it reaches the pixels max-width.
As by default <img> tag in HTML5 is an inline-block element, you can center it by applying the text-align: center; to it. This may seem unintuitive as it says center text to center, but it actually applies to all content that is of type inline-block.
Find below the updated snippet with a new class .centered that has been added to the first column, so that only the its contents get centered.
/* Regular Desktop View */
h1 {
display: none;
}
img {
width: 170px;
height: 170px;
border-radius: 50%;
text-align: center;
}
h2 {
text-align: left;
margin-top: 30px;
}
p {
margin-right: 50px;
}
/* Create two equal columns that floats next to each other */
.column {
float: left;
width: 50%;
padding: 15px;
}
.centered {
text-align: center;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* End regular Desktop View */
/* Tablet/Smartphone view begins */
#media screen and (max-width: 768px) {
img {
width: 170px;
height: 170px;
display: block;
margin-left: auto;
margin-right: auto;
}
h1 {
display: block;
font-family: sans-serif, arial, verdana, lucida;
}
h2 {
text-align: center;
}
p {
width: 100%;
padding: 10px;
}
/* Home Page */
.column {
width: 100%;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Homepage</title>
<link rel="stylesheet" type="text/css" href="main.css">
<style>
/* Regular Desktop View */
h1 {
display: none;
}
img {
width: 170px;
height: 170px;
border-radius: 50%;
text-align: center;
}
h2 {
text-align: left;
margin-top: 30px;
}
p {
margin-right: 50px;
}
/* Create two equal columns that floats next to each other */
.column {
float: left;
width: 50%;
padding: 15px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* End regular Desktop View */
/* Tablet/Smartphone view begins */
#media screen and (max-width: 768px) {
img {
width: 170px;
height: 170px;
display: block;
margin-left: auto;
margin-right: auto;
}
h1 {
display: block;
font-family: sans-serif, arial, verdana, lucida;
}
h2 {
text-align: center;
}
p {
width: 100%;
padding: 10px;
}
/* Home Page */
.column {
width: 100%;
}
}
</style>
</head>
<body>
<ul class="topnav">
<label for="toggle">☰</label>
<input type="checkbox" id="toggle">
<div class="menu">
<li>Home
<li>About</li>
<li>Portfolio</li>
<li>Gallery</li>
<li>Contact Me</li>
</div>
</ul>
<h1 align="center">HOME</h1>
<div class="row">
<div class="column centered">
<img src="img/image1.jpg" class="float-center">
</div>
<div class="column">
<h2>This is an h2 Title</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus
quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.
</p>
</div>
</div>
</body>
</html>
A good tip for the future is to keep you HTML separate from your CSS styling – try to have as few (if not none) inline styling and <style> tags in your HTML, and reference your stylesheets with <link> tags. Learn more about this from this W3Schools tutorial.
Here is what my plan was (in sketch). From desktop to mobile.
I was able to ask the right question in another forum and I got this answer.
HTML
<div class="parent">
<div class="image">
<img src="https://i.redd.it/q2iv8opn50kz.jpg" style="width: 170px; height: 170px; border-radius:50%;">
</div>
<div class="text">
<h2>This is an h2 tag</h2>
<p>
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions
from the 1914 translation by H. Rackham.
</p>
</div>
</div>
CSS
.parent {
display: flex; /* Where the mobile part begins */
justify-content: center;
text-align: center;
flex-wrap: wrap;
padding: 50px 0 0 30px;
}
.parent div {
height: 200px;
width: 300px;
}
img {
width: 170px;
height: 170px;
}
Now I have it in two somewhat "columns," it works!
So i'm working on a nav bar which should be aligned horizontally, but it won't. If i try to use
display: inline-block;
and then
float: left;
the navbar collides with the rest of my divisions
Here's my code:
http://jsfiddle.net/0p287vmb/
Try this:
nav
a {
font-family: Impact;
font-size: 15px;
color: black;
text-decoration: none;
display: inline-block;
width: 200px;
height: 50px;
text-align: center;
line-height: 50px;
margin: 0px;
padding: 0px;
}
nav
a:hover {
background-color: white;
display: inline-block;
}
I removed the commas because with commas it translates to nav & a. In your case removing it solves the problem also it overwrote the width of the nav that's why it doesn't seem to take up the whole width.
That's because you are overriding the width of the navbar in
nav,
a {
...
width: 200px;
...
}
and the display block here:
nav,
a:hover {
background-color: white;
display: inline-block;
}
Just move the navbar styling after nav,a:hover ..., and remove nav from the same place because you are also ovveriding the background color of the nav.
Also, on the last line it should be font-weight not text-weight.
* {
font-family: Verdana;
font-size: 14px;
margin: 0;
}
p {
padding 20px;
}
#wrapper {
width: 900px;
background-color: #ff3333;
margin: auto;
}
header {
background-color: #00c9fd;
width: 900px;
}
nav,
a {
font-family: Impact;
font-size: 15px;
color: black;
text-decoration: none;
display: inline-block;
width: 200px;
height: 50px;
text-align: center;
line-height: 50px;
margin: 0px;
padding: 0px;
float: left;
}
a:hover {
background-color: white;
display: inline-block;
}
nav {
background-color: #cccccc;
width: 900px;
}
#bigimage {
width: 900px;
}
#bigimage,
p {
color: #00c9fd;
background-color: #ffffff;
font-size: 12px;
}
main {
width: 900px;
}
article {
background-color: #cccccc;
width: 900px;
}
#contact {
background-color: #cccccc;
width: 900px;
}
footer {
background-color: #00c9fd;
width: 900px;
}
header,
h1 {
padding: 20px 0px 5px 0px;
color: rgb(255, 255, 255);
font-size: 30px;
font-family: Impact;
text-weight: normal;
}
<div id="wrapper">
<header>
<h1>SUPERCOMPUTERS</h1>
</header>
<nav>
Home
Meer informatie
Tijdlijn
</nav>
<div id="bigimage">
<img src="images/titanadfacomputer.jpg" alt="Titan 2 Supercomputer" width="900">
<p>
<b>Lorem</b> <br> ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mollis turpis sit amet blandit malesuada. Praesent at lacus rutrum, auctor justo sed, consectetur massa. Cras gravida vehicula vulputate. Ut magna odio, mollis non dolor
at, dignissim faucibus eros.
</p>
</div>
<main>
<article>hoi1</article>
<article>hoi2</article>
<article>hoi3</article>
</main>
<div id="contact">hoi4</div>
<footer>hoi5</footer>
</div>
Your selector was wrong. You wrote nav, a which would mean to apply those styles to both nav and a elements. Infact you needed nav a which means to only apply those styles to a elements that are children of nav elements.
nav a {
font-family: Impact;
font-size: 15px;
color: black;
text-decoration: none;
display: inline-block;
width: 200px;
height: 50px;
text-align: center;
line-height: 50px;
margin: 0px;
padding: 0px;
float: left;
}
You should remove the width from nav tag.
* {
font-family: Verdana;
font-size: 14px;
margin: 0;
}
p {
padding 20px;
}
#wrapper {
width: 900px;
background-color: #ff3333;
margin: auto;
}
header {
background-color: #00c9fd;
width: 900px;
}
nav {
background-color: #cccccc;
width: 900px;
}
a {
font-family: Impact;
font-size: 15px;
color: black;
text-decoration: none;
text-align: center;
line-height: 50px;
margin: 0px;
padding: 5px 10px;
float: left;
}
nav,
a:hover {
background-color: white;
display: inline-block;
}
#bigimage {
width: 900px;
}
#bigimage,
p {
color: #00c9fd;
background-color: #ffffff;
font-size: 12px;
}
main {
width: 900px;
}
article {
background-color: #cccccc;
width: 900px;
}
#contact {
background-color: #cccccc;
width: 900px;
}
footer {
background-color: #00c9fd;
width: 900px;
}
header,
h1 {
padding: 20px 0px 5px 0px;
color: rgb(255, 255, 255);
font-size: 30px;
font-family: Impact;
text-weight: normal;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style_new.css">
</head>
<body>
<div id="wrapper">
<header>
<h1>SUPERCOMPUTERS</h1>
</header>
<nav>
Home
Meer informatie
Tijdlijn
</nav>
<div id="bigimage">
<img src="images/titanadfacomputer.jpg" alt="Titan 2 Supercomputer" width="900">
<p>
<b>Lorem</b> <br> ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mollis turpis sit amet blandit malesuada. Praesent at lacus rutrum, auctor justo sed, consectetur massa. Cras gravida vehicula vulputate. Ut magna odio, mollis non dolor
at, dignissim faucibus eros.
</p>
</div>
<main>
<article>hoi1</article>
<article>hoi2</article>
<article>hoi3</article>
</main>
<div id="contact">hoi4</div>
<footer>hoi5</footer>
</div>
</body>
</html>
I want my page to fill the screen even if it doesn't contain enough content. I have made this happen with height set to 100% in body. What I also want is some space around my content, and by adding 5px to the margin it gets how I want it. My problem is that then I have to scroll to see the whole page, even if the content is not too long for the screen. I guess there is a simple sollution to this, but I can't seem to find it. Anyone who can?
/* Allmänt */
html, body{
background: grey;
background-size: cover;
height: 100%;
}
#content{
background-color: white;
width: 1100px;
margin: 5px auto;
border-radius: 5px;
position: relative;
height: auto !important;
min-height: 100%;
}
/* Header */
#huvud{
width: 1000px;
height: 250px;
margin: 0 auto;
position: relative;
padding-top: 5px;
}
#header{
display: block;
}
/* Meny */
#nav-yttre{
width: 1000px;
height: 35px;
margin: 0 auto;
background-image: url("Rusty-bar2.jpg");
}
#nav-mitten{
display: table;
width: 100%;
padding: 10px;
}
#nav-inre{
display: table-row;
list-style: none;
font-family: 'Special Elite', Verdana, Arial, sans-serif;
font-size: 25px;
}
#nav-inre li{
display: table-cell;
}
#nav-inre li a{
display: block;
text-decoration: none;
text-align: center;
color: #eeeeee;
}
#nav-inre li #here{
color: #221f20;
}
#nav-inre li a:hover{
color: #221f20;
}
/* Main */
#main{
width: 980px;
margin: 0 auto;
height: 100%;
position: relative;
padding-bottom: 150px;
}
#fadein {
margin: 10px auto;
position:relative;
width:970px;
height:215px;
padding: 5px;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
}
#fadein img {
position:absolute;
}
#main-blogg{
width: 1050px;
margin: 0 auto;
}
#blogg{
min-height: 1000px;
}
/* Fot */
#fot{
width: 980px;
margin: 0 auto;
text-align: center;
}
#fot-inre{
border-top: solid #221f20 1px;
position: absolute;
bottom: 0;
}
#adress{
width: 327px;
float: left;
}
#kontakt{
width: 326px;
float: left;
}
#tider{
width: 326px;
float: right;
}
#design{
width: 500px;
margin: 0 auto;
clear: both;
text-align: center;
background-image: url("Rusty-bar-small.jpg");
}
#design p{
color: #eeeeee;
font-weight: bold;
}
#design a{
color: #eeeeee;
}
#design a:hover{
color: #221f20;
}
#rub{
font-weight: bold;
}
/* Allmänt */
p{
font-family: Verdana, Arial, sans-serif;
color: #221f20;
font-size: 0.9em;
}
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="stajlish.css">
<link href='http://fonts.googleapis.com/css?family=Special+Elite' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="stajlish.js"></script>
</head>
<body>
<div id="content">
<div id="huvud">
<img id="header" src="hej.jpg" alt="Header">
</div>
<div id="nav-yttre">
<div id="nav-mitten">
<ul id="nav-inre">
<li>HEM</li>
<li>OM OSS</li>
<li>BLOGG</li>
<li>MÄRKEN</li>
<li>HITTA HIT</li>
</ul>
</div>
</div>
<div id="main">
<div id="fadein">
<img src="slides1.jpg">
<img src="slides2.jpg">
<img src="slides3.jpg">
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tempus quam lectus, in suscipit nisl luctus feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent elit eros, tempor sed bibendum nec, luctus in dui. Proin vitae tincidunt diam, a pulvinar tortor. Maecenas pulvinar rhoncus nisl quis aliquet. Nulla dolor metus, euismod ac gravida eget, congue at nunc. Etiam non urna vel dolor pulvinar finibus. Suspendisse eget lacinia massa. Morbi sodales non purus pretium congue. Nullam sed tellus diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla porta sapien sit amet placerat lobortis. Nunc sed orci tincidunt, lacinia massa ut, fringilla est. Maecenas sodales orci at erat malesuada, non tristique leo auctor. Suspendisse augue felis, lobortis rhoncus pharetra at, pretium sit amet dolor.</p>
</div>
<div id="fot">
<div id="fot-inre">
<div id="adress">
<p id="rub">BESÖKSADRESS</p>
<p>Hej</p>
</div>
<div id="kontakt">
<p id="rub">KONTAKTA OSS</p>
<p>Telefon: 08-123 45 67</p>
<p>Mail: info#mail.se</p>
</div>
<div id="tider">
<p id="rub">ÖPPETTIDER</p>
<p>Vardagar: 10-19<br>Lördag: 10-17<br>Söndag: 11-16</p>
</div>
<div id="design">
<p>Webbplatsen är gjord av Maria</p>
</div>
</div>
</div>
</div>
</body>
Bulletproof full height!
*,
*:before,
*:after {
-webkit-box-sizing:border-box;
-mozbox-sizing:border-box;
box-sizing:border-box;
}
html,
body {
height:100%;
height:100vh;
margin:0;
padding:0;
}
#content {
height:auto !important;
min-height:100%;
min-height:100vh;
}
Reasons:
100vh is supported in IE9 and above (and basically anything else), and 100% is used as a fallback
border-box is a key piece of layout functionality, to support recalc after padding (so width:50px actually remains 50px, instead of 50px plus padding), and it works back to IE8
adding the margin:0;padding:0; to the html,body eliminates the white space around it ... if you desperately want padding on the body, add it separately (although you should really have it on whatever container you have for everything)
EDIT
So the reason you are still needing to scroll is because border-box handles padding, but not margin. If you want "room" around your content, add the padding there:
#content {
height:auto !important;
min-height:100%;
min-height:100vh;
padding:5px 0;
}
This will give you the effect of room on top and bottom. However, if (for some crazy reason) you are really clinging to the need for margin over padding, you could use calc:
#content {
height:auto !important;
min-height:calc(100% - 10px);
min-height:calc(100vh - 10px);
margin:5px auto;
}
Only supported on IE9 and up, but will give you what you are looking for. I highly advise against it though, as what you are trying to attain is much more easily doable in ways that don't involve margin.
I would implement 2 things. I would use a bumper and calc.
<div class="bumper"></div>
.bumper {
height:5px;
width:100%;
}
put the bumper where you would want your padding to be. Then use calc to set the height of the content.
#content {
background-color: white;
max-width:800px;
padding: 5px;
min-height:90%; //backup for browsers who do not support calc
min-height:calc(100% -5px);
margin-left: auto;
margin-right: auto;
border-radius: 5px;
}
html, body {
background: grey;
height: 100%;
margin:0px; //important
}
Result:
http://jsfiddle.net/m/qes/
Full Code: http://jsfiddle.net/neoaptt/r2ddyg8e/
Change
html, body{
background: grey;
background-size: cover;
height: 100%;
}
to
html, body{
background: grey;
background-size: cover;
height: 100vh;
}
then add a reset
*{box-sizing: border-box; padding: 0; margin: 0}
you can read more about Sizing with CSS3's vw and vh units
The problem:
The reason you have to scroll to see the whole page is because you are giving your element with the id content a min-height of 100% and then also giving it a margin of 5px auto. This is essentially saying I want my content element to have a height of 100% + 5px on the top and 5px on the bottom of margin. height now equals: (100% + 10px).
The answer:
If you want space around your content use the padding property on your content element instead of the margin. This will push the elements within the content element inward 5px from the top and 5px from the bottom, without increasing the height of your content element past 100%.
It should look something like this (not tested):
#content{
background-color: white;
width: 1100px;
padding: 5px auto; /* changed margin to padding */
border-radius: 5px;
position: relative;
height: auto !important;
min-height: 100%;
}
You have a top and bottom margin on your #content div. Remove it and add this to the body :
body {
padding: 5px 0;
box-sizing: border-box;
}
I am using Simple Grid and looking to expand the width of my background image of a grid container to the full width of the browser. I have tried multiple techniques to expand the image, but nothing has been working. Should I wrap the container in another div and use that div as a background, or is there a simple css fix to my issue?
HTML: (Div id is "body-wrapper-grid")
TEST
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<link type="text/javascript" src="navicon.js">
</head>
<body>
<!-- Start Navigation Grid -->
<div class="grid" id="nav-wrapper-grid">
<!-- Start Columns -->
<div class="col-1-1">
<!-- Start Navigation Wrapper -->
<nav id="nav-wrapper">
<div id="links">
<img src="images/TEST.png" />
<ul id="nav">
<li>TEST</li>
<li>TEST</li>
<li>TEST</li>
<li>TEST</li>
</ul>
</div>
</nav>
<!-- End Navigation Wrapper -->
</div>
<!-- End Columns -->
</div>
<!-- End Navigation Grid -->
<!-- Start Mission Statement Grid -->
<div class="grid grid-pad" id="body-wrapper-grid">
<div class="col-7-12" id="iphone-mockup">
<img src="images/iphoneMockup.png" />
</div>
<div class="col-5-12" id="mission-statement">
<div id="main-logo">
<img src="images/image.png"/>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id malesuada est. Sed elementum magna dictum aliquam fringilla. Pellentesque nec viverra augue. Nam cursus arcu nec bibendum facilisis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent est nisl, pretium sed diam a, porta gravida urna. Donec facilisis eleifend lectus, ac facilisis eros vehicula a. Curabitur hendrerit, risus non pharetra semper, mi ipsum viverra arcu, a tincidunt velit neque vitae enim. Cras elementum est sit amet luctus aliquet.</p>
<div id="app-store-badge">
<img src="images/appStoreBadge.png" />
</div>
</div>
</div>
<!-- End Mission Statement Grid -->
CSS:
html, body {
margin: 0;
padding: 0;
background-color: #cecece;
overflow-x: hidden;
font-family: 'HouschkaAlt', Fallback, sans-serif;
}
#font-face {
font-family: 'HouschkaAlt';
src: url('fonts/FontName.eot');
src: url('fonts/FontName.eot?iefix') format('eot'),
url('fonts/FontName.woff') format('woff'),
url('fonts/HouschkaAlt-Medium.ttc') format('truetype');
font-weight: normal;
font-style: normal; }
#nav-logo img {
width: 150px;
height: 40px;
}
.grid {
background-color: #fff;
}
/* NAVIGATION LINKS */
li a {
display: block;
width:100%;
background:#fff;
color: #3d6430;
font-size: 15px;
line-height: 40px;
text-decoration: none;
margin-top: 5px;
padding-left: 20px;
}
/* Small devices (tablets, 768px and up) */
#media (min-width: 768px) {
#nav-wrapper-grid {
background-color: #fff;
overflow: hidden;
width: 100%;
left:0;
z-index: 100;
}
#links {
width: 960px;
margin-left: auto;
margin-right: auto;
padding-left: 20px;
}
#nav-logo {
float: left;
display: inline;
}
ul {
width:100%;
background-color: #fff;
height: 40px;
padding: 0;
display: inline;
}
li {
padding: 0 20px;
float: left;
list-style-type: none;
}
#menu {
display: none;
}
#body-wrapper-grid {
background: url('images/downtown.jpg') 0 0 repeat-x;
width: 9999px;
padding-bottom: 0px;
margin-bottom: 0px;
overflow: hidden;
}
#iphone-mockup img {
vertical-align: bottom;
margin: 0 auto;
padding-bottom: 0px;
}
#mission-statement {
text-align: center;
background-color: #fff;
margin: 0px;
padding: 10px;
float: right;
}
#main-logo img {
display: block;
margin: auto;
}
/* APP STORE BADGE */
#app-store-badge img {
width: 200px;
height: 50px;
padding-bottom: 10px;
}
}
#features-detail-grid h3, p {
text-align: center;
color: #3d6430;
font-weight: bold;
}
/* Navigtion for Small Devices */
#media screen and (max-width: 768px) {
#nav-wrapper-grid {
background-color: #fff;
overflow: hidden;
width: 100%;
left:0;
z-index: 100;
}
#menu {
width:1.4em;
display: block;
background:#fff;
font-size:1.35em;
text-align: center;
color: #3d6430;
float: right;
top:0;
}
#logo {
float: none;
}
#nav.js {
display: none;
padding: 0;
}
ul {
width:100%;
list-style:none;
height: auto;
}
li {
width:100%;
border-right:none;
border-top: 1px solid #3d6430;
}
}
/* Medium devices (desktops, 992px and up) */
#media (min-width: 992px) { ... }
/* Large devices (large desktops, 1200px and up) */
#media (min-width: 1200px) { ... }
See if this helps you: http://jsfiddle.net/panchroma/DK9rJ/
I've commented out some of your images so it's easier to see what's happening. The important bit is that I've added a wrapper around the area where you want the full size image background and that this wrapper is outside the div of class grid.
<div class="body-background">
<div class="grid grid-pad" id="body-wrapper-grid">
....
</div> <!-- close class="grid grid-pad" id="body-wrapper-grid" -->
</div> <!-- close body-background -->
Since the <div class="body-background"> is outside the <div class="grid ..> it will extend full width and you will be good to go.
Good luck!