I need to put two divs side by side. First div should have constant width, second take rest free space. Both of the div should has the same height but at least should takes all browser screen. I have written the following code:
<head id="Head1" runat="server">
<title>My Testing page</title>
<style type="text/css">
#mainDiv { height:100%;}
#leftDiv {float:left; width:200px; height:100%;}
#rightDiv { height:100%; }
</style>
</head>
<body>
<div id="mainDiv">
<div id="leftDiv"></div>
<div id="rightDiv"></div>
</div>
</body>
But height of the right div is always set to 100% of browser screen, Even if content of this div is bigger. I would like have resizable height of those divs.
As far as I know height:100% would act as a fixed height according to the browser's height.
so why dont you put
min-height:100%.
This should work but I havent tested it myself tbh.
Related
I have 3 < div > elements stacked on top of each other on screen.
<div id="header"></div>
<div id="content" style="height:900px;width:1400px; "></div>
<div id="footer"></div>
I need to keep stated exact size of central DIV and I need 'header' and 'footer' to fill the space (remaining from 'content' height) on top and on the bottom equally, so all three DIVs would occupy exact window height.
Also I'd like header and footer have set some minimum height (so if screen becomes too small, these DIVs would keep some height, keep showing their contents, and scroller appears).
I can possibly do int in JS but CSS must be possible. Thanks in advance!
You can do it quite easily in JS with jQuery using the following javascript code:
var spaceHeight = $(window).height()-$("#content").height();
$("#header, #footer").css('height', spaceHeight/2);
You should put that code somewhere where you will make sure to call it in case the layout changes or in $(document).ready() if the page layout will be static.
And in order to preserve the minimum heights of #footer and #header use the min-height properties in CSS.
Here's and example: http://jsfiddle.net/4h5f8/17/
Try this code and see if it is what you need:
<html>
<head>
<style>
#header {
min-height:50px;
height:10%;
background-color:grey;
}
#content {
height:80%;
background-color:#EEEEEE;
}
#footer {
min-height:50px;
height:10%;
background-color:grey;
}
</style>
</head>
<body>
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</body>
</html>
I have two layouts, but they are conceptually the same.
One is a div containing an image. The other is two floating div elements that takes half with of their parent div at the left and right respectively containing an image each. Their parent div size and proportion depends of the body size and proportions and it is unknow until display time, so I need to specify it by percentage and not by constant width or height.
In both cases I need the maximum width or height while keeping aspect ratio and not overflowing the parent div, so image/s display as bigger as possible while keeping proportion.
I know how to keep proportions with max height or with, but not with both, so there is overflow. I also know how to accomplish this with Javascript, but I'm trying to avoid scripts in my layout and I want to handle that in css.
I haven't see anything like that in the net, nor googling gave me a clue about it, so I even doubt if this is actually possible in css.
Any solution will be greatly appreciated.
EDIT :
OK, I figured out how to do it. The deal was setting up image max-height and max-width to 100%. However I am facing another problem, so I post the layout if someone doing what I was trying to do finds it useful, and I remake the question to focus in the new problem.
Here's the layout. It will keep images aspect ration to the biggest possible size.
index.html
<html>
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
<meta name="viewport" content="width=device-width" />
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="header"></div>
<div id="pageleft" class="page">
<img src="img/1.jpg">
</div>
<div id="pageright" class="page">
<img src="img/2.jpg">
</div>
</body>
</html>
style.css
html, body {
height: 100%;
overflow:hidden;
padding:0px;
margin:0px;
}
.header{
background-color:blue;
width:100%;
height:2em;
}
.page{
width:50%;
height:100%;
position:relative;
}
#pageright{
float:right;
background-color:green;
}
#pageleft{
float:left;
background-color:yellow;
}
.page > img{
position:absolute;
margin:auto;
top:0;
bottom:0;
max-height:100%;
max-width:100%;
}
#pageleft > img {
right:0;
}
#pageright > img {
left:0;
}
Note 1: Tested in Chrome and Firefox both desktop (resizing the window to any size/propotion) and mobile (portrait and landscape).
Note 2: I'm using A paper cut proportions for the images, but should work with any image size and proportions, even when both images have different aspect ratio.
The problem is that my header height is 2em and that is what the .page div are overflowing. Does anyone know a way to fix that?
Thanks in advance.
I am using a two column layout with the navigation bar placed with float:left. The content div uses margin-left so it sits beside it.
All good, except when I use a div of width 100% inside the content div, it gets shifted down to the bottom of the navigation bar.
This only happens with IE6, every other browser is fine with it (IE7+/FF/Chrome). I wouldn't normally worry about IE6 too much, but this is a biggy because with a long nav bar it looks like the page is empty unless you scroll right down the bottom.
I'm assuming it's the request for 100% width on the inner div that causes the problem, and IE6 is incorrectly seeing that as a request for 100% of the page, not just the containing content div.
Any ideas on a workaround? Live demo at:
http://www.songtricks.com/Ie6ClearBug.html
<!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>
<style type="text/css">
*
{
margin:0px;
padding:0px;
}
.left
{
width:300px;
float:left;
background-color:#CFF;
}
.left .navpanel
{
height:300px;
width:200px;
border:solid 1px black;
margin:10px auto;
}
.right
{
margin-left:300px;
background-color:#FFC;
}
</style>
</head>
<body>
<div class="left">
<div class="navpanel">navpanel</div>
</div>
<div class="right">
<div style="width:100%;">this should be at the top</div>
</div>
</body>
</html>
OK I found an answer. New users can't answer their own questions, so here it is.
Turns out the behavior can be normalised in IE6 by marginally reducing the width of the inner div just to 99% (or making it auto, but then you are at the discretion of the browser as to whether you get full width for the div or not, depending on what's in it).
So the lowest impact solution is to use:
<div class="right">
<div style="width:100%;_width:99%;">this should be at the top</div>
</div>
This leaves normal browsers unaffected, and puts a safe 99% in for IE6.
I'm sorry i don't understand very well your problem, i haven't IE 6..so i cant test your css...but: i can say something about your css.
First you'll need to add float: left to your .right class.
Second, if u set a margin on the same side of a float, IE doubled the margin.
I hope u understand my english..i'm sorry!!
Third: i dont remember exactly but some browser calcuate the border inside the div, other outside the div...so something if u set: div width 300px and border 1px, u can find your div total width is 301px
bye bye
Hi all I'm trying to build a layout using CSS and I'm coming up against a strange problem. Well strange for me. I have 3 divs a Header, a Footer and a MainContent area. Header and Footer must remain at a constant width of 100% while the MainContent area must be fixed centrally at 996px; This is all fine however when I resize the browser window to a width lower than 996px and then scroll the content of the window right the 100% header and footer seem to be truncated and are no longer 100%. I've knocked up a little bare-bones script to illustrate the issue (styles inline to keep it compact). I know I can add overflow:hidden to each of the containers in order to turn off the scrollbars when to window is resized. I've also written a small piece of jQuery to force the div's back to
the width, if the width drops below a certain width. However my question is around the CSS, is there a better pure CSS fix for this issue? Or can anybody explain why this happens?
Thankyou in advance!
DotsC
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>div width test</title>
</head>
<body style="border:none; margin:0; padding:0; height:100%; width:100%">
<div id="header-content" style="width:100%; margin:0; padding:0; background-color:#0000ff; height:50px"></div>
<div id="main-content" style="width:996px; margin:0; padding:0; background-color:#ff00ff; height:250px; margin:auto">
<div id="inner-content">
CONTENT OF THE PAGE HERE
</div>
</div>
<div id="footer-content" style="width:100%; margin:0; padding:0; background-color:#00ffff; height:70px"></div>
</body>
I'm not completely clear on your issue, but you can set min-width:996px; on the header and footer to keep them at least as wide as the content.
Try this, and please use HTML5's doctype.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css">
body{margin:0;text-align:center;}
.header,.content,.footer{text-align:left;clear:both;margin:0 auto;}
.header,.footer{width:100%;background-color:blue;height:128px;min-width:996px;}
.content{width:996px;height:512px;background-color:red;}
</style>
<title>Index</title>
</head>
<body>
<div class="header">
Header stuff here
</div>
<div class="content">
Page content stuff here
</div>
<div class="footer">
and your footer...
</div>
</body>
</html>
We have a div with static positioning. Inside we have a paragraph with a margin.
The height of the div will be the paragraph without the margin
We have a div with float:left. Inside we have a paragraph with a margin. The height of the div will be the paragraph plus its margin.
What is the explanation of this?
Here is the html code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link href="index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="nivel1">
<div id="nivel21">
<p>Este es el primer parrafo</p>
</div>
<div id="nivel22">
<p>Este es el primer parrafo</p>
</div>
</div>
</body>
</html>
And the CSS code:
body {
margin:0;
padding:0;
}
#nivel1 {
border:solid;
border-color:#333;
margin:0;
background-color:#0F3;
margin:2em;
}
#nivel21 {
margin:2em;
float:left;
background-color:#C00;
}
#nivel22 {
margin:2em;
background-color:#FC0;
}
And here is a link to the test site.
After several edits, I think I have got the answer now :)
I have also experienced this puzzling behaviour. I think part of the explanation is in section 10.6.7 of the CSS2.1 spec:
In certain cases (see, e.g., sections 10.6.4 and 10.6.6 above), the height of an element
that establishes a block formatting context is computed as follows:
If it only has inline-level children, the height is the distance between the top of the
topmost line box and the bottom of the bottommost line box.
If it has block-level children, the height is the distance between the top margin-edge of
the topmost block-level child box and the bottom margin-edge of the bottommost block-
level child box.
Those "certain cases" listed in section 10.6.6 include floating elements.
The #nivel21 element in the question is a floating element, and it contains block-level children (a <p>), therefore this special-case rule is applied and the height of the <div> is calculated using the top and bottom margin-edges of the <p> tag.
Secondly, this page about collapsing margins may give a clue as to why the height of #nivel22 does not include the margins of the <p> tag:
The [...] margin-top on the p element effectively becomes the top margin of the div element, and pushes the div down the page [...]
The <p> tag has an implicit margin (10px in my tests), which needs to collapse with the 2em margin of the outer #nivel1 element, so for this reason the browser pretends that the <p> tag has no margin at all (it puts it on #nivel22 instead), which means that the height of #nivel22 shrinks down to the line-height of the <p> tag.
I hope this answer makes sense to someone other than me!
I think When you use the float property the browser pads the element to show is floating.
Well, since there is no question and no clear naming of your elements i'll just assume you want to put 2 columns in a container.
Cleaned up code with some more clear naming and use of classes results in this:
(hope this is what you were looking for)
<html>
<head>
<title>divs</title>
<style>
.container{
float: left;
background-color: #0F3;
}
.column {
margin: 2em;
float: left;
padding: 5px;
}
#lefty{
background-color: #C00;
}
#righty{
background-color: #FC0;
}
</style>
</head>
<body>
<div class="container">
<div id="lefty" class="column">
<p>Column number 1</p>
</div>
<div id="righty" class="column">
<p>Column number 2</p>
</div>
</div>
</body>
</html>
This happens because of the interaction of the two divs. Remove the floating one, the static one will shrink. What happens is, the floating div pushes the text in the static div down, thus expanding it.
More comments: The paragraph tag is irrelevant here. You can achieve the same effect by removing the paragraph margin and increasing the margin for the elements themselves. Either way, the statically positioned element would grow while the floating one would not. Same thing with this CSS:
body {
margin:0;
padding:0;
}
p {
margin: 0;
}
#nivel1 {
border:solid;
border-color:#333;
margin:0;
background-color:#0F3;
margin:2em;
}
#nivel21 {
margin:5em;
float:left;
background-color:#C00;
}
#nivel22 {
margin:5em;
background-color:#FC0;
}