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

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;}

Related

Issue with positioning of elements

I have a page which has a 'fixed' header. Now I want to position the content at 20% below the header, but the 'top' property doesn't seems to work. I tried to use 'left' and 'right' and they seemed to be working fine. Any pointers for this situation?
Thanks in advance.
We did something very similar here: http://firststop.herokuapp.com
We just used padding-top: Xpx in our body css, like this:
body {
padding-top: 60px;
}
This basically makes the entire body of the page have a padding at the top, allowing you to keep the fixed header at the very top
The problem you have is the fixed element acts like a position: absolute element -- it doesn't take normal cascading preferences in the DOM, and thus cannot have any position: relative held against it
Take CSS element(margin-top:-Xpx;)in Negative Values for the Content Div.
you should do something like so:
.header{
position:absulote;
top:20%;
height:400px;
width:500px;
}

Keeping width/hight ratio and using div normally?

Im still having a bit trouble understanding my divs. Im trying to make a website that changes its sizes according to browser/screen size.
Ive gotten this far:
my html:
<div id="wrapper">
<div id="header">Header</div>
<div id="left">Left</div>
<div id="right">Right</div>
<div id="footer">Footer</div>
</div>
my css:
#wrapper{width: 60%;}
#header{width: 100%; padding-top: 11.00%;}
#left{float: left; width: 27.5%; padding-top: 44%;}
#right{float: left; width: 72.5%; padding-top: 44.00%;}
#footer{clear: both; width: 100%; padding-top: 11.40%;}
Now my divs are exactly the right size, the problem is that the conect is always at the bottom of the div but i need it to be like a normal div so i can do anything i want with it.
Whats the easiest way to use it like a normal div?
Thank you for any help! :)
Edit:
Here is what it looks like: http://jsfiddle.net/rswML/
... and as i said the problem is that the text is always at the bottom of the div. I understand its because of padding-top but i need it to keep the hight ratio to width andd still use the div normally.
What you are trying here is a responsive design concept. I advice you to try out bootstrap framework for this. Rather than doing everything by your own, you can get everything done by simply adding a class to your divs.
Responsive web design (RWD) is a web design approach aimed at crafting
sites to provide an optimal viewing experience—easy reading and
navigation with a minimum of resizing, panning, and scrolling—across a
wide range of devices
I think the issue may be with your padding values. Perhaps adjusting them will allow you to have the control you want or maybe a margin-top would be better. Also, not sure if you were hoping to line up the tops of the elements #left and #right but those padding settings may render at different values. The padding-top property with a percentage references the containing block's width. Hope that helps. Cheers.
The solution was that i had to make header divs position: relative and then make another div inside of it that was position: absolute and width/height: 100%.

HTML fixed div with relative div

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/

Strange div margin issue

I'm trying to add a content rotator to a site I'm building. The rotator works fine. In fact, it works out better than I had hoped. I need to tweak some styling things, but that's besides the point.
For some reason, the rotator (which is relatively positioned and inside my container/wrapper div) pulls my wrapper and menu down with it when I add a margin to the top of it (margin:65px auto 0; or something like that). Any words of advice?
Page here:
http://technoheads.org/test/ice/index.htm
This sounds like a classic case of collapsing margins.
You can fix this by giving the container a border-top, margin-top, padding-top, or an overflow other than visible. (jsFiddle)
you can probably accomplish what you want by giving #wrapper top padding instead giving #slideshow top margin.
I run into this problem a lot when I put elements inside of inline elements. You should be able to fix it by doing one of the following:
Set the element you're having trouble with to display: block; (Usually a good enough fix)
Use top-padding like already suggested (nothing wrong with using band-aids if it works...)
Set the element to float: left; (Not really recommended, can cause some problems down the line, but will definitely allow you to add top and bottom margins)
How about this?
#menu {
position: relative;
width: auto;
height: 100px;
left: 383px;
top: 0px;
}

using CSS only, is it possible to create a div that covers the whole document content area exactly?

I just wonder if it is possible to only use CSS but not javascript to style a DIV that will cover up the whole content area exactly? (note: whole content, not just the viewport). It seems not possible because the <body> element has some margin, and it seems like there is no easy way to style the div to include that margin width and height of the body element. But in fact is it possible?
Update: sorry, a requirement is that we can't set the margin of <body> to 0... (update2: say, if we need to make it into a library and can't ask all people who use it to set the body to have margin 0)
Sure, I think.
Reset default margins:
* { margin: 0; padding: 0; }
then for
<div id="shader"></div>
do:
#shader {position: absolute; width: 100%; height: 100%; min-height: 100%; top: 0; left: 0;}
This is probably a solution, but it won't work in IE...
div.cover { position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px; }
If the <body> margin is set, then couldn't you use negative margins on the <div> to override the <body> margins? I understand <body> margins can vary between browsers. If the <body> has a margin of 10px, then style your div like so:
div#mydiv {
margin: -10px;
}
You'd use the same principle to override padding (if applicable).
Logically, this is impossible. Your DIV has to go inside the body, not outside.
Or to put it another way, you asked for the whole "content area" to be covered, but that's not actually what you want, you want the entire body to be covered.
Lazlow has the best suggestion. Maybe set the negative margins/padding to something large so you can be sure it's bigger than the browser default, then have an inner div with the same margin/padding values only positive?
Yes. you just set the padding and margin of the body tag to 0, then you set the padding and margin of the div tag to zero.
what about this?
<div style="position:absolute;left:0px;top:0px;width:100%;height:100%;">...
Liked Ambrose's answer. The body is ultimate container for your HTML. I have not seen any margins in the body with Mozilla, Chrome, IE, or Opera -- current versions. To prove it: style
body {background-color: yellow;} /*and take a look. */
in any case, it's always a good practice to normalize the browsers setting for margin, padding, etc to zero!
like Dmitri Farkov above
I think there's no way to make the div "float" over your browser, if would so, then the technology could overcome your screen, something like body style="margin: -40px" - should this bleed on your desktop?
And by the way, html styled is abnormal, what would you do next? style , ?? In any case they ARE there so you could set styles on all of them but I don't think it would be much clever.
I don't know if this could help:
<div style="margin:-100%">
But I doubt this can overcome the browser window...
I think MiffTheFox's approach is the best, because its solution covers the situation where other divs has absolute positioning.
Remember that absolute positioning elements go off the flow, and if any element is positioned for example at top:9000px, body height will not be >9000px.
<style type="text/css">
#superdiv{ position:fixed; top:0; left:0; width:100%; height:100%; }
</style>
<div id="superdiv">
Put some content here.
</div>