So I have three div's
One parent and two child.
The parent is as follows:
#parent {
overflow:auto;
margin: 0 auto;
margin-top:37px;
min-height: 100%;
width:875px;
}
the two child divs are as follows
#child1 {
overflow:auto;
min-height:150px;
border-bottom:1px solid #bbb;
background-color:#eee;
opacity:0.4;
}
#child2 {
height:100%;
background-color:white;
}
The parent div extends 100% as I can see the borders of it till the end of the page but the child2 is not extending down to the end of the page like the parent div.
height doesn't behave the way you seem to be anticipating. When you specify height: 100% that percentage is calculated by looking up the DOM for the first parent of said element with a height specified that has absolute or relative positioning.
You can cheat when it comes to the body tag, so if you had something like this:
<body>
<div style="height: 100%">
</div>
</body>
Some browsers/versions will behave the way you expect by taking up the total height of the page. But it won't work when you go any deeper than that.
Here is the approach I use to strech a div to the bottom of the page, it involves absolute positioning (nice thing about this one is that it is pretty cross-browser compliant and doesn't require javascript to pull it off):
<div id="parent">
<div id="childNorm"></div>
<div id="childStrech"></div>
</div>
#parent
{
position: absolute;
width: 1000px;
bottom: 0;
top: 0;
margin: auto;
background-color: black;
}
#childNorm
{
position: absolute;
width: 1000px;
top: 0;
height: 50px;
background-color: blue;
color: white;
}
#childStrech
{
position: absolute;
width: 1000px;
top: 50px;
bottom: 0;
background-color: red;
color: white;
}
Here is a Jsfiddle for demo: http://jsfiddle.net/t7ZpX/
The trick:
When you specify absolute positioning and then put in bottom: 0; that causes the element to stretch to the bottom of the page; You just have to worry about positioning the elements as a trade off.
Yes, this is one of the annoying things in css. min-height is not considered a "height" for purposes of calculating height. See http://jsfiddle.net/3raLu/3/. You need to have height: 100% on the parent div to make the child full height. Or, if you can have it be absolutely positioned, then this works: http://jsfiddle.net/3raLu/6/.
Related
is there any way to make single page website without position absolute? Because when I want to variable height of containers, absolute position is little bit awkward. I mean when I insert more content to one container, the other above it should move down. I've tried position static and relative, but it didn't work for me.
Now my css looks like:
<style>
#header {position: absolute; top: 0; left: 0; width: 100%; height: 20%;}
#main {position: absolute; top: 20%; left: 0; width: 100%; height: 80%;}
#about {position: absolute; top: 100%; left: 0; width: 100%; height: 100%;}
#contact {position: absolute; top: 200%; left: 0; width: 100%; height: 50%;}
</style>
<body>
<div id="header">
content....
</div>
<div id="main">
content...
</div>
<div id="about">
long content which is covered with next div, because its "top" atribute settings
</div>
<div id="contact">
div which covers previous one's end
</div>
But when some container needs to be longer, problem is here..
Thanks for any help!
That depends on the style of your website. Of course you can set up anchors and have a one-page scrolling website, but I don't think that answers your question.
My suggestion is to try using absolute positioned elements as containers, and have your actual template inside them.
It would help if you provided some actual code or a specific issue you're having, as it's currently too vague.
I'll provide an answer to what I think you might be asking, though it isn't clear. I hope this isn't too basic.
Ditch the position property altogether.
Just have a div (which is by default 100% width) as your header at the top of your html. The content should be in another div below that.
Divs by default have 100% width, and their height is dependent on the height of their content. They will grow to accommodate taller content. These behaviors are because they have the property display:block .
You've used % which, if I remember correctly, is relative to the parent element. vh (viewport height) is relative to the height of the screen (100vh is the full height of the screen).
I added the background-color just so it's easier to see.
<style>
#header {
background-color: #777;
height: 20vh;
}
#main {
background-color: #999;
height: 80vh;
}
#about {
background-color: #777;
height: 100vh;
}
#contact {
background-color: #999;
height: 50vh;
}
</style>
I have a div called #text, inside another div #box. Right now I've tried to center #text by doing this:
#box {
width: 50%;
#text {position: relative; margin-left: 48%;}
}
This code puts #text approximately in the center of #box, but when I resize the screen, the size of #text changes relative to the size of the screen, so the size of its margin-right changes, and it is no longer exactly in the center.
I've heard there is a "hack" for this involving a few wrapper divs, but I don't want to overcomplicate my css or html. Is there a simple way to horizontally position a div exactly in the center of its parent?
Using flexbox is IMO the best way to center child horizontaly and verticaly. Its support is good.
First off the CSS you posted is not valid. You can accomplish what you are looking for with something like this:
CSS
body {
width:100%;
height: 100%;
margin: 0;
padding: 0;
}
#box {
width:100%;
height: 500px;
background: lightblue
}
#test {
width: 300px;
height: 300px;
border: 1px solid red;
margin: 0 auto
}
HTML
<div id="box">
<div id="test">
hello
</div>
</div>
See the JS.Fiddle
use margin: 0 auto; in the css of #text
You want exact center of page, regardless of content? Do something like this:
p {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
Relative to the parent, set the following attribute on the container for your element:
div.containerOfPs {
position: relative;
}
I have a div that has a child which is an editable span.
Now obviously, the size of an editable span constantly changes.
Therefore, how can I set the div's height and width to be the same as that of the span, every time the size of the span changes (hopefully without the use of javascript) ?
http://jsfiddle.net/4k87M/1/
CSS
#div-parent {
position: absolute;
top: 30px;
left: 30px;
height: auto;
width: auto;
background-color: grey;
}
#span-child {
position: absolute;
top: 0px;
left: 0px;
}
HTML
<div id="div-parent">
<span id="span-child" contenteditable>This is editable</span>
</div>
If you need the parent div to adapt it's height and width to the child span you can do this :
FIDDLE
css:
#span-child {
width:100%;
height:100%;
}
EDIT after Hashem Qolami's comment
Span is an inline element and doesn't need height or width decleration see this Demo
If you remove the position: absolute from the span element then it would work fine
DEMO http://jsfiddle.net/4k87M/4/
#span-child {
background-color: red;
}
I have a problem with a float which overflows (JSFiddle here).
HTML
<div id="father">
<div id="son">
gruik
</div>
<div id="dog">
gruikgruik gruik gruik gruikg ruik gruik gruikgr uikgruik gruik gruik gruik
</div>
</div>
CSS
div { border: solid; }
#father { width: 300px; position: relative; }
#father:after { content: ""; display: block; clear: both; }
#son { width: 100px; float: left; border: solid red; }
#dog { float: left; border: solid blue; position: absolute; left: 105px; }
As you can see, #dog overflows from #father. I tried classical CSS techniques but they just do not work (neither the clearfix method, nor overflow:hidden; or overflow:auto;).
I think the problem appears because of the use of the position CSS properties but I need it.
position: absolute; is correctly positioning the #dog element relative to #father (because #father has position: relative;).
However it is only the #son element which is giving #father its height. Elements positioned absolutely are taken out of the flow and therefore if #dog increases in height, its parent container (#father) will not, and therefore #dog looks to be overflowing.
Why do you have to use position: absolute; on #dog?
Can you not just use float, and set its width? You are setting its parent and siblings widths anyway so you know what width it should be (if you specify the width of the borders too).
DEMO: http://jsfiddle.net/sgw4K/5/
EDIT/UPDATE: After discovering additional styling, thirtydot has recommended two sound fixes to the problem. See comment below or the following:
To fix that, you can remove float: left from #son and then pick one of
these two choices: margin-left: 52px or overflow: hidden; on the #son element.
I am trying to emulate a sort of pop-up help dialog for my web site.
When the user clicks help, a mask covers the whole page with a dark, partially transparent mask, and a helppage div with a higher z-order is made visible.
The helppage div is 80% wide and 90% high positioned absolute at left 10% and top 5%, all relative to body.
So far all is great.
The content of the helppage div is:
- a full-width header with a close anchor 20px high floating right.
- a iframe-div to occupy the rest of the helppage div containing:
- an iframe to display the html document in question
The problem:
I would expect the height of the iframe-div to be 20 px less than the helppage div, but for some odd reason it is 3px larger than the helppage div.
As a result the bottom of the iframe is invisible.
The html:
<div id="helpbox">
<div id="helppage" class="window" style="display: block; position: absolute;">
<div class="hd-header">
<a class="close" onclick="hidehelp()"></a>
</div>
<div class="iframe-div">
<iframe id="HelpPageFrame" src="/help-system.html"></iframe>
</div>
</div>
The css:
#helpbox .window {
position:absolute;
display:none;
z-index:9999;
}
#helpbox #helppage {
background: white;
width:80%;
left: 10%;
top: 5%;
height:90%;
padding: 0px;
overflow: hidden;
}
#helppage iframe {
border: none;
width: 100%;
height: 100%;
}
#helppage .iframe-div {
width: 100%;
position: relative;
display: inline-block;
}
#helpbox .hd-header {
height: 20px;
font-weight: bold;
overflow: hidden;
display: inline-block;
width: 100%;
}
#helpbox .close {
width:20px;
height:20px;
display:block;
float:right;
clear:right;
background:transparent url(images/close_icon_double.png) 0 0 no-repeat;
}
Any suggestions would be greatly appreciated
edit As mixel pointed out, an important detail slipped, when I trie to simplify the scenario, that has been corrected.
Please, be accurate, when you are asking questions.
There is whitespace in '#helppage .window' selector. It selects nothing. Because of that '#helppage' is not absolute positioned.
There is no '#helpbox' element.
edit
Though you are still a bit innaccurate (you forgot to close 'DIV'), there is answer. You need to fill the remainder of '#helppage' with '.iframe-div'. If you set '.iframe-div' height to 100%, it takes 100% height of parent element - '#helppage'. To solve this problem you need absolute positioning for '.iframe-div':
#helppage .iframe-div {
position: absolute;
top: 20px;
bottom: 0;
right: 0;
left: 0;
}
Or set height with javascript.
Check out this: Make DIV fill remainder of page vertically?
It's fairly common question.