HTML fixed div with relative div - html

I am looking for two divs that look like this:
<div style="height:20px;" />
<div style="height:100%;" />
This gives me two divs, one with 20px height, and the other at 100% of the entire screen height, which puts a vertical scroll bar worth 20px. What I actually want is one to be 20px, and the other to be 100%-20px. I know that IE has calc() method, but isn't there a much easier way to do this that will work in all browsers?

#div1 {
height:20px;
position:fixed;
top:0px;
right:0px;
left:0px;
}
#div2 {
position:absolute;
top:20px;
bottom:0px;
right:0px;
left:0px;
}
maybe this is what you need..
EDIT sorry misread the title.. corrected :O how ever if you wish to have multiple div2 the you might need a structure like
<div id="div1"></div>
<div id="div2" style="overflow:auto">[multiple div2 go here]</div>

I tried this out, adding a little sample text to your div, and got rid of the scroll bar simply by not giving the second div a height, and allowing the broswer (both IE and FF) to figure out for itself what hieght to give it.
However, given your comment to George, I think this may not be your fix either. Perhaps you could post a little bit more of your code (or psuedo-code) to give at least one typical example of the second div being replaced.

There is an easy way: Place the first div (20px) inside the second.
EDIT: Since my first answer is not an option for you, you can use scripting to resize the div on the fly. You can caclulate document.height - 20px and apply the result as the height of the "100%" div. CSS does not offer a way to do:
height: 100% - 20px
However, Javascript does:
(via jQuery:)
$( "#big_div" ).height( $( document ).height() - 20 );

It is possible without any Javascript if you can provide a fixed width:
http://jsfiddle.net/mNNeq/47/
The following is an excellent resource to help you with positioning content:
http://www.barelyfitz.com/screencast/html-training/css/positioning/

Related

How is it possible to make a horizontal bar (fixed position, always at the top of screen) while its height is unknown?

I want a horizontal bar at the top of HTML page. It should always be at the top of the screen, So I made this:
<body>
<div id="message_bar" style="position: fixed; top: 0px; width: 100%; z-index: 1000;">
</div>
<div class="other_divs" style="width: 100%; float: left;">
</div>
</body>
Now, this bar should not cover the rest of the body. If I knew the height of it, let's be 50px for example, I would do it by:
<body style="padding-top: 50px;">
But unfortunately, the height of this message_bar is variable and unknown (It's contents are set dynamically at server-side).
Is there any way to solve this problem purely by CSS?
Thank you very much.
P.S.
This message_bar would display like menu bars in windows applications: they are always at the top, and they never cover the main body. In fact, vertical scroll bar starts from "other_divs".
UPDATE 2:
Hey, Unbelievable! I guess I've managed to create the potential layout for a horizontal menu bar, purely with CSS. Here is my solution thanks to the power of vh:
<body>
<div style="display:block; width:100%; height:95vh !important; overflow:hidden;">
<div id="message_bar" style="float:left; width:100%; display:block;" >
this text appears always on top
</div>
<div style="float:left; width:100%; height:100%; display:block; overflow:auto;">
<div id="main_content" style="background:blue;">
Here lies the main content of the page.
<br />The below line is a set of 40 list items added to occupy space
<ol><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li></ol>
</div>
</div>
</div>
</body>
I checked it in Chrome,IE, and FireFox, and it worked neatly!
Anyway, I must thank the community here; Even when no answer is provided, the discussion and different viewpoints stimulate thinking process and eases solution finding.
The only way to solve this with purely CSS is adding a duplicate of the bar at the top of the page with position: relative and a lower z-index. This duplicate bar would always be hidden behind the fixed one (you could use opacity: 0; pointer-events: none if needed) and would push the rest of the page down. However this solution is very ugly as it adds a lot of HTML.
I recommend using JavaScript with jQuery for a pretty easy solution.
$(document).ready(function() {
$('.wrapper').css('padding-top', $('.message_bar').outerHeight());
});
And create a wrapper div around the content of the page (<div class="wrapper">Content...</div>). Alternatively, you could apply the padding to the body.
I am interested in your question, thanks for your information of the value of vh and vw. When I read your UPDATE 2. I found there is still something can be improved. The following is:
I change overflow:scroll; to overflow:auto. Because when your page haven't enough height. The value overflow:scroll will create a gray scroll bar. That is unfriendly for user.
I remove the most outer layer <div style="display:block; width:100%; height:95vh !important; overflow:hidden;">...</div> and retain the others. In other word, not to use vh also can be resolved your question.
There is my JSFIDDLE. (NOTICE: the JSFIDDLE is not achieve the effect that the above following. Copy these code on your native browser. I think this reason is about virtual circumstance compatibility. It worked in chorme & Firefox & IE 10)
You can have a class where are no scrollbars and then the position property will be position:absolute;
but if you want to keep this topHeader fixed in case of scrolling you have to use .fixed class
.topHeader {
background:#345;
color:#FFF;
height:50px;
padding:.5em;
position:absolute;
top:50px;
width:100%;
}
.fixed {
position:fixed;
top:0;
}
...and you some javascipt to bind scrol event:
var pixels= 50; //in pixels
$(window).bind('scroll', function () {
if ($(window).scrollTop() > pixels) {
$('.topHeader ').addClass('fixed');
} else {
$('.topHeader ').removeClass('fixed');
}
});
Why don't you just use relative positions? Remove position: fixed;. That's how it looks like:
http://jsfiddle.net/darekkay/8ab6uw7n/1/
Edit: I don't think, you can achieve this with pure CSS, if you don't know the height of the message. But you can use jQuery:
$("#message_bar").show(function() {
$( ".other_divs" ).css("margin-top", $(this).height() + "px");
});
http://jsfiddle.net/darekkay/8ab6uw7n/2/

Z-Index Not Working - Alternative Technique or Fix

I have assigned a fixed positioned menubar a high z-index, yet it still appears below other elements on my website. Is there an alternative technique I could use or something wrong with the code I have written. My website with the issue is here (note: you need to scroll up after scrolling down for the navbar to appear). The menu bar that is not appearing properly has the following code
#headerfull {
position:absolute;
top:-100px;
left:0;
z-index:10000;
width:100%;
height:100px;
background-color:#000000;
opacity:.7;
display:none;
}
but, for some reason, the z-index does not work. Elements like the "NinjaWarrior.info" image in the front and center, with a lower z-index appears in front of the navbar. The code for that image is below
<img style="position:absolute;z-index:10" src="images/logo_main.png" width="900" height="300" alt="American Ninja Warrior Fan Site">
Add this css:
#header {
position: relative;
z-index: 10000;
}
z-index works on containers with the same stacking context.
In your code, the DIVs header and content are siblings, and that's a condition for z-index numbers to apply.
The most easy way of memorizing this rule is by "code versioning":
<DIV with z-index=1>
<DIV with z-index=3/>
</DIV>
<DIV with z-index=2>
So, like decimals, or versioning number, 1.3 will never be greater than 2, and therefore the inner DIV will be always rendered below the second outer DIV.
Other than that, you need to apply positioning to each DIV which sets z-index.
I just set a big number because I was lazy, you can find a good feasible number by yourself if you want =), but this code works as I tested it on your website.
Thank you.
Be sure to read: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context
z-index is not working for me on child elements because of width and height which is declared ,I started adding {display :Inline} on my parent div on hover of child div.

How to have a div at 100%-Xpx height?

I'm having trouble with a simple div height and percentages. I have searched the net, but no luck. Here is the layout :
<div id="modal">
<div id="modalHead">HEAD</div>
<div id="modalBody">BODY</div>
</div>
Simple as that. The css (stripped down) :
#modal{position:fixed; top:0; left: 0; height:100%;}
#modalHead{height:40px}
#modalBody{height:100%}
Problem is that I get 100% height PLUS 40px. Resulting in a scrollbar of 40px extra. Because of that, i'm I tried using negative margins, height:auto, but no luck. Is there a way of doing this?
Basically, what I want is something in the lines of height: 100%-40px.
Than you!
edit:
Link to jsFiddle.
Try this:
#modal{position:fixed;top:0;left:0;right:0;bottom:0}
#modalHead{height:40px}
#modalBody{position:absolute;left:0;right:0;top:40px;bottom:0}
Try to remove all from your body tag and HTML
html, body{margin:0px; padding:0px border:0px}
It sounds like you just don't want the modalHead element to affect the modalBody's height, in which case you can just do:
#modalHead{height:40px; position: absolute;}
Once you have that, you can mess with the rest of it's dimension and placement using left and top if you need to.
edit:
Going off of your jsfiddle, I'd say the easiest solution would be to do as I suggested above and just add a margin-top: 40px or top: 40px (depending on the positioning) to the first element inside of the modalBody. In your jsfiddle example, that would be the p tag.
#modalBody p:first-child{margin-top: 40px;}

Fixed div background

I want to create a layout where I want to display an image to the left and content on the right. The image should stay constant when the content scrolls.
The css I'm using:
<style type="text/css">
#page-container
{
margin:auto;
width:900px;
background-color:Black;
}
#header
{
height:150px;
width:650px;
}
#main-image
{
float:left;
width:250px;
height:500px;
background-image:url('../images/main-image.png');
position:fixed;
}
#content
{
margin-left:250px;
padding:10px;
height:250px;
width:630px;
background-color:Teal;
}
</style>
The HTML:
<div id="page-container">
<div id="header"><img src="someimagelink" alt="" /></div>
<div id="main-image"></div>
<div id="content"></div>
</div>
Alot of time on this site and I have understood that background-attachment:fixed positions the image in the entire viewport and not the element it is applied to.
My question is how do I go about creating that kind of layout?
I do not want to give that image as a background image, as if the window is resized, it might get hidden. I want scrollbars to appear if the window size is less than 900px( my page width) so that the image can be viewed at all times.
That happens with this code, however I would like the image to start at my element instead.
How do I go about doing this??
Thanks in Advance :)
Edited:
I took the advice and added a position:fixed property to #main-image. Using the HTML and CSS as shown above.
Now, I also want to fix the header so that it does not move. Basically, only my content section should scroll.
However, if I add a position:fixed to the header, my #main-image and #content now sit on top of my header.
If I add a margin-top:150px (since my header height is 150px) to the #main-image, it works fine and moves down appropriately.
However if I add a margin-top:150px to the #content, my header moves down by 150px and still sits on top of my #content.
Can someone please explain why this is happening?
Thanks in Advance :)
Take a look at this link:
http://www.barelyfitz.com/screencast/html-training/css/positioning/
You can learn how to position Div's with it.
This will solve your problem:
#main-image {position:fixed;}
EDIT:
I'm not sure of what caused your problem but here is the solution:
#content{
position:relative;
top:150px;
}
My Guess:
I think that happened because when using position:fixed those 2 div's were positioned relative to the the browser window, while the other one was relative to the document itself.
In this link you will see more about positioning and you can test some of these features related to the position property:
http://www.w3schools.com/cssref/pr_class_position.asp
About the fact that one div was positioned over another, you should search for the 'z-index' property. Firefox has a 3D mode so you can see this more clearly:
http://www.addictivetips.com/internet-tips/browse-internet-in-3d-using-mozilla-firefox-11-tip/
Set a min-width on html and body.
Have you tried setting your #page-container to relative and your #main-image container to absolute and setting the position using top, bottom, etc. Then you should also be able to float your #content container to the right.

CSS DIV not expanding when more text is added

I have a quick CSS question, i'm hoping that somebody can help me out!
I have a DIV called #ContentPanel and I want it to be able to expand so that it can cater for more text if needed. At the moment if the text is longer than 500px (as specified in the CSS) it flows out the bottom and over the content in the div below. How can I set it up to auto expand and push all divs after downwards.
If anybody has any ideas, please let me know
Here's the HTML
<div id="MainContent">
<div id="MainImage"></div>
<div id="ContentPanel">Text content goes here.</div>
</div>
...and here's the CSS
#MainContent {
position:relative;
height:500px;
width:800px;
margin:0 auto;
background-color: #000;
}
#MainImage {
position:absolute;
top:0;
left:0;
width:350px;
height:500px;
background-color:#000;
}
#ContentPanel {
position:absolute;
height:500px;
top:0;
left:350px;
width:450px;
background-color:#000;
}
Thanks in advance!
Kind regards,
Decbrad
Use min-height instead of height.
Except for IE 6: It has a bug, so that it interprets height like min-height.
As mentioned the problem is that you define a fixed height .. and so the browser adheres to it..
You need to make it more flexible by using the min-height property. However IE does not support it, but due to another bug on how it handles the height (which it expands to cater for the content if more than the defined height) it can be worked around..
A complete solution is
height:auto!important; /*this set the height to auto for those supporting it (not IE)*/
height:500px; /*for IE, all others override it by the previous rule*/
min-height:500px; /*for the ones that support it (all but IE)*/
This, in general, is the solution to such problems.. in your case i see that you use absolute positioning.. if you really need this, and it is not just an attempt to solve your problem, then unfortunately there is no way for an element to adjust its size to cater for absolute positioned elements..
Try setting a minimum height (min-height:) as opposed to a specific, fixed height.
The property you're after is min-height, rather than height.
http://www.w3schools.com/CSS/pr_dim_min-height.asp
This means your element will be at least that high. If the content warrants it, the height will grow past the specified value.
As a second option, you might want to try overflow: scroll; or overflow-x and overflow-y to have a scrollbar appear on the div in case the content doesn't fit.
Personal opinion: to get around IE6's issues with min-height, it's really better to use an IE6-specific conditional comment in your targeting it rather than adding hacks into your CSS.
This is if having standards-compliant CSS matters to you, although tbh that's getting more and more difficult these days thanks to wonky browser support.
<!--[if IE 6]>
#MainContent, #MainImage, #ContentPanel { height:500px; }
<![endif]-->
you need to use min-height css attribute