I am using four DIVs: container, header, content and footer.
Based on the text or images the content DIV is expanded but the header and footer div do not expand in IE7, IE8 and IE9 but works fine in Firefox, IE10 and IE11.
HTML:
<div id="container">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
CSS
<style>
body {
height:100%;
margin-left: 0;
margin-top: 0;
padding:0;
width:100%;
position: relative;
display:inline-block;
}
#header {
top:0px;
height:75px;
width:100%;
}
#container {
display:table;
width:100%;
height:100%;
}
#content {
width:100%;
height:auto;
}
#footer {
top:5px;
bottom:0px;
height:45px;
width:100%;
}
</style>
Any ideas?
You have a fixed value on footer and header
#footer
{
top:5px;
bottom:0px;
/*height:45px;*/
width:100%;
}
#header
{
top:0px;
/*height:75px;*/
width:100%;
}
When it has fixed value, the element won't expand. The min-height could be a simple solution but a browser that doesn't support CSS2.0 won't process it right and could give you an unexpected result.
ANSWER UPDATED...
I'm giving you an answer that you might have expected. I still don't know what you are trying to achieve, what kind of layout do you need, and etc. But with a wild guess, I tweaked this code. It's going to be the exact answer for you if what you wanted was making header and footer responsive to the content div.
body {
margin-left: 0;
margin-top: 0;
padding:0;
}
#header {
top:0px;
width:100%;
height:75px;
position:absolute;
background-color:#eaeaea;
}
#content {
display:table;
padding:75px 0 45px;
height:150px;
position:relative;
}
#footer {
bottom:0px;
width:100%;
height:45px;
position:absolute;
background-color:#1d1d1d;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="content">
<h3>Expanding as you expected....</h3>
<h5>
* Try remove these h3 and h5 element. <br/>
the result will be nothing on your screen because no dimension is given to content div.
</h5>
<div id="header"></div>
<div id="footer"></div>
</div>
</body>
</html>
Try and see above code result and test how it expands as the content div gets smaller or bigger.
style.css
body
{
height:100%;
margin-left: 0;
margin-top: 0;
padding:0;
width:100%;
position: relative;
display:inline-block;
}
.header
{
top:0px;
height:75px;
width:100%;
}
.container
{
display:table;
width:100%;
height:100%;
}
.content
{
width:100%;
height:auto;
}
.footer
{
top:5px;
bottom:0px;
height:45px;
width:100%;
}
**index.xhtml**
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:pm="http://primefaces.org/mobile"
>
<f:view>
<h:head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"></meta>
</h:head>
<h:body>
<div class="container">
<div class="header" class="ui-layout-unit-header ui-widget-header">
<ui:include src="${ModuleGenerator.headerPageh}" />
</div>
<div class="content" class="ui-panel-content ui-widget-content">
<ui:include src="/pages/system/homeContent.xhtml"/>
</div>
<div class="footer" class="ui-layout-unit-footer ui-widget-header">
<ui:include src="${ModuleGenerator.headerPageh}" />
</div>
</div>
</h:body>
</f:view>
</ui:composition>
I have posted my full code of my layout...i hope it will okey for you to undestand yourself and reply.
this page working fine in IE10,IE11 and firefox but not works in IE6,IE7 and IE8.
what i am trying to achieve is? when the content(width) of div is expand dynamically the header and footer div(width) also expand based on content(width).
When we scroll down the page on browser then that page need to get centre alignment.
i am the beginner.
if you need further details post me.i will reply.
Related
I'm just trying to make my website layout. Now I have a problem: right navigation div stays under the Left navigation one. The blue one should be in the same line as the green.
Any suggestions?
I was following this tutorial: http://www.subcide.com/articles/creating-a-css-layout-from-scratch/P6/ and done the same, but it doesn't work as it should be.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" -->
<html>
<head>
<!-- Svetaines dizainas -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="container">
<div id="topmenu">TOPMENU</div>
<div id="topheader">TOP HEADER</div>
<div id="lnav">Left Navigation<div>
<div id="rnav">Right Navigation</div>
<div id="footer">FOOTER</div>
</div>
</body>
</html>
CSS:
body, h1
{
margin:0;
padding:0;
}
#container
{
width:1024px;
margin:auto;
}
#topmenu
{
width: 1024px;
background-color:red;
height:53px;
}
#topheader
{
width:1024px;
height:170px;
background-color:orange;
}
#lnav
{
width:1024px;
background-color:green;
}
#rnav
{
width:373px;
float:right;
background-color:blue;
}
#footer
{
width:1024px;
height:190px;
background-color:pink;
}
#lnav
{
width:1024px;
background-color:green;
}
This shouldn't be 1024 right?
Change it to 651px (from my head) to make it fit.
You could ofcourse put it inside the leftmenu and float it right aswell, (make sure the html of right would be above the content of left). But I wouldn't recommend this.
Arghh my own silly mistake:
<div id="lnav">Left Navigation<div>
I think you can understand what's wrong :D
As the title says. i really can't figure out what is wrong in this.
the #main div goes down if it's content is overlapping it's width.
this is the html file with the css style in it:
<html>
<head>
<style>
#header,
#main,
#sidebar,
#footer {
display:inline;
position:relative;
float:left;
background-color:#eee;
}
#header,
#footer {
width:100%;
height:60px;
}
#header {
margin-bottom:2%;
}
#footer {
margin-top:2%;
}
#main {
width:68%;
height:50%;
margin-right:2%;
}
#sidebar {
width:30%;
height:50%;
}
</style>
</head>
<body>
<div id="header">Header </div>
<div id="main"> content goes here.</div>
<div id="sidebar">Sidebar</div>
</body>
</html>
tried on IETester software all versions worked but IE7. It doesn't load anything. Thanks in advance.
I am trying to center my webpage. Also there is a min 1000px with and it scales up. Currently my page as it scales it is off centered 30%-center-70%. I am confused as to why this is happening. If anyone can explain why this is happening that would be great.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Title</title>
<style type="text/css">
#page {
position:relative;
display:block;
width:75%;
margin:auto;
min-width:1000px;
z-index:0;
}
#pageImg {
position:absolute;
width:75%;
margin:auto;
min-width:1000px;
z-index:1;
}
#navBarImg {
position:absolute;
width:75%;
margin:auto;
min-width:1000px;
z-index:2;
}
</style>
</head>
<body>
<div id="page">
<img id="pageImg" src="../Navigation/backgroundImg.png" />
<div id="navBar">
<img id="navBarImg" src="../Navigation/navBarBGImg.png" />
</div>
</div>
</body>
</html>
Maybe try 50% on your page width... I think you got your result from doing a 75% of 75%...
example - http://jsfiddle.net/rob_towner/q8vKK/
#page {
position:relative;
display:block;
width:50%;
margin:auto;
min-width:1000px;
z-index:0;
}
There is additional code to consider that you haven't posted yet. This can be inferred because the code you did post works as you intend it to. A working example (the 1000px width won't fit in the default window size of the rendered window, use the sliders to expand it and see your code is working).
Your CSS I used:
#page {
position:relative;
display:block;
width:75%;
margin:auto;
min-width:1000px;
z-index:0;
}
#pageImg {
position:absolute;
width:75%;
margin:auto;
min-width:1000px;
z-index:1;
}
#navBarImg {
position:absolute;
width:75%;
margin:auto;
min-width:1000px;
z-index:2;
}
In a nutshell, i want a right div float to extend vertically 100%
but it only works when i don't include <doctype> on my html
in today's standard, do i really have to add <doctype>?
This is the result in Internet Explorer:
this is just simple html
<html>
<head>
<style type="text/css">
html, body {
padding:0;
margin:0;
height:100%;
}
#wrap {
background:red;
height:100%;
overflow:hidden;
}
#left {
background:yellow;
float:left;
width:70%;
min-height:100%;
}
#right {
background:pink;
float:right;
width:30%;
min-height:100%;
}
</style>
<body>
<div id="wrap">
<div id="left"> Content </div>
<div id="right"> Side Content </div>
</div>
</body>
</html>
in today's standard, do i really have to add <doctype>?
You don't have to do anything, but the absence of the DOCTYPE is essentially asserting that you conform (in the loosest sense of the term) to an unknown/inconsistent "quirks" standard.
I imagine the solution is as simple as setting the height of the parent container to 100% or to a specific pixel height.
ensure that height is set on the HTML and BODY elements.
ensure that height is set on any parent containers.
Working example: http://jsfiddle.net/7xxFj/
<div id="one">
First column
</div>
<div id="two">
second column
</div>
HTML, BODY { height: 100%; }
#one { height: 100%; width: 30%; float: left; background-color: red; }
#two { height: 100%; width: 70%; float: left; background-color: blue; }
As #BoltClock pointed out in the comments, you probably want a layout that can extend beyond 100%. This requires a little more effort (but still works well within the standard).
This article shows several methods for accomplishing layouts with equal column heights. More methods here.
If you are thinking of considering IE (any version for that matter, lets not digress to this topic), then you are better of specifying the DOCTYPE. I have seen many pages which do not do this properly through IE into the famous Quirks mode.
Use this Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
padding:0;
margin:0;
height:100%;
}
#wrap {
background:red;
height:100%;
overflow:hidden;
}
#right {
background:blue;
float:left;
width:30%;
height:100%;
}
#left {
background:yellow;
float:left;
width:70%;
height:100%;
}
</style>
</head>
<body>
<div id="wrap">
<div id="left"> Content </div>
<div id="right"> Side Content </div>
</div>
</body>
</html>
Okay so I haven't been able to find a question with an answer yet, so I decided to make my own.
I am trying to create a 100% fluid layout, which technically I have done.
http://stickystudios.ca/sandbox/stickyplanner/layout/index2.php
BUT, what I want to do now, is to make the page 100% in HEIGHT... But I don't want the page to scroll I want the inner DIV to scroll.
So I believe in short I want it to detect the height of the viewport screen, go 100%, and then IF content is longer then the screen, scroll the specific DIV, NOT the page.
I hope this makes sense.
<html>
<body style="overflow:hidden;">
<div style="overflow:auto; position:absolute; top: 0; left:0; right:0; bottom:0">
</div>
</body>
</html>
That should do it for a simple case
I believe this will work for your case
<html>
<body style="overflow:hidden;">
<div id="header" style="overflow:hidden; position:absolute; top:0; left:0; height:50px;"></div>
<div id="leftNav" style="overflow:auto; position:absolute; top:50px; left:0; right:200px; bottom:50px;"></div>
<div id="mainContent" style="overflow:auto; position:absolute; top:50px; left: 200px; right:0; bottom:50px;"></div>
<div id="footer" style="overflow:hidden; position:absolute; bottom:0; left:0; height:50px"></div>
</body>
</html>
this example will give you a static header and footer and allow the navigator and content area to be scrollable.
This is a different way to do this with all abs panels, it will fail on IE6, but I can provide the workaround CSS for IE6 if that is a requirement:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Fluid Layout</title>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
<style rel="stylesheet" type="text/css">
body { background-color:black; margin:0px; padding:0px; }
.pageBox { position:absolute; top:20px; left:20px; right:20px; bottom:20px; min-width:200px}
.headerBox { position:absolute; width:100%; height:50px; background-color:#333; }
.contentBox { position:absolute; width:100%; top:52px; bottom:32px; background-color:blue; }
.footerBox { position:absolute; width:100%; height:30px; background-color:#ccc; bottom:0px; }
.contentBoxLeft { position:absolute; width:20%; height:100%; background-color:#b6b6b6; }
.contentBoxRight { position:absolute; width:80%; left:20%; height:100%; background-color:white; }
.contentBoxLeft,
.contentBoxRight { overflow:auto; overflow-x:hidden; }
</style>
</head>
<body>
<div class="pageBox">
<div class="headerBox">Header</div>
<div class="contentBox">
<div class="contentBoxLeft">ContentLeft asdf asdf adsf assf</div>
<div class="contentBoxRight">ContentRight asdf asdfa dasf asdf asdfd asfasd fdasfasdf dasfsad fdasfds<br /><br />asdfsad ff asdf asdfasd</div>
</div>
<div class="footerBox">Footer</div>
</div>
</body>
</html>
make overflow:auto for the div
overflow:auto;
on the DIV style
You should just know that the size of the div should increase so it can show scrolls in it.
If you increase the page's size (which should be with style="overflow: hidden;" on the body)
it won't work.
If you don't want to use position:absolute (because it messes up your print out if your margins need to be different than all zeros) then you can do it with a little bit of JavaScript.
Set up your body and div like so to allow the div to scroll:
<body style='overflow:hidden'>
<div id=scrollablediv style='overflow-y:auto;height:100%'>
Scrollable content goes here
</div>
</body>
This technique depends on the div having a set height, and for that we require JavaScript.
Create a simple function to reset the height of your scrollable div
function calculateDivHeight(){
$("#scrollablediv").height(window.innerHeight);
}
And then call this function on both page load and on resize.
// Gets called when the page loads
calculateDivHeight();
// Bind calculate height function to window resize
$(window).resize(function () {
calculateDivHeight();
}
You can try this:
<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
<style rel="stylesheet" type="text/css">
.modal{width:300px;border:1px solid red;overflow: auto;opacity: 0.5;z-index:2;}
.bg{background:-webkit-linear-gradient(top,red,green,yellow);width:1000px;height:2000px;top:0;left:0;}
.btn{position:fixed;top:100px;left:100px;}
</style>
</head>
<body style='padding:0px;margin:0px;'>
<div class='bg' style='position:static'></div>
<div class='modal' style='display:none'></div>
<button class='btn'>toggle </button>
</body>
<script>
var str='',count=200;
while(count--){
str+=count+'<br>';
}
var modal=document.querySelector('.modal'),bg=document.querySelector('.bg'),
btn=document.querySelector('.btn'),body=document.querySelector('body');
modal.innerHTML=str;
btn.onclick=function(){
if(bg.style.position=='fixed'){
bg.style.position='static';
window.scrollTo(0,bg.storeTop);
}else{
let top=bg.storeTop=body.scrollTop;
bg.style.position='fixed';
bg.style.top=(0-top)+'px';
}
modal.style.display=modal.style.display=='none'?'block':'none';
}
</script>
</html>