I'm new to CSS and im tryig to create the barebones structure of my template.
I have a div for header, main-content & footer. My footer & header fine, but i need to the main content div to "fill" the remaining space between the header & the footer. I've tried setting the padding-bottom property as the same height as the footer, but its not closing the gap to the footer, its simply setting the height of the div to the padding-bottom value.
My HTML
<!DOCTYPE html>
<HTML>
<HEAD>
<LINK type="text/css" rel="stylesheet" href="main.css"/>
<TITLE>Template</TITLE>
</HEAD>
<BODY>
<div id="container">
<div class="header"></div>
<div class="main-content"></div>
<div class="footer"></div>
</div>
</BODY>
</HTML>
And the Cascading style sheet.
#container{
min-height:100%;
position:relative;
}
.header{
border:2px dashed blue;
height:150px;
border-radius:5px;
padding:10px;
}
.main-content{
border:2px dashed blue;
border-radius:5px;
padding:10px;
padding-bottom:100px;
}
.footer{
position:absolute;
bottom:0;
width:100%;
height:100px;
border:2px dashed blue;
border-radius:5px;
}
html, body{
margin:0;
padding:1px;
height:100%;
}
You can use calc() for your .main-content
.main-content {
border:2px dashed blue;
border-radius:5px;
padding:10px;
height: calc(100% - 300px);
}
Demo
Also, I've tweaked few things here and there, for example, you won't need padding-bottom anymore, also, instead of using min-height: 100%; you should be using height: 100%;, and don't use uppercase-lowercase tags, keep an habit of writing the tags in lower case only.
Related
I am trying to add a min width to a div that uses a fixed position. I'm not sure if its possible my code below works fine if I remove the fixed positioning.
What I am trying to achieve is to protect the text in the red area (contains links) from being resized below certain 200px;
EDIT THIS IS THE FULL CODE
<!doctype html>
<html>
<head>
<style>
#header{
height:60px;
width:100%;
background-color:#000;
position:fixed;
top:0;
left:0;
}
#leftdiv{
width:15%;
height:200px;
background-color:#ED6062;
float:left;
position:fixed;
left:0;
top:60px;
min-width:100px;
}
#middlediv{
width:25%;
height:200px;
background-color:#F0E92B;
float:left;
position:fixed;
left:15%;
top:60px;
}
#rightdiv{
width:60%;
height:200px;
background-color:#26D978;
float:left;
position:fixed;
left:40%;
top:60px;
}
</style>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<div id='header'></div>
<div id='leftdiv'>Contains links</div>
<div id='middlediv'></div>
<div id='rightdiv'></div>
</body>
</html>
JSFiddle https://jsfiddle.net/85mpvxo7/
The min-width works as expected, your problem is that #middlediv has left: 15% and is on top of #leftdiv and #leftdiv is actually wider than you can see it behind #middlediv.
I'm not sure if it fullfills all your requirements, but check this, I'm using a div wrapper with grid display so the left grid item has a width with max-content. Then the other two divs need to use the rest of the space so I put them inside another div. https://jsfiddle.net/n3o679pf/
EDIT: It can be cleaner using just a flex on the wrapper https://jsfiddle.net/n3o679pf/2/ so no need for that ugly #therest div I put using a grid.
<div id='header'></div>
<div id='wrapper'>
<div id='leftdiv'>Contains links</div>
<div id='middlediv'></div>
<div id='rightdiv'></div>
</div>
and the CSS
#wrapper {
display: flex;
width: 100%;
position: fixed;
top:60px;
margin: 0;
}
#leftdiv{
height:200px;
background-color:#ED6062;
min-width:200px;
}
#middlediv{
width:35%;
height:200px;
background-color:#F0E92B;
}
#rightdiv{
width:65%;
height:200px;
background-color:#26D978;
}
Can anyone help me?
My code below is not working in responsive mode.
Parent container placement should be at the right side of the screen.
Here's my code
.parent {
position:relative;
width:250px;
border:1px solid red;
height:200px;
}
.child {
position:absolute;
width:100%;
left:-100px;
right:-100px;
border:1px solid blue;
}
<div class="parent">
<div class="child">
<p>Need width 100% by screen resolution</p>
</div>
</div>
Like so:
html,body{
margin:0; padding:0;
}
.main{
width:980px; background:darkGreen; margin:0 auto;
}
.rel{
width:400px; height:200px; background:#000; margin:0 auto; position:relative;
}
.abs{
width:550px; height:100px; background:yellow; position:absolute; left:-75px; top:50px;
}
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<meta http-equiv='content-type' content='text/html;charset=utf-8' />
</head>
<body>
<div class='main'>
<div class='rel'><div class='abs'></div></div>
</div>
</body>
</html>
.child {
position:absolute;
width:150%;
border:1px solid blue;
}
You don't need to have left and right values when you have width, unless you want to specify the position.
A left:0; means that the leftmost part of the div is at the leftmost part of its parent div while a right:0; means that the rightmost part of the div is at the rightmost part of its parent div- this could act as a replacement for the width as
left:0;
right:0;
is similar to
left:0;
width:100%;
With this, you could specify a
left:0;
right:-10%;
and it would be equivalent to a
left:0;
width:110%;
P.S. you could also use VW and VH instead of %.
A 100% refers to the full size of the parent while a 100vw refers to the full width of the viewport.
remove position:relative from parent and in your code you forget one semi colon (;) after right property of your .child.it,s important to put a semi colon after every property in css.
html,body{
width:100%;
height:100%;
}
.parent {
/*position:relative;*/
width:250px;
border:1px solid red;
height:200px;
}
.child {
position:absolute;
width:100%;
left:-100px;
right:-100px;
border:1px solid blue;
}
<div class="parent">
<div class="child">
<p>Need width 100% by screen resolution</p>
</div>
</div>
I'am trying to have header,content and footer as dynamic fields. Tried a lot of different solutions, and it must work in multiply instances. I need a the scroller only in content area, so I haven't used absolute zero on the footer. But uses table layout.
If you look at the code snippet, you can see that the content #wrapper(yellow) have the same size as content. But I can't get the scoller when content (#overflow, black) get heigher than the wrapper.
I know a little script can solve this, but is it possible just With CSS??
The link below is something simular but there is no good answer. Maybe this can be, If it is possible to get a working scroller in content area.
CSS 100% height layout. Fluid header, footer and content. In IE10 and firefox
<style>
body {
margin:0;
padding:0;
height:100%;
width:100%;
overflow:hidden;
}
#wrap {
height: 150px;
width: 400px;
display:table;
position:absolute;
text-align:center;
table-layout:fixed;
border:1px solid black;
}
#header{
display:table-row;
border:1px solid red;
background:green;
}
#content{
height: 100%;
background:blue;
display:table-cell;
}
#wrapper{
width:100%;
min-height:100%;
box-sizing:border-box;
border:10px solid yellow;
position:relative;
overflow:scroll;
display:block;
}
#footer{
width: 100%;
display:table-row;
background:green;
}
</style>
<body>
<div id="wrap">
<div id="header">
HEADER
</div>
<div id="content">
<div id="wrapper">
<div id="overflow" style="height:50px;width:1px;border:10px solid black;"></div>
</div>
</div>
<div id="footer">
FOOTER
</div>
</div>
</body>
You should specificy a height for the wrapper element
#wrapper{
width:100%;
/*min-height:100%;*/
height:100px;
box-sizing:border-box;
border:10px solid yellow;
position:relative;
overflow:scroll;
display:block;
}
Here the working Fiddle with your example.
I wanted to fit my site to browser i tried this and when i try the " width=100%
height=100% " for body's css it does ok and when i tried that with container's div it sort of disappears meaning the background color is not seen
This is html:
<html>
<head>
<title>Untitled</title>
<link href="css/stylesheet1.css" rel="stylesheet" type="text/css"/>
<link rel="icon" type="image/x-icon" href="images/favicon.ico" /></head>
</head>
<body>
<div id="container">
<div id="header">
<div class="logo">
<div id="logo">Logo</span></div>
</div><!--Logo-->
<div class="search-bar">Search BAr</div>
</div>
</div>
</body>
</html>
this is CSS
body{
width:100%;
height:100%;
margin: 0;
background:#CCC;
}
#container{
width:100%;
height:100%;
margin:0 auto;
background:#000;
}
#header{
width:100%;
height:12%;
float:left;
background:#F00;
}
.logo{
width:50%;
height:100%;
float:left;
background:#0F0;
}
.search-bar{
width:50%;
height:100%;
float:left;
color:#FFF;
font-family: 'century gothic';
text-align:center;
margin-top:20px;
}
#logo
{
width:100%;
height:100%;
float:left;
font-size:48px;
color:#FFF;
font-family: 'century gothic';
text-align:center;
margin-top:20px;
}
I am in trouble help me plzzz
If you want to apply height in % the parent element should have height set explicitly.
So if you simply set height property, the parent tag html doesn't have any height set so it'll take 0 height.
Update: Solved Fiddle
If you want to match it to the browser you could best use this.
CSS
body {
width: 100vw;
height: 100vh;
}
the vh, and vw represent percentage according to viewport width/height;
Please check this link when you set width and height
div{width:auto;height:auto;}
it will set automatically
see this link
http://www.w3schools.com/cssref/playit.asp?filename=playcss_width&preval=auto
If you want the size of an element to be the size of the browser then it has to be a direct child of the body and you need to add this style to the body:
body, html {
width: 100%;
height: 100%;
}
I am trying to do a dynamic grid layout with links to other pages, consisting of a picture and a text.
The problem is that I don't seem to find any way of introducing a whitespace (padding/margin) after the grid layout. In other words, The page ends exactly where the main div ends.
Here is the code. Any help is greatly appreciated, as I have tried a lot of methods, and neither one of them worked. Thanks a lot.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" media="screen" href="resources/index.css" />
</head>
<body>
<div class="header"></div>
<div class="body">
<!-- this is the standard link to each category, which will be inserted n times .. the problem is visible after inserting it a min of 12 times-->
<a href="" class="categorie">
<img src="imgs/asd.png" class="imagine"/>
<div class="nume"> </div>
</a>
</div>
</body>
</html>
CSS :
html
{
background-color:Grey;
height:auto;
}
body
{
display: table;
padding:20px;
margin: 0 auto;
height:100%;
}
.header
{
background-color:white;
width:700px;
margin-left:auto;
margin-right:auto;
margin-top:40px;
height:75px;
}
.body, .body>html
{
background-color:black;
width:700px;
margin-top:5px;
margin-left:auto;
margin-right:auto;
margin-bottom:20px;
padding-bottom:20px;
position:absolute;
display:block;
height:auto;
}
.categorie
{
background-color:white;
margin-left:20px;
float:left;
margin-top:20px;
height:180px;
width:150px;
}
.imagine
{
width:150px;
height:150px;
}
.nume
{
background-color:green;
width:150px;
height:30px;
margin-top:-5px;
}
I'm not sure exactly why there was a display: table on the body element, you said:
"Because I use position:absolute in the .body class.. otherwise, the .body will not extend to encapsulate all of the links."
So I was able to remedy both problems by removing both the display: table from the body element and position: absolute from the body class, then added overflow: auto to the body class.
The CSS:
body{
padding:20px;
margin: 0 auto;
height:100%;
}
.body, .body>html {
background-color:black;
width:700px;
margin-top:5px;
margin-left:auto;
margin-right:auto;
margin-bottom:20px;
padding-bottom:20px;
display:block;
height:auto;
overflow: auto;
}
The JSFiddle:
http://jsfiddle.net/Artsen/VhSdg/
Here is a working fix, in case for some reason, you'd want to keep the body table display.
http://jsbin.com/agucar/2/edit
First change
.body, .body>html
{
position:absolute;
}
to
.body /* removing .body>html didn't change a thing, meaning it was useless */
{
float: left;
}
That way you will be able to clear the floats with a clearfix div (as if correctly relatively positioned) and if you keep your clearfix div transparent, the height you give it will serve as "margin".
Add <div id="clearfix"></div> after <div class="body"></div>, and give the clearfix this CSS:
#clearfix {
height: 20px;
width: 100%;
position: relative;
clear: both;
}
EDIT: Artsen's answer works too, and if you don't need to keep the .body {display: table}, his answer is more suited.