I have a basic site structure with a header, a footer and a content area.
Almost all of the solutions I could find to center the content of the page uses CSS absolute positioning, with setting the margins of the content div, and having it float in the center of the browser window.
However, this results in the content covering the header and/or the footer when the window's size is reduced.
Instead, I would like the page to scroll when it cannot fit into the window.
Here is a screenshot of the page:
The area with the red border should be vertically centered without covering any of the other elements.
Here is the HTML&CSS I'm using:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Layout Test</title>
</head>
<body>
<div class="wrapper">
<div class="header">Header Content</div>
<div class="articleContainer">
<div class="articleLeft">
<div class="articleTitle">
<h1 class="articleTitle">Title</h1>
</div>
<div class="articleText">
<p>Lorem ipsum ...</p>
</div>
</div>
<div class="articleRight">
<div class="articleImage"></div>
</div>
<div class="stepper">Stepper</div>
</div>
<div class="push"></div>
</div>
<div class="footer">Footer Content</div>
</body>
</html>
CSS:
#charset "UTF-8";
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -48px;
}
.header {
text-align: center;
background-color: #7FF152;
height: 48px;
}
.articleContainer {
background-color: #CCFFFF;
margin-right: auto;
margin-left: auto;
width: 700px;
clear: both;
min-height: 240px;
position: relative;
border: medium solid #FF0000;
}
.articleLeft {
float: left;
height: 450px;
width: 330px;
}
.articleTitle {
text-align: center;
margin: 20px;
}
.articleText {
max-height: 350px;
overflow: auto;
}
.articleRight {
float: right;
height: 450px;
width: 330px;
background: url(articleImage.fw.png) no-repeat center center;
}
.stepper {
clear: both;
text-align: center;
background-color: #FFFF00;
}
.footer {
background-color: #CC6633;
text-align: center;
height: 48px;
}
.footer, .push {
height: 48px; /* .push must be the same height as .footer */
}
I have uploaded both to here: http://cl.ly/3f2o1v0U2c0k
This is the jsfiddle: http://jsfiddle.net/gudmN/1/
Thank you for the help.
1) add margin: 0 auto; height: auto; float: left to .articlecontainer.
2) Make the header and footer float: left; width: 100%; height: 48px
Related
I have a webpage with following structure:
div: (app)
div: (navbar)
div: (wrapper) {position: relative}
div: (intro)
div: (content) {position: absolute}
div: (footer)
where div-content is dynamic that means it should extend if the data inside this div extends from its minimum height.
I am trying to add the footer at the end of the content but since content has absolute position, footer is being placed at the end of Intro.
I am beginner at front-end designing so pardon me if I am missing something basic. Please refer me some reading articles as well related to concepts about positioning divs.
This is my code:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.App {
text-align: center;
}
.navbar {
height: 60px;
background-color: #333;
}
.wrapper {;
position: relative;
border: 4px solid yellow;
}
.intro {
height: 450px;
background-color: blue;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
margin: 0 auto;
padding-top: 70px;
/* align-items: center;
justify-content: center;
display: flex;*/
}
.content {
position: absolute;
top: 250px;
width: 94%;
right: 3%;
left: 3%;
background-color: white;
border-radius: 6px;
box-shadow: 0 2px 15px 0 rgba(61,61,61,.15);
max-width: 960px;
margin: auto;
min-height: 800px;
background-color: gray;
}
.footer {
bottom: 0;
width: 100%;
height: 2.5rem; /* Footer height */
background-color: red;
}
</style>
</head>
<body>
<div class="app">
<div class="navbar">Navbar</div>
<div class="wrapper">
<div class="intro">Intro</div>
<div class="content">Content</div>
</div>
<div class="footer">Footer</div>
</div>
</body>
</html>
NOTE: .content is overlapped with .intro intentionally. and that is why i am using position absolute for .content
Remove position: absolute; from .content. This will fix the overlapping with the footer. The width will need to be adjusted accordingly (make width: 100%).
Updated: .contentto span width
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.App {
text-align: center;
}
.navbar {
height: 60px;
background-color: #333;
}
.wrapper {;
border: 4px solid yellow;
}
.intro {
height: 450px;
background-color: blue;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
margin: 0 auto;
padding-top: 70px;
}
.content {
margin: -250px auto auto;
width: 94%;
background-color: white;
border-radius: 6px;
box-shadow: 0 2px 15px 0 rgba(61,61,61,.15);
max-width: 906px;
min-height: 800px;
background-color: gray;
}
.footer {
width: 100%;
height: 2.5rem; /* Footer height */
background-color: red;
}
</style>
</head>
<body>
<div class="app">
<div class="navbar">Navbar</div>
<div class="wrapper">
<div class="intro">Intro</div>
<div class="content">Content</div>
</div>
<div class="footer">Footer</div>
</div>
</body>
</html>
delete your content min-height. is that what you need?
<html lang="en">
<meta charset="utf-8" />
<head>
<title>Example Page</title>
<link rel="stylesheet" type="text/css" href="Web_Design_01_Stylesheet.css" />
</head>
<body>
<div id="container">
<header>
<div id="static_nav">
<nav class='navbar'>
Home
About Us
Contact Us
Events
login
</nav>
</div>
</header>
<div id="block_two">
<p></p>
</div>
<div id="block_three">
<div id="column-center">
<header>
Column center
</header>
</div>
<div id="column-left">
<header>
Column left
</header>
</div>
<div class="column-right">
<header>
Column right
</header>
</div>
</div>
<div id="block_four">
<p> Block Four </p>
</div>
<div id="end_block">
<footer<p>This is where the footer would go</p>
</footer>
</div>
</div>
</body>
</html>
Here is the css
html {
overflow: hidden;
}
body {
height: 100%;
width: 100%;
max-width: 100%;
overflow-y: auto;
overflow-x: hidden;
margin: 0;
}
div#static_nav{
font-family: Verdana, sans-serif;
padding-top: 10px;
text-align: right;
width: 100%;
height: 7vh;
background-color: #3A3D3F;
position:fixed;
opacity: .90;
color: red;
vertical-align: middle;
}
div#static_nav a{
color: white;
text-decoration: none;
}
.navbar {
padding-right: 20px;
padding-top: 10px;
}
div#container {
margin-top: 10px
height: 10vh
width: 100%;
background-color: #16BA81;
color:;
}
div#block_two{
background-color: ;
padding-top: 10px;
height: 100vh;
background-image: url(sample_image.png);
background-size: cover;
}
div#block_three{
padding-top: 10px;
height: 100vh;
background-color: #FFFFFF;
padding-left: 10px;
}
These are the following columns I would like to line up in a row in the #block_three. I figured that 33% for the width would do the trick but one div column(column right) always gets pushed below the others.
div#column-left{
float: left;
width: 33%;
}
div#column-right{
float: right;
width: 33%;
}
div#column-center{
display: inline-block;
width: 33%;
}
div#block_four{
padding: 10px;
height: 100vh;
background-color: #FFFFFF;
}
div#end_block{
padding: 10px;
background-color: #3A3D3F;
height: 50vh;
}
Try to add these settings:
* {
box-sizing: border-box;
}
html {
margin: 0;
}
You have a padding-left of 10px on the block with the columns which is not calculated into the overall width, so this is probably the reason for your problem. The first of the rules above should hopefully fix that.
EDIT/ADDITION:
I just noticed you float settings on those colums - not good... ;-)
Change all of the them to float-left and change their order in the HTML code to "left/center/right" to simply float them from left to right (the inline-block won't work here)
div#column-left {
float: left;
width: 33%;
}
div#column-right {
float: left;
width: 33%;
}
div#column-center {
float: left;
width: 33%;
}
Hi I have been having a problem with coding my layout I want to have my sidebar stay the same with regardless of screen size, but I also need my content area to be fluid. The header stays at the top which is what I want the problem is the footer I need it to stay always at the bottom and the full width of the content area. If anyone can help it would be muchly appreciated.
Here is my code.
html, body {
height: 100%;
margin: 0;
}
#content {
width: 100%;
height: 100%;
}
#left {
width: 20%;
height: 100%;
float: left;
background-color: red;
}
#right {
float: left;
width: 80%;
height: 100%;
background-color: green;
}
#right header {
background: blue;
text-align: center;
color: white;
padding: 20px;
}
#right footer {
background: brown;
text-align: center;
color: white;
position: absolute;
bottom: 0;
width: 80%;
}
<div id='content'>
<div id='left'>Testing</div>
<div id='right'>
<header>TITLE</header>
<div class="content">
<p>lorem ipsum and the like.</p>
</div>
<footer>FOOTER</footer>
</div>
</div>
Use inline-block over float:left to avoid problems with clearings, but when using inline-block better use vh over % to fill the viewport.
And to have a fixed sidebar, just give it a fixed width and use calc to calculate the remaining space.
you can do something like this:
Snippet
html,
body {
height: 100vh;
margin: 0;
}
#content {
width: 100vw;
font-size: 0; /* fix inline-block gap */
}
#content > div {
font-size: 16px; /* revert font-size 0 */
}
#left {
width: 150px;
height: 100vh;
display: inline-block;
vertical-align: top;
background-color: red;
}
#right {
display: inline-block;
width: calc(100vw - 150px);
height: 100vh;
background: green
}
#right header {
background: blue;
text-align: center;
color: white;
padding: 20px;
}
#right footer {
background: brown;
text-align: center;
color: white;
position: absolute;
bottom: 0;
width: calc(100vw - 150px);
}
<div id='content'>
<div id='left'>Testing</div>
<div id='right'>
<header>TITLE</header>
<div class="content">
<p>lorem ipsum and the like.</p>
</div>
<footer>FOOTER</footer>
</div>
</div>
Here's what you should do :
First, replace the float:left; with display: table-cell; for your #left and #right selectors.
Then, use display: table; for your #content selector.
Then, remove the width: 80%; of your #right and #right footer selectors
Add right : 0; to your #right footer selector
Finally, set the left of your footer and the width of your sidebar to the same fixed with and you're there.
The beauty of this approach, is that it also works on IE8 and other browsers that do not have support for calc().
A demo :
html, body {
height: 100%;
margin: 0;
}
#content {
width: 100%;
height: 100%;
display: table;
}
#left {
width: 100px;
height: 100%;
display: table-cell;
background-color: red;
}
#right {
display: table-cell;
height: 100%;
background-color: green;
}
#right header {
background: blue;
text-align: center;
color: white;
padding: 20px;
}
#right footer {
background: brown;
text-align: center;
color: white;
position: absolute;
bottom: 0;
right : 0;
left : 100px;
}
<div id='content'>
<div id='left'>Testing</div>
<div id='right'>
<header>TITLE</header>
<div class="content">
<p>lorem ipsum and the like.</p>
</div>
<footer>FOOTER</footer>
</div>
</div>
See also this Fiddle.
Background-color is not fully filling the div ( I want to color the div between the navbar and the footer), the background color is only reaching maybe half of the page, is not filling all the way down till the end of the container.
So I hope you guys can help out on getting to the source of the issue, cause I have no idea what could be causing the problem :/
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="styles.css">
<title>FunPic - Share your pictures</title>
</head>
<body>
<div class="container">
<div id="header">
<div id="navtext">
<p>FunPic - Share your pictures</p>
</div>
<div id="menu">
<ul id="navbar">
<li>Inicio</li>
<li>Subir Foto</li>
<li>Contacto</li>
</ul>
</div>
</div>
<div id="wrapper">
<div id="content">
<div id="image"><img src="images/pic.jpg"></div>
</div>
<div id="content">
<div id="image"><img src="images/pic.jpg"></div>
</div>
<div id="content">
<div id="image"><img src="images/pic.jpg"></div>
</div>
<div id="content">
<div id="image"><img src="images/pic.jpg"></div>
</div>
</div>
</div>
<div id="footer">©Fun Pic 2015 - Costa Rica</div>
</body>
</html>
Here's the CSS:
{
max-width: 1024px;
color: red;
margin: auto;
}
html, body {
width: 100%;
margin: 0 auto;
height: 100%;
}
.container {
margin: 0 auto;
width: 100%;
background-color: #E8E8E8;
height: 100%;
}
#header {
margin-bottom: 30;
width: 100%;
height: 50px;
float: left;
background: #8AE6B8;
}
#navtext {
padding: 14;
width: 40%;
float: left;
}
#navtext p {
margin-left: 40%;
}
#menu {
padding: 14;
width: 40%;
float: left;
}
#navbar {
margin-left: 65px;
width: 100%;
float: left;
}
#navbar li {
list-style: none;
margin-right: 10;
display: inline-block;
}
#wrapper {
margin: 30;
width: 100%;
float: left;
}
#content {
margin: 0 auto;
width: 40%;
height: 600px;
display: block;
}
#image {
width: 100%;
margin: 0 auto;
}
#image img {
width: 100%;
}
#footer {
margin: auto;
width: 100%;
height: 50px;
text-align: center;
background-color: #202020;
clear: both;
}
Do it like this
#wrapper {
background-color: #E8E8E8;
}
change #E8E8E8 to any color you want. This will only set the background-color property of your div between navbar and footer divs.
I got it, i noticed i was coloring the CONTAINER instead of the WRAPPER..! ugh... i feel so dumb...
Description:
I am trying to learn to align elements such as divs and headers.
Here's what I have so far > http://jsfiddle.net/QxV6p/
Below are the issues:
The "Main section - in red" is not aligned with the blue header on the right hand side.
I have set the width of the body and the header to the same value of 1000px. And I have set the left div (black) to have a width of 20% and the main div to have a width of 79% (both inside the body) leaving a margin of 10px between the two divs.
I believe I have positioned the div correctly using the "position: relative" feature.
Please suggest what is wrong with the code? Also is there a better way of making the divs (in this case the left/black div and the main/red div) align as if they were inline?
I've tried "display: inline" but for some reason it makes the divs disappear. Any help is appreciated.
Code:
<!DOCTYPE html>
<head>
<style>
header {
max-width: 1000px;
height: 100px;
background: blue;
}
body {
max-width: 1000px;
}
.left {
width: 20%;
height: 2000px;
background: black;
margin-top: 10px;
}
.main {
width: 79%;
height: 2000px;
margin-top: 10px;
background: red;
position: relative;
top: -2010px;
left: 210px;
}
</style>
</head>
<html>
<header>
</header>
<body>
<div class="left"></div>
<div class="main"></div>
</body>
</html>
firstly you need a valid html code
<html>
<body>
<div class="wrapper">
<header>
</header>
<div class="left"></div>
<div class="main"></div>
</div>
</body>
</html>
CSS
header {
max-width: 1000px;
height: 100px;
background: blue;
}
.wrapper {
max-width: 960px;
margin:0 auto;
}
.left, .main {
display:inline-block;
margin-top:10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.left {
width: 20%;
height: 2000px;
background: black;
}
.main {
width: 79%;
height: 2000px;
background: red;
margin-left:4px;
}
DEMO
My recommendations:
Avoid positioning using pixels.
Avoid floats for layout.
KISS: if you want your main content to be 80%, set it to 80%. Manually manouvering it into position will take more time and scales poorly.
Demo (I changed some of the sizes for easier viewing in the fiddle)
HTML
<header></header>
<body>
<div class="left"></div><div class="main"></div>
</body>
CSS
header {
height: 100px;
background: blue;
}
.left {
display: inline-block;
width: 20%;
height: 100px;
background: black;
}
.main {
display: inline-block;
width: 80%;
height: 100px;
background: red;
}
use float:left on each element
see it here
<!DOCTYPE html>
<head>
<style>
header {
max-width: 1000px;
margin: 0 auto;
height: 100px;
background: blue;
}
body {
margin:0;
padding:0;
}
.left {
width: 20%;
height: 2000px;
background: black;
margin-top: 10px;
}
.main {
width: 79%;
height: 2000px;
margin-top: 10px;
background: red;
position: relative;
top: -2010px;
left: 210px;
}
.wrapper{
margin:0 auto;
}
.container{
margin: 0 auto;
width: 1200px;
}
</style>
</head>
<html>
<body>
<header>
</header>
<div class="wrapper">
<div class="container">
<div class="left"></div>
<div class="main"></div>
</div>
</div>
</body>
</html>
You can use float:left instead of using "top and left position"
Here is the updated Code:
HTML
<body>
<header></header>
<div class="left"></div>
<div class="main"></div>
</body>
CSS
header {
max-width: 1000px;
height: 100px;
background: blue;
}
body {
max-width: 1000px;
}
.left {
width: 20%;
height: 2000px;
background: black;
margin-top: 10px;
float:left;
}
.main {
width: 78%;
height: 2000px;
margin-top: 10px;
background: red;
float:left;
margin-left:2%;
}
And Working Demo for the same
Hope this helps!!!