UPDATE
After doing some testing and localhost modifications I have found out what I need:
The website must not be scrollable, only the content area.
When zooming the sidebar height should stay consistently to the bottom of the page.
The header must also zoom in and out but remain full width
Fiddle:
http://jsfiddle.net/dkx2q/2/
Something like this maybe:
CSS
body{
background-color:rgb(0,0,0);
}
#container{
display:block;
width:100%;
height:100%;
}
#fullScreenImage{
float:left;
width:25%;
height:100%;
background-color:rgb(124,197,118);
position:relative;
}
#content{
float:left;
width:75%;
height:100%;
}
#header{
display:block;
height:15%;
background-color:rgb(94,142,178);
position:relative;
}
#sidebar{
float:left;
height:85%;
width:20%;
background-color:rgb(162,94,179);
position:relative;
}
#contentArea{
float:left;
width:80%;
height:85%;
background-color:rgb(255,255,255);
position:relative;
}
span{
position:absolute;
top:50%;
width:100%;
text-transform:uppercase;
font-weight:bold;
font-family:Helvetica, 'Helvetica Neue', 'Arial Block', Arial;
font-size:9em;
text-align:center;
}
#header span{
font-size:7em;
top:40%;
}
HTML
<body>
<div id='container'>
<div id='fullScreenImage'><span>Full Screen Image</span>
</div>
<div id='content'>
<div id='header'><span>Header</span></div>
<div id='sidebar'>
<span>Sidebar</span>
</div>
<div id='contentArea'><span>Content Area</span></div>
</div>
</div>
</body>
Related
EDIT
I corrected a typo and updated the JSFiddle and this post to reflect the change. The Headline should be taking up 100% height and it isn't. Still looking for thoughts.
This is looking just as I want it on desktop. I can't figure out why on mobile it won't take up 100% of the height and stack on top of each other. The Headline also loses the color background. Here's the JSFiddle
HTML
<div class="about-header">
<h2>Headline</h2>
</div>
<div class="about-section">
<div class="about-text">
<p>The first chunk of text to let users know they gotta read a
little bit. If they want. It's not mandatory or anything.</p>
<p>The second group of text, a nice chunk of descriptive text that
explains some more about this website. It really hopes you can help
me troubleshoot this problem that I am facing.</p>
<p>Another grouping of text goes right in this little section here
that should go on for a while.</p>
</div><!-- END ABOUT TEXT -->
</div> <!-- END ABOUT SECTION-->
</section>
</div><!-- END CONTAINER -->
CSS
*{
margin:0;
padding:0;
}
html{
font-size:62.5%;
}
html,
body{
height:100%;
background-color:#FFF;
color:#000;
font-family:"Arial", "Helvetica", sans-serif;
font-size:12px;
font-size:1.2rem;
}
.container{
width:100%;
height:100%;
}
.container *{
box-sizing:border-box;
}
.row{
min-width:85%;
margin:0 auto;
}
.row:before,
.row:after{
content:"";
display:table;
clear:both;
}
#about{
height:100%;
}
.about-header{
width:100%;
height:100%;
background-color:lightblue;
position:relative;
}
.about-header h2{
display:table-cell;
vertical-align:middle;
text-align:center;
text-transform:uppercase;
}
.about-section p{
font-size:1rem;
padding-left:1.2rem;
padding-right:3rem;
padding-bottom:1.5rem;
}
.about-text{
display:table-cell;
vertical-align:middle;
}
.about-section{
width:100%;
height:100%;
position:relative;
}
/**** MEDIA QUERY****/
#media all and (min-width:500px){
.about-section{
width:50%;
height:100%;
background-color:#FFF;
left:50%;
display:table;
position:absolute;
}
.about-header{
width:50%;
height:100%;
background-color:lightblue;
right:50%;
display:table;
position:absolute;
}
}
You have a typo.
.about-head{
width:100%;
height:100%;
background-color:lightblue;
position:relative;
}
Should be:
.about-header {
width:100%;
height:100%;
background-color:lightblue;
position:relative;
}
I'm currently trying to fully understand how all the positioning code works and to make everything responsive in my website. I've come across a rather irritating issue.
THE ISSUE
-I have a div that is positioned relative (id: news_content) and is within a div that is positioned absolute (id: page). When I try to move news_content using positioning commands top and left, left is the only one that is reacting. While the top command isn't moving news_content at all.
/*Global*/
body {
margin:0;
padding:0;
}
div {
margin:0;
padding:0;
top:0;
left:0;
bottom:0;
right:0;
}
table {
margin:0;
padding:0;
border-spacing:0;
}
/*Global Divs*/
#page {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
}
#nav_main {
background-color:black;
width:100%;
height:14%;
position:fixed;
z-index:0;
}
/*Navigation*/
#nav_content {
background-color:gray;
width:12.5%;
height:86%;
position:fixed;
top:14%;
z-index:-1;
}
#nav_side_container {
background-color:black;
width:60%;
height:93%;
position:relative;
top:3.5%;
left:18.75%;
}
#nav_side {
background-color:red;
width:75%;
height:93%;
position:relative;
top:3.5%;
left:12.75%;
}
#nav_side table {
width:100%;
height:100%;
font-family:'Playball';
font-size:1.25em;
font-weight:bold;
text-align:center;
}
#nav_side table td {
width:100%;
height:33.33%;
border-top:0.1em solid black;
}
/*News*/
#news_content {
background-color:red;
width:87.5%;
height:86%;
position:relative;
top:14%;
left:12.5%;
z-index:-2;
}
/*
#news {
background-color:black;
width:10em;
height:10em;
position:relative;
left:10em;
}
#news_main {
background-color:blue;
width:10em;
height:10em;
position:relative;
}
#news_side {
background-color:green;
width:10em;
height:10em;
position:relative;
}
/*Articles*/
#articles_content {
background-color:blue;
width:87.5%;
height:86%;
position:relative;
left:12.5%;
z-index:-2;
}
/*Future Plans*/
#future_content {
background-color:green;
width:87.5%;
height:86%;
position:relative;
left:12.5%;
z-index:-2;
}
<div id="page">
<div id="nav_main">
</div>
<div id="nav_content">
<div id="nav_side_container">
<div id="nav_side">
<table>
<tr>
<td>News</td>
</tr>
<tr>
<td>Articles</td>
</tr>
<tr>
<td>Future<br>Plans</td>
</tr>
</table>
</div>
</div>
</div>
<div id="news_content">
<div id="news">
</div>
<div id="news_main">
</div>
<div id="news_side">
</div>
</div>
<div id="articles_content">
</div>
<div id="future_content">
</div>
</div>
..
-No idea what the problem is to be truthfully... It could be my knowledge on how relative and absolute positioning is wrong or my code being complete haywire.
It's because your #page id doesn't have a height on it. If you give it height: 100%;, that should do it.
I have a similar issue to White space appears below sticky footer, only in PHP and have tried various solutions similar to Footer position issue - CSS
My footer was centered below my content but when this content was too short there was a lot of white space. I amended my CSS to move the footer to the bottom of the page unless the content was longer but it now positions the footer over the content and to the left whereas I want it center and at the bottom.
The page also looks different between IE8 and Chrome.
My PHP page results in the following HTML:
<html><head><link rel="stylesheet" type="text/css" href="stylesheet.css"></head>
<body><div id="container"><div id="header"><p>Text</p></div>
<div id="navbar"><ul><li>1</li><li>2</li><li>3</li></ul></div>
<div id="content"><p>test</p></div><br />
<div id="footer"><hr><p>text</p>
<p>Copyright © text</p></div>
</body>
</html>
and the CSS:
body {
font-size:100%;
font-family:Arial, Helvetica, sans-serif;
font-size:1.075em;
background-image:url(images/gradient.jpg);
background-repeat:repeat-x;
margin:0;
padding:0;
height: 100%;
}
#container {
font-family:Arial, Helvetica, sans-serif;
font-size:1.075em;
min-height:100%;
position:relative;
height:100%;
}
#content {
margin-left:200px;
margin-right:100px;
padding:18px;
padding-bottom:128;
}
#footer {
clear:both;
margin-left:auto;
margin-right:auto;
text-align:center;
position:absolute;
bottom:0;
height:128px;
width:100%;
}
#navbar {
position:fixed;
float:left;
width:180px;
margin:0;
padding:6px;
}
#navbar ul {
margin:0;
padding:0;
list-style:none;
}
#navbar li {
margin:0;
padding:1px;
display:block;
list-style:none;
font-family:"Stencil", Helvetica, sans-serif;
text-align:center;
}
Set
#container {min-height:400px;}
and your problem should be fixed.
My code is viewable at http://jsfiddle.net/ATbA5/2/ code will also be at the end of this post
I am trying to make content-wrapper 100% height however for it to be centered. I have looked at other theards on stackoverflow and Can't find a solution. Also A fixed footer at the end of the page not the bottom of the broswer window
HTML
<head>
<link rel="stylesheet" type="text/css" href="primary-resources/css/main-styles.css"/>
</head>
<body>
<div class="content-wrapper">
<!-- Header -->
<div class="header">
<div class="threetwentyleft">
<img src="primary-resources/imgs/header-logo.png" />
</div>
<div class="sixfortyright">
<div class="gameAdBanner">
<img src="game-resources/gameone/imgs/banner.png"/>
</div>
</div>
</div>
<!-- Content -->
<div class="gameLeft"></div>
<div class="gameRight"></div>
</div>
</body>
</html>
CSS
body ,html {
background-color:#000000;
height:100%;
top:0px;
bottom:0px;
clear:both;
padding:0px;
margin:0px;
}
.content-wrapper {
margin:auto;
background-color:#ffffff;
width:960px;
padding:0px;
bottom:0;px;
top:0px;
margin:auto;
box-sizing:border-box;
height:100%;
box-sizing:border-box;
clear:both;
box-sizing:border-box;
}
.header {
width:100%;
}
.threetwentyleft {
width:320px;
float:left;
padding:2px;
}
.threetwentyleft img{
width:320px;
padding:2px;
border:0px;
}
.sixfortyright {
width:630px;
float:right;
height:130px;
}
.gameAdBanner {
width:610px;
margin-top:2px;
margin-left:auto;
margin-right:auto;
}
.center {
margin-left:auto;
margin-right:auto;
}
.gameLeft {
width:700px;
padding:5px;
float:left;
}
.gameRight {
width:260px;
background-color:#CCC;
float:right;
padding:5px;
height:100%;
margin-right:3px;
}
.footer {
width:960px;
background-color:#FC6;
bottom:0px;
height:25px;
position:absolute;
}
Sounds like you want normal html behaviour, no need for any css, just add a div, or any block element after the content.
I want a header,body and footer.I have coded it.when I alter the codes the footer either sits below the body when i give it like this
HTML CODE:
<div id="body" style="background-image:url(img/bg.png);" class="body">
<div id="title" class="title">
<h1><strong></strong></h1>
</div>
<div id="desc" class="desc">
<p style="desc p"></p>
</div>
</div>
<div id="footer" style="background-image:url(img/bottom_bar.png);" class="footer">
<div><h6 class="footer h6">2011-FOOOTER</h6><img src="img/info.png" alt="" /></div>
</div>
CSS CODE:
.body
{
float:left; float:left; width:100%; height:100%; min-height: 100%; overflow-y: scroll;
}
.title
{
width:85%; font-weight:bold; float:left; font-size:20px; margin-top:3%; margin-bottom:2%; margin-left:5%; color:#FFFFFF;
}
.desc
{
width:90%; font-size:15px; margin-left:5%; margin-right:5%; float:left; color: #FFFFFF; overflow:auto; text-align:justify; line-height:18px;
}
.desc p
{
margin-top:0;
}
CSS CODE of footer:
.footer
{
float:left; width:100%; line-font-size:15px; padding:0px; bottom:0px; height:25px; font-size:18px;
}
when I code it as below,the footer sits on the body and when you go down you can see the text below the footer
.footer
{
float:left; width:100%; position:absolute; line-font-size:15px; padding:0px; bottom:0px; height:25px; font-size:18px;
}
I want the footer to be fixed to the bottom of the screen and want the text to scroll without the scroll bar.
Could someone suggest what is the mistake I have done and where?
Try this styles for which to see scrollbar just remove overflow:hidden in body
html,
body {
margin:0;
padding:0;
height:100%;
overflow:hidden;
}
#wrapper {
min-height:100%;
position:relative;
}
#header {
background:#ededed;
padding:10px;
}
#content {
padding-bottom:100px; /* Height of the footer element */
}
#footer {
background:#ffab62;
width:100%;
height:100px;
position:fixed;
bottom:0;
left:0;
}
Sure you will get footer pushed under body with 100% height of body, with no space for footer to stay in your view, you need to solve it, anyway this question is so common, your words maybe not helped you, simply you need to search about "Sticky Footer" a lot of questions answered here or simply with magic of Google you can see :
http://ryanfait.com/sticky-footer/
and http://www.cssstickyfooter.com/
And learn about it.
Good luck.
in the footer class
Instead of
position:absolute;
use
position:fixed;
this should work