I have a header with width: 100% and I want to make it automatically adjustable not only to screen width, but to page full width that can be stretched beyond screen width by other elements. I can do it with JS, but I wonder if it is possible to use pure CSS to achieve this.
In the example below the A block is intended to be the same size as the B block, but it is much shorter on small screens (just scroll everything to the right and you can see).
html,body{
position:relative; width:100%;
}
#A{
position:relative; width:100%;
background:lightblue; color:white;
}
#B{
position:relative; width:5000px;
background:darkblue; color:white;
}
<html>
<head></head>
<body>
<div id="A">A</div>
<div id="B">B</div>
</body>
</html>
Any ideas?
You can try adding display: grid to the container, in this case body
body {
display: grid;
}
#A {
background: lightblue;
color: white;
}
#B {
position: relative;
width: 5000px;
background: darkblue;
color: white;
}
<html>
<head></head>
<body>
<div id="A">A</div>
<div id="B">B</div>
</body>
</html>
If you wrap the two divs (A & B) inside another you can achieve this.
html,body{
position:relative; width:100%;
}
#A{
position:relative; width:100%;
background:lightblue; color:white;
}
#B{
position:relative; width:5000px;
background:darkblue; color:white;
}
.header-wrap { display: inline-block; }
<html>
<head></head>
<body>
<div class="header-wrap">
<div id="A">A</div>
<div id="B">B</div>
</div>
</body>
</html>
html,
body {
position: relative;
width: 100%;
}
#B {
position: absolute;
width: 100%;
top: 100%;
left: 0;
background: lightblue;
color: white;
}
#A {
position: relative;
width: 5000px;
background: darkblue;
color: white;
min-width:100%;
}
<div id="A"><div id="B">B</div>A</div>
Try giving your A div a max-width of 5000px as well as width:100%
#A{
position:relative;
width:100%;
max-width:5000px;
background:lightblue;
color:white;
}
Related
I am frustrated trying to fix this issue, but couldn't tackle it.
I have a simple html page structure:
header div, body div, and a footer div.
The problem is that the content of the body div (.form-container) affects the margin of the body div itself (.body-container).
Example:
body {
margin: 0px;
}
.header-container {
height: 250px;
width: 100%;
background-color: red;
}
.body-container {
height: 500px;
width: 100%;
background-color: green;
background: #fff url('http://www.htmlcodetutorial.com/document/paper.gif') repeat scroll left top;
}
.footer-container {
height: 150px;
width: 100%;
background-color: blue;
}
.form-container {
margin-bottom: 30px;
margin-top: 30px;
}
<div class="header-container"></div>
<div class="body-container">
<div class="form-container"></div>
</div>
<div class="footer-container"></div>
How do I get rid of this margin in the body div?
This is due to margin collapsing
This is expected behaviour, Mozilla Developer Network states:
If there is no border, padding, inline content, or clearance to separate the margin-top of a block from the margin-top of its first child block, or no border, padding, inline content, height, min-height, or max-height to separate the margin-bottom of a block from the margin-bottom of its last child, then those margins collapse. The collapsed margin ends up outside the parent.
Mastering margin collapsing
In this case the conditions are met by .body-container and .form-container so the margin of .form-container ends up outside .body-container.
What can you do?
There are a number of ways you can stop this behaviour although the easiest would be to use padding instead of margin on .form-container as padding does not collapse.
body {
margin: 0px;
}
.header-container {
height: 250px;
width: 100%;
background-color: red;
}
.body-container {
height: 500px;
width: 100%;
background-color: green;
background: #fff url('http://www.htmlcodetutorial.com/document/paper.gif') repeat scroll left top;
}
.footer-container {
height: 150px;
width: 100%;
background-color: blue;
}
.form-container {
padding: 30px 0;
}
<div class="header-container"></div>
<div class="body-container">
<div class="form-container"></div>
</div>
<div class="footer-container"></div>
There is a div .form-container in body div in which follwing css is applied
.form-container{
margin-bottom:30px;
margin-top:30px;
}
Because there is no content in this div its showing top and bottom margin so u can use float:left or dislay:inline property of you cant remove the css or if you can then simply remove this css.
<html>
<head>
<style>
body{
margin:0px;
}
.header-container{
height:250px;
width:100%;
background-color: red;
}
.body-container{
height:500px;
width:100%;
background-color: green;
background: #fff url('http://www.htmlcodetutorial.com/document/paper.gif') repeat scroll left top;
}
.footer-container{
height:150px;
width:100%;
background-color: blue;
}
.form-container{
margin-bottom:30px;
margin-top:30px;
float:left;
}
</style>
</head>
<body>
<div class="header-container"></div>
<div class="body-container">
<div class="form-container">
</div>
</div>
<div class="footer-container"></div>
</body>
</html>
Add "margin-top:-30px" to the .body-container part
<html>
<head>
<style>
body{
margin:0px;
}
.header-container{
height:250px;
width:100%;
background-color: red;
}
.body-container{
margin-top:-30px;
height:500px;
width:100%;
background-color: green;
background: #fff url('http://www.htmlcodetutorial.com/document/paper.gif') repeat scroll left top;
}
.footer-container{
height:150px;
width:100%;
background-color: blue;
}
.form-container{
margin-bottom:30px;
margin-top:30px;
}
</style>
</head>
<body>
<div class="header-container"></div>
<div class="body-container">
<div class="form-container">
</div>
</div>
<div class="footer-container"></div>
</body>
</html>
► Run code snippetCopy snippet to answer
Remove this part to remove the unwanted margin :
.form-container{
margin-bottom:30px;
margin-top:30px;
}
See this fiddle
EDIT
If you want to keep the space, you can use a padding-top instead.
See it here
.form-container{
padding-top : 30px;
}
Note
This property background-color: green; of .body-container is not applied because of the background property below which has a white background-color property set here : background: #fff url('http://www.htmlcodetutorial.com/document/paper.gif') repeat scroll left top;
If you make the header, body and footer div float, the extra space disappears.
The float makes them try to stick together, but your width: 100% makes sure they each are page wide.
I've also edited your code a bit.
<html>
<head>
<style>
body{
margin:0px;
}
.header-container{
height:250px;
width:100%;
background-color: red;
float: left;
}
.body-container{
height:500px;
width:100%;
background: url('http://www.htmlcodetutorial.com/document/paper.gif') repeat scroll left;
float: left;
}
.footer-container{
height:150px;
width:100%;
background-color: blue;
float: left;
}
.form-container{
margin-bottom:30px;
margin-top:30px;
}
</style>
</head>
<body>
<div class="header-container"></div>
<div class="body-container">
<div class="form-container">
</div>
</div>
<div class="footer-container"></div>
</body>
</html>
I am building a template which has a fixed header and a fixed side bar on the left. My issue is that when I shorten the window and scroll horizontally, the fixed div overlaps the adjacent '.content'.
I don't want the fixed '.sidebar1' to overlap '.content' div when I scroll horizontally. How do I fix this?
html,body
{
margin: 0;
padding: 0;
width:100%;
height:100%;
}
.header
{
width:100%;
height:46px;
position:fixed;
top:0;
background:blue;
}
.page_wrap
{
width:1040px;
display:block;
margin:70px auto 0;
background:purple;
}
.content
{
width:500px;
height:1060px;
display:inline-block;
background:red;
color:white;
margin:5px;
vertical-align:top;
margin-left:270px;
}
.sidebar1
{
display:inline-block;
width:250px;
height:500px;
position:fixed;
top:70px;
background:pink;
margin:5px;
vertical-align:top;
}
.sidebar2
{
display:inline-block;
width:250px;
background:pink;
margin:5px;
vertical-align:top;
}
.footer
{
width:1040px;
height:50px;
margin: 20px auto 0;
text-align:center;
background:magenta;
}
<!DOCTYPE HTML>
<html>
<head>
<title>Temp</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="temp.css">
</head>
<body>
<div class="header">
Header Content
</div>
<div class="page_wrap">
<div class="sidebar1">
sidebar 1
<div class="test"></div>
</div>
<div class="content">
Article Content
</div>
<div class="sidebar2">
sidebar 2
</div>
</div>
<div class="footer">Footer</div>
</body>
</html>
The reason for this is that fixed technically makes it take up no space on the page.
I noticed you have fixed width and height on your content, which is probably your first problem. Fixed width on large containers is typically a bad idea, as it breaks everything else on your page, or prevents it from displaying the way you want.
The end result should look something like:
.content{
width:500px;
height:1060px;
margin-left:270px;
display:inline-block;
background:red;
color:white;
margin:5px;
vertical-align:top;
}
If you need it to scroll horizontally for some reason, then I would say set position:fixed; on the div.content and add a property to your HTML wrap="off" and see if that does what you want it to.
Hopefully this helped. Cheers.
I hope I understood your question
Check https://jsfiddle.net/LeoAref/47p6r6hq/
<header>Header</header>
<aside>Side</aside>
<section>
<div class="wide">
My Wide Content
</div>
</section>
CSS
header {
height: 30px;
line-height: 30px;
background: red;
color: #fff;
text-align: center;
position: fixed;
top: 0;
width: 100%;
left: 0;
}
aside {
top: 30px;
bottom: 0;
width: 300px;
background: blue;
color: #fff;
text-align: center;
position: fixed;
left: 0;
}
section {
top: 30px;
bottom: 0;
left: 300px;
right: 0;
background: #000;
color: #fff;
text-align: center;
position: fixed;
overflow-x: scroll;
}
.wide {
color: #000;
width: 1500px;
background: yellow;
height: 50px;
}
I've been trying to get my footer to display properly, and have combined a number of approaches, but am still getting the same result. The footer sits a fixed number of pixels from the top of the page, and doesn't extend all the way across the page. I need it to display just below the content, no matter the size of the content, and for it to extend all the way across the page.
the CSS:
html, body, #container { height: 100%; }
#container { height: auto !important; min-height: 100%; margin-bottom:-50px;}
#footer {
width:100%;
display:block;
background-color:#4a4a4a;
color:#fff;
font-family:'discoregular';
left:-5%;
bottom:0;
top:100%;
height:100%;
text-align:center;
float:left;
position:relative;
body:before;
content:"";
overflow:auto;
margin-top:50px;
padding:10px;
}
#footer, #push{
height:50px;
}
.clearboth {
clear:both;
}
The HTML:
<body><div id="container">
<!--Content-->
<div id="push"></div>
</div>
<div class="clearboth"></div>
<div id="footer">Footer Content</div>
You need to make sure that you reference your css file from your html, so your html should look like this, if they are in the same directory you don't need to add the path:
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="path_to/YOUR_CSS_FILENAME_HERE.css">
</head>
<body><div id="container">
<!--Content-->
<div id="push"></div>
</div>
<div class="clearboth"></div>
<div id="footer">Footer Content</div>
and your css, I took away the left -5%:
#page {
min-height: 100%;
position:relative;
}
#main {
padding-bottom: 50px;
}
#footer {
background-color:#4a4a4a;
position: absolute;
width: 100%;
bottom: 0;
height: 50px;
padding:10px;
font-family:'discoregular';
display: block;
overflow:auto;
text-align:center;
float:left;
margin-top:50px;
}
change the css to the following.You can chage the "bottom" so that it can come up
#footer {
width:100%;
display:block;
background-color:#4a4a4a;
color:#fff;
font-family:'discoregular';
left:-5%;
bottom:0;
top:100%;
height:100%;
text-decoration: none;
text-align: center;
width: 100%;
position: fixed;
z-index: 1000;
vertical-align: baseline;
bottom: -50px;
padding:10px;
}
All I added into my footer styles after reading this post was- overflow:auto; - and it's sorted now
Any idea how to make the middle sections in this code below (jsFiddle here) adjust to the height of the actual container without specifying fixed values or Javascript? In this fiddle I tried setting absolute and relative for the container but the page always shows vertical scrollbar as the height of the container exceeds the height of the actual page.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
body { margin: 0; height:100%;}
#mainContainer { position: absolute; right: 4%; left: 4%; height: 100%; }
#headerContainer { width: 100%; position: relative; background: #323232; color: white; height: 30px; }
#middleContainer { height: 100%; }
#leftSection { position: absolute; float: left; width: 175px; background: #71ABD1; height: 100%; overflow: auto; color: black; }
#middleSection { position: absolute; height: 100%; background-color: yellow; left: 175px; right: 175px; color: black; }
#rightSection { float: right; height: 100%; width: 175px; border-left: 1px dotted black; background: red; color: black; }
#footerContainer { position: relative; width: 100%; height: 30px; background: #323232; color: white; }
</style>
</head>
<body>
<div id="mainContainer">
<div id="headerContainer">
headerContainer
</div>
<div id="middleContainer">
<div id="leftSection">
<div style="margin-top: 30px;">leftSection</div>
</div>
<div id="middleSection">
<div style="margin-top: 30px;">middleSection</div>
</div>
<div id="rightSection">
<div style="margin-top: 30px;">rightSection</div>
</div>
</div>
<div id="footerContainer">
footerContainer
</div>
</div>
</body>
</html>
This seems to do what you want:
http://jsfiddle.net/grc4/XTQuT/2/
Absolute positioning takes #middleContainer and #footerContainer out of the normal flow. #middleContainer is forced to take up the size of the whole page, but is given a margin to allow room for the header and footer. #footerContainer is fixed to the bottom of the page with bottom: 0. The left and right columns can then just use height: 100% to take up the right space, but the middle column still needs absolute positioning to force it to only use the remaining space.
................................
Hi maya i suggest u can u used table properites in your code if yes than check to this demo
HTML
<div class="wrap">
<div class="header">header</div>
<div class="conternt">
<div class="left">Left sdaf dsaklf jdslkaf jdlskfj dlskafj dslkf jdslkf jsdlakfj sdlakfj sdlkf jlsdkfj sladkfj sdalkfj sadlkf </div>
<div class="center">Center flexible</div>
<div class="right">right</div>
</div>
<div class="footer">footer</div>
</div>
Css
.header{
background:green;
color:#fff;
padding:20px;
}
.conternt{
background:yellow;
display:table;
width:100%;
}
.left, .right, .center{
display:table-cell;
color:#fff;
}
.left, .right{
width:100px;
}
.left{
background:rgba(0,0,0,0.5)
}
.center{
background:rgba(0,0,0,0.1)
}
.right{
background:rgba(0,0,0,0.9)
}
.footer{
background:red;
color:#fff;
padding:20px;
}
live demo
Specify the height of both #footerContainer and #headerContainer as percentage instead of pixels, as you do the same for others div. In this fiddle I gave 10% to header and footer, and 80% to all intermediante divs.
<body>
<div id="wrap">
<div id="header">
HEADER
</div>
<div id="inner-wrap">
<div id="content">
CONTENT
</div>
</div>
<div id="footer">
FOTTER
</div>
</div> </body>
AND CSS:
html { height:100%; max-height:100%; }
body {
margin:0;
padding:0;
height:100%;
max-height: 100%;
}
#wrap {
min-height:100%;
height: 100%;
position:relative;
}
* html #wrap { height:100% }
#inner-wrap {
padding-bottom:50px;
min-height: 100%;
}
#inner-wrap:after {
content:" ";
display:block;
clear:both;
}
* html #inner-wrap {
height:100%;
}
#header
{
width: 100%;
background-color: #C0C0C0;
height: 16px;
color: White;
text-align: center;
position: relative;
top:0px;
}
#footer
{
width: 100%;
background-color: #C0C0C0;
height: 50px;
position:absolute;
bottom: 0;
color: White;
text-align: center;
}
#content
{
width: 1000px;
height: 100%;
background-color: #F5FDEC;
margin: 0 auto 0 auto;
}
The Problem:
How i can make this: HEADER top 16px,
CONTENT dynamic 100% height,
FOOTER at end of page
If i give 100% to inner-wrap DIV, them after footer is white space.
Thx
You have too many heights going on:
Remove the min-height and max-height values from your selectors.
Remove the position: absolute; from your #wrap div.
I made an example for you here.
For the footer positioned at the bottom in a fixed position that doesn't move when you scroll the webpage use this:
#footer{
position:fixed;
clear:both;
}