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.
Related
So i have this construction as template, it work fine with full content on page and fork not fine if text or images dont fill all height, then columns and content div look cutted if i color their fields.
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/grad.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/menu.css">
<style type="text/css">
</style>
</head>
<body>
<div id="header">
<div align="center"><img src="img/tsu._e.png" border="0" align="middle"></div>
</div>
<div id="gradient"></div>
<div id="content">
<div id="content1">
<div id="content2">
<div id="content3">
<div id="center">
</div>
</div>
<div id="left"></div>
</div>
</div>
<div id="right"></div>
</div>
<div id="footer"></div>
</body>
</html>
css:
* { margin:0px; padding:0px; }
html { height:100%; }
body { min-height:100%; position:relative; min-width:800px; }
* html body { height:100%; }
#header { background:#0000FF; height:100px; width:100%; }
#content { width:100%; padding-bottom:60px; width:expression(document.body.clientWidth > 805 ? "100%" : "805px"); overflow:hidden; }
#content1 { width:100%; float:left; margin-right:-180px; }
#content2 { background:#000000; margin-right:180px; }
#content3 { width:100%; float:right; margin-left:-200px; }
#left { background:#FFFFFF; width:200px; float:left; }
#center { background:#FFFF; margin-left:200px; }
#right { background:#FFFFFF; float:right; width:180px; }
#min_width { width:800px; }
#footer { position:absolute; bottom:0px; background:#0000FF; width:100%; height:60px; }
gradien hight 3px
Question: why div with id=content dont fill 100% height? and how repair it in this case?
Instead of
height:100%;
use
height:100vh;
Seems you don't have 100% in #content
#content { width:100%; padding-bottom:60px; width:expression(document.body.clientWidth > 805 ? "100%" : "805px"); overflow:hidden;
try
#content { height:100%; padding-bottom:60px; width:expression(document.body.clientWidth > 805 ? "100%" : "805px"); overflow:hidden;
and you have all the inner div empty
take of the position relative of your body and give a height: 100% to your content
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 want to have a page like this.
After trying some CSS and HTML code like this:
CSS Code:
html,body{
margin:0px;
background-color:#CCC;
}
#header{
background-color:#FFF;
height:350px;
width:750px;
display:block;
}
#menu{
background-color:#096;
height:60px;
width:100%;
display:block;
}
#content{
background-color:#03F;
width:750px;
height:400px;
}
#footer{
background-color:#900;
height:120px;
width:750px;
display:block;
bottom:0px;
position:relative;
}
HTML Code:
<center>
<div id="header">
</div>
<div id="menu">
</div>
<div id="content">
</div>
<div id="footer">
</div>
</center>
it was the same thing but after making some text into "content" part divs got separate. like thisThis.
Whats the issue in my CSS code?
It is Because p tag have some default margin.
Add CSS like this
p{
margin:0px;
}
Fiddle
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>
Hello I am trying to vertical and horizontally align 4 divs inside each other with CSS but nothing is working for me.
Please help me! Thanks in advance
My CSS Please note this is just 1 method ive tried I have been sitting here for about 2 hours messing with this and couldnt figure it out.
* {
margin:0px;
padding:0px;
}
body {
background-color:#454545;
}
.wrapper {
margin:auto;
width:960px;
}
.circle-wrapper {
height:918px;
width:918px;
background-image:url(images/overlay.png);
background-size:cover;
background-position:center center;
background-repeat:no-repeat;
position:absolute;
text-align:center;
margin:auto;
}
.outer-inner-background {
background-image:url(images/center-circle.GIF);
background-size:cover;
background-position:center center;
background-repeat:no-repeat;
position:relative;
height:494px;
width:494px;
margin:auto;
}
.outer-inner-rings {
background-image:url(images/inner-outer-rings.PNG);
background-size:cover;
background-position:center center;
position:relative;
width:494px;
height:494px;
margin:auto;
}
.inner-image {
position:relative;
height:308px;
width:308px;
margin:auto;
}
My HTML: I don't care if the structure changes it just needs to work
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Untitled Document</title>
</head>
<body>
<div class="wrapper">
<div class="circle-wrapper">
<div class="outer-inner-background">
</div>
<div class="outer-inner-rings">
</div>
<div class="inner-image">
<img class="inner-img" src="images/inside-image.PNG" width="308px" height="308px">
</div>
</div>
</div>
</body>
</html>
here my try http://dabblet.com/gist/4013306
code:
css
div {overflow:hidden}
#first {
background:red;
width:400px;
height:400px;
border-radius:300px;}
#second {
background:grey;
height:95%;
width:95%;
border-radius:300px;
margin:2.5%}
#third {
background:green;
height:70%;
width:70%;
border-radius:200px;
margin:15%;}
#forth {
background:black;
height:95%;
width:95%;
border-radius:200px;
margin:2.5%;}
html
<div id="first">
<div id="second">
<div id="third">
<div id="forth"></div>
</div>
</div>
</div>
Try using position: relative; on the container, and position: absolute; on the circles with suitable left and top values to place them in the middle.
Well, you can use absolute positioning in your inner divs where left and top positions are always set to (Parent element width - child element width /2). Here's my code
html
<div id="red">
<div id="grey">
<div id="green">
<div id="black">
</div>
</div>
</div>
</div>
CSS
div
{
border-radius:100%;
}
#red
{
position:relative;
margin-left:auto;
margin-right:auto; /** centers #red on screen **/
background-color: #F00;
width:400px;
height:400px;
}
#grey
{
background-color:#CCC;
position:absolute;
top:20px;
left:20px;
width:360px; /** 400 - 360 = 40/2 = 20px for left and top **/
height:360px;
}
#green
{
background-color:#0E0;
position:absolute;
top:40px;
left:40px;
width:280px;
height:280px;
}
#black
{
background-color:#000;
position:absolute;
left:20px;
top:20px;
width:240px;
height:240px;
}
Here's the fiddle:
http://jsfiddle.net/brunovieira/pmN4z/
Fiddle with #red centered on screen:
http://jsfiddle.net/brunovieira/pmN4z/2/
Does it need to be 4 divs? try this:
http://jsfiddle.net/vSyWZ/2/
HTML
<div class="outer">
<div class="inner"><div>
</div>
CSS
div{position:relative; margin:0 auto;}
.outer{width: 350px; height: 350px; background-color: gray; border-radius: 100%; border:10px solid red; vertical-align: middle;}
.inner{width: 200px; height: 200px; background-color: black; border-radius: 100%; border:10px solid green; top:60px;}
I tested on Chrome and Firefox and works fine, IE doesn't have support for rounded corners but it is centered.