Can somebody please help me understand why I am seeing what I am seeing?
Code:
<!doctype html>
<html lang="en">
<head>
<style>
#Viewport { width:50%; height:50%; margin: 0 auto; position: relative; background-color: blue; }
#one { position: absolute; width: 5%; height: 70%; background-color: green;}
#two { width: 5%; float: right; }
</style>
</head>
<body>
<div id="Viewport">
<section id="one">
<p>hi</p>
</section>
<section id="two">
<p>hi</p>
</section>
</div>
</body>
</html>
I expect to have widths of 5%, not ~20%. I expect to see colored backgrounds. This is weird. What gives?
Add overflow:auto to #Viewport
#Viewport {
width:50%;
height:50%;
margin: 0 auto;
position: relative;
background-color: blue;
overflow:auto;
}
jsFiddle example
Since you floated #two you removed it from the flow of the document. overflow:auto restores the expected behavior.
Also, remember that the percentage value is always relative to another value, and because you're declaring 50% height on the descendant without specifying any other percentage heights further up the DOM (and for the root element) the percentage height won't work.
Add html, body {height: 100%:}
Example
Related
I'd like to set the div height using percentages that do not depend on items in it.
I got a fixed header on the top of the screen and a centered div. But set height in percentages does not work. It enlarges only if I add some items in there.
Please help.
I have this code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>lol</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div id="conteiner">
<header>
<p>header</p>
</header>
<div id="main">
<p>main info</p>
</div>
</div>
</body>
</html>
And this CSS.
html{
width: 100%;
height: 100%;
}
body{
overflow: hidden;
margin: 0;
width: 100%;
height: 100%;
}
header{
position: fixed;
top: 0px;
width: 100%;
height: 10%;
border: solid red 1px;
}
#main{
display: block;
width: 65%;
height: 80%;
border: solid green 1px;
margin: 8% auto 0 auto;
}
You forgot to make it's parent 100% height too.
#conteiner has automatic height by default because its div block. And default height is height of its children. If parent's height isn't set manually, children height in percents are ignoring by browser
#conteiner {
height: 100%;
}
at your style file you have to write style for container div code like
#container{
height:100%;
}
I've been trying to get the the left and write columns to stick to the bottom of the green box like this http://i.imgur.com/zxChJx5.png but after an hour I'm still having trouble, if anyone could help that would be most appreciated, thank you very much http://jsfiddle.net/jybu6j47/
<!DOCTYPE html>
<html>
<head>
<style>
.well {
height: 300px;
width: 50%;
background-color:green;
}
.something {
background-color: yellow;
}
.left123 {
width: 50%;
float: left;
background-color: pink;
}
.right123 {
width: 50%;
float: right;
text-align:right;
background-color:red;
</style>
</head>
<body>
<div class="well">
Filler
<div class="something">
<div class="left123">Left</div>
<div class="right123">Right</div>
</div>
</div>
</body>
</html>
You need to position:relative; the container, and position:absolute; the contents, then set bottom: 0 on the contents like this:
http://jsfiddle.net/jybu6j47/1/
So it should look like this:
.well {
height: 200px;
width: 50%;
background-color:green;
position:relative;
}
.something {
position:absolute;
bottom:0;
width:100%;
background-color: yellow;
}
Position absolute tells an element exactly where to be, relative to it's closest position:relative (or absolute – or a couple of other properties come to think of it) container. In this case, giving it bottom:0 is effectively saying "Put me zero pixels from the bottom of the container".
I've got the following HTML and CSS:
<!DOCTYPE html>
<html>
<head>
<style>
body, div, html {
margin: 0;
padding: 0;
}
body {
background: #727272;
}
#div1 {
background: #F00;
height: 50px;
}
#div2 {
background: #F0F;
height: 50px;
width: 1500px;
}
</style>
</head>
<body>
<div id="div1">
</div>
<div id="div2">
</div>
</body>
</html>
If I shrink the browser window down to less than 1500px (the width of div2), and then use the browser's horizontal scrollbar to scroll to the right, the width of div1 remains cut off at the width of the browser window, and does not stretch all the way across the screen like div2.
Is there any way to get div1 to always stretch across the screen, regardless of the width of div2?
Please note that in my real code, the width of div2 is always changing, so I cannot just set a fixed width for div1 via CSS.
Thank you.
Try this.
#div1 {
background: #F00;
height: 50px;
width: 100%;
}
In your css try
display: block;
put a wrapper around these two divs...
<div id="div0">
<div id="div1"></div>
<div id="div2"></div>
</div>
Then style the wrapper and divs accordingly
#div0 { display:table; }
#div1 {
display:block;
width: 100%;
background: #F00;
height: 50px; }
#div2 {
display: block;
background: #F0F;
height: 50px;
width: 1500px; }
http://jsfiddle.net/Ls7aj/
Using overflow:hidden on the body, html, #container will do the trick.
Add a width:100%; to #div1 and you're good to go.
http://jsfiddle.net/tCN8H/
Edit: Changed #Content to #container
I am sorry to keep asking versions of the same question but this seems difficult to achieve. Here's the code I have so far:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<style type="text/css">
body, html{
height: 100%;
}
#outer {
width: 90%;
height: 90%;
margin: 5% 5% 5% 5%;
background-color: #333;
}
#left-content {
height: 100%;
width: 50%;
float:left;
}
#right-content {
height: 100%;
width: 50%;
float:left;
}
</style>
<div id="outer">
<div id="left-content" style="background-color: red;">xx</div>
<div id="right-content" style="background-color: yellow;">xx</div>
<!-- we need to clear -->
<br style="clear:both" />
</div>
</body>
</html>
Now it seems I see scroll bars but I just want the outer DIV to occupy 90% of the screen and there not to be scrollbars.
Find the fiddle here.
This is a pretty interesting bug I've never seen. Without going with the nasty body { overflow:hidden; } approach, I've found some fixes:
1 - Using display:inline-block (not the actually wanted)
#outer {
display:inline-block;
width: 90%;
height: 90%;
margin: 5% 5% 5% 5%;
background-color: #333;
}
2 - Using padding instead of margin (not the actually wanted)
#outer {
width: 90%;
height: 90%;
padding: 5% 5% 5% 5%;
background-color: #333;
}
3 - Using position absolute (recommended)
#outer {
position:absolute;top: 5%;bottom: 5%;right: 5%;left: 5%;
background-color: #333;
}
I will edit this answer on further investigation of this issue.
As per http://www.w3.org/TR/CSS2/box.html#box-dimensions
The percentage is calculated with respect to the width of the
generated box's containing block. Note that this is true for
'margin-top' and 'margin-bottom' as well.
Which means that by putting 90% width on the body, will cause the 5% of the margin to be 5% out of 90%, instead of the expected 100%, which causes the "bug." - Same applies to padding.
Here is how I would do it: http://jsfiddle.net/remibreton/8hfwp/1/
The trick here is to leave the browser figure out the width and height of the outer element. To do so you specify top:0; bottom:0; left:0; right:0; to make sure it fills up the entire available space. Then you add margin:5%; to reduce the height and width to 90%. The outer element should be position:relative; to allow absolute positioning inside it.
For the content elements, they can both be width:50%; height:100%. What you need to do is to make sure that the right one get a special left:50% treatment.
HTML
<div id="outer">
<div class="content left">xx</div>
<div class="content right">xx</div>
</div>
CSS
body, html { height: 100%; }
#outer { position:absolute; margin:5%; bottom:0; top:0; left:0; right:0; overflow:hidden; } /* margin:5% to make sure the width and height are actually 90%. Overflow is optional */
.content { position:absolute; width:50%; height:100%; } /* Applies to both content element */
.content.left { background-color:yellow; }
.content.right { background-color:red; left:50%; } /* Left position is equal to the right content element */
This method allows cleaner and more flexible CSS than what you previously had. Bonus internet points!
Try this:
body, html{
height: 100%;
margin: 0;
}
#outer {
width: 90%;
height: 90%;
position: absolute;
margin: 5%;
background-color: #333;
}
change overflow property to hidden(overflow:hidden;) then change the margin of #outer to margin:2.5% 5%;. Here is the full code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<style type="text/css">
body, html{
height: 100%;
overflow:hidden;
}
#outer {
width: 90%;
height: 90%;
background-color: #333;
margin: 2.5% 5%;
}
#left-content {
height: 100%;
width: 50%;
float:left;
}
#right-content {
height: 100%;
width: 50%;
float:left;
}
</style>
<div id="outer">
<div id="left-content" style="background-color: red;">xx</div>
<div id="right-content" style="background-color: yellow;">xx</div>
<!-- we need to clear -->
<br style="clear:both" />
</div>
</body>
</html>
Hope it'll work!
It seems to be being caused by margin collapsing going wrong. Add padding:0.01px to the <body> and it works like it should.
If you want something fixed-size on the screen, you should probably just use position:fixed like so:
#outer {
position:fixed;
left: 5%; right: 5%; top: 5%; bottom: 5%;
background:#333;
}
#left-content {
position:absolute;
left:0; top: 0; width:50%; bottom: 0;
}
#left-content {
position:absolute;
left:50%; top: 0; width:50%; bottom: 0;
}
I'm trying to make a really simple webpage. It should be a 1000px wide green, centered rectangle stretching all the way from the top to the bottom of the webpage on a red background, no matter how much content there is.
I can't get this working though. If I use min-height (like below), the green area doesn't stretch all the way to the bottom of the page if there's not enough content. If I replace it by height, the content overflows the green area if there's much content.
Here's my HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="stylesheet.css" />
</head>
<body>
<div id="container">
content here.
</div>
</body>
</html>
Here's the CSS:
html {
height: 100%;
}
body {
background-color: #F00;
margin: 0;
min-height: 100%;
}
#container {
background-color: #0F0;
width: 1000px;
margin: 0 auto;
height: 100%;
}
I know this is feasible with more divs, but it really should work without changing the HTML. How can I solve this?
By the way, I'm on Safari. I don't care about compatibility with browsers not respecting standards.
Here is a working sample:
<!doctype html>
<html>
<head>
<title>Container sample</title>
<style>
html, body
{
margin: 0;
padding: 0;
height: 100%;
background: red;
}
#container
{
background: green;
width: 1000px;
min-height: 100%;
margin: 0 auto 0 auto;
}
</style>
</head>
<body>
<div id="container">
Container sample
</div>
</body>
</html>
For more information take a look at my answer to a similar question.
you can use property position absolute for your requirement. It may help you
#container {
background-color: #0F0;
width: 1000px;
margin: 0 auto;
position:absolute;
top:0;
bottom:0;
left:50%;
margin-left:-500px;
}
Give your #container a position:absolute; with top and bottom set to 0.
#container {
background-color: #0F0;
width: 1000px;
margin: 0 auto;
position:absolute;
top:0;
bottom:0;
}
http://jsfiddle.net/jasongennaro/4ZLcD/