I have html like this:
<div id='content'>
<div id='first'>...</div>
<div id='second'>...</div>
</div>
#content
{
width:100%;
position:relative;
padding:20px;
}
#first
{
width:70%;
position:relative;
}
#second
{
width:70%;
position:fixed;
}
this causes the second div to be a bit wider (40px to be exact) than the first div, because the first div's 70% is with respect to the content's width (which is 100% minus the padding of 20px on each side).
What does the second div's 70% refer to? How could I make it so that the two divs are the same width?
The first div's 70% refers to 70% of the width of #content.
The second div's 70% refers to 70% of the width of the viewport.
If you add this CSS, the two div's are the same width:
html, body {
margin:0; padding:0
}
Live Demo
According to the CSS 2.1 Positioning Scheme spec:
In the case of handheld, projection,
screen, tty, and tv media types, the
box is fixed with respect to the
viewport...
This leads me to believe that the 70% you're setting is actually 70% of the viewport.
As far as making it the same width as the other div, perhaps you could use JavaScript (or specify widths explicitly).
This weird behavior (great question!!) can be referred about the fact that the relative div (first) take the width looking at his father. The second one just look at the viewport, no matter who is its father (and what width is set to its father)!
This can fix your problem:
body,html{
padding:0;
}
Edit -> Fiddle
I set an absolute width using javascript to detect the computed width of #first.
Related
First off, here is a JSFiddle that represents the issue.
I am trying to have a "container" id that is the size of the entire viewport. This is so all div items in #container fit inside the page without scrolling. I assumed thats what height: 100% in html, body, and #container would do.
It seems though, that the .thirdwidth elements height is that of the full viewport, and is not just expanding to the bottom of the #container div (if you inspect the element, it appears that the .thirdwitdh elements go outside the #container)
Does anybody know why this is happening? I would like to be able to have all Sections 0-3 fit on the page without scrolling.
To achieve 100% viewport height you can try 100vh, but why are you placing it's position to absolute.
body {
margin:0;
padding:0;
}
#container {
height: 100vh;
width: 100%;
position:relative;
overflow:hidden;
}
Thanks to #Abbr for this answer (thought I would post a standalone answer so it's not hidden within the comments)
Due to the fact that the gameinfo id is 20% of the parent div, setting the .thirdwidth columns to 100% height made the entire page 120%
Changing the height of the .thirdwidth in my CSS to 80% fixed it!
I have two children of the body element. Both the HTML and BODY elements are styled to height:100%. As for the children, the first has a fixed height of 100px and the other is set to height:100%.
HOWEVER, doing this displaces the second child element visually, pushing it down the page and creating a side scroll bar. Effectively, this child IS 100% the height of the body and html tags, but because it comes after the first child of 100px, the entire section is displaced down the page 100px and creates a side scroll bar.
I could use overflow: hidden on the one of the parent elements to clip this excess off, or use a negative margin on the second child to draw it back, but I'd prefer not to.
Ideally, the second element will come directly after the first child, and stretch to the bottom of the window and no more. I want the section#content to respond to viewports, so I don't want to set a explicit height for it either.
I've tried various positioning techniques on the parents and children, but still not what I'm after.
For example, setting the parent element to position absolute and pinning in to all four corners of the screen has no effect on the child elements height. It still maintains the proper height but still is effected by that 100px offset.
Here is some simple HTML:
<body>
<section id="header"></section>
<section id="content"></section>
</body>
I've set the html and body height to 100%, and given #header a height of 100px.
section #content I've given a height of 100%, but the problem is this section expands PAST the window height.
Here is my simple CSS:
html, body{
height:100%;
margin:0; padding:0;
}
section{
margin:0; padding:0;
}
#header{
height:100px;
}
#content{
background:white;
height:100%;
}
Any idea what's going on here? And more importantly, how to fix it??
Cheers
I've added a negative margin-top of -100px to #content (headers height) + added position: relative; to #header. Is that what you're looking for?
Here's a jsFiddle: http://jsfiddle.net/breadadams/1zptzjwr/
Well, you said it yourself what is going on... You are placing a full height element after a 100px height one. So, your document has a height of 100% + 100px. Nothing mysterious so far.
There are many approaches to create this kind of layout. My favorite involves using a display: table layout, that will auto size itself.
But a simple fix would be to use calc() on the second height (if you are not concerned about old IE versions...)
#content{
background:white;
height: calc((100%) - 100px);
}
Viewport-Percentage (or Viewport-Relative) Lengths:
These units are vh (viewport height), vw (viewport width), vmin (viewport minimum length) and vmax (viewport maximum length).
Try This.Link
Html:
<body>
<div class="wrapper">
<section id="header"></section>
<section id="content"></section>
</div>
</body>
Css:
body{
height:100vh;
margin:0; padding:0;
}
.wrapper {
height: 100%;
}
section{
margin:0; padding:0;
}
#header{
height:100px;
background:blue;
}
#content{
background:red;
height: calc((100%) - 100px);
}
http://www.mysecretathens.gr/kulte_test/as_index.html
I am trying to override the width of #kontainer in my <li> list at the bottom. I want the .nav3 list to be full width, 100% but I cant override the 700px of the parent element, #kontainer
What can I do? I tried the !important; rule, but that didn't give me the results I wanted.
When specifying percentage width, it calculates based off the parent's width. So 100% of 700 is... 700.
You need to specify a pixel width if you want it to go over 700.
Solution 1: You can get .nav3 out of #kontainer
Solution 2: You can add position: absolute; left: 0; to .nav3 and then add some margin-top on #footer tu push it down.
Width 100% means get 100% of the parent element that the child is inside. It actually does what you said it to do! You can get nav3 out of the #kontainer to take the 100% of the body element.
I want the same thing, to override the parent width.
I'm developing a Joomla component
<div class="container mainbody"> //** width 1170px **//
<div>some content</div>
<div>some content</div>
</div>
I don't want to change the width (1170px) of the outer div or .container class because it is default in Joomla template, which will take effect in every page if I change.
In my case, I only need a 100% width for some child div in my website's home page for some design.
What I did is add css in home page html file, since it will not call in other page.
<div class="container mainbody">
<div class="container">some content, width 1170px</div>
<div>some content, width 100%</div>
</div>
<style type="text/css">
.mainbody
{
width:100% !important;
}
</style>
For the div you want a full page width, you should use:
position: absolute;
left: 0px;
right 0px; //but make sure that any content you have below that div, gets margined in response.
margin-top: 200px; //Use the height of the above div
I have just noticed a "VERY" interesting (and bold) way of overriding the parent element's width. Set the child's width to something like:
width: calc(100% + 30%);
Believe it or not, at least Firefox 51 is calculating correctly the child's width, and yes, it is bigger than the parent's width.
Let's say we have the following HTML:
<div id='parent'>
<div id='child'>
</div>
</div>
If we set this CSS :
#parent {
width:1000px;
height:1000px
}
#child {
width:20%;
height:40%;
margin-top:10%;
}
The child element will have a margin-top that will be a % of the parent height or the child height? Also there is a different way that browsers render the % sizeing when it comes to margins ? If there is a padding applied to child/parent , it will influence the margin?
The best way to check is it test it out yourself ;)
All percentages with regards to width, height are calculated based on the parent container's width - in this case, the #child element will have a width of 200px and height of 400px.
Meanwhile, paddings and margins, when percentage-based, are calculated from the containing parent's width: therefore #child will have a top margin of 100px.
Do take note that vertical margins (i.e. the top and the bottom margins) may collapse under some circumstances. In the fiddle that I have posted, this is exactly the case.
I'd like a fixed element's width to match that of the div placed immediately below it. Imagine a header and a main content div. A problem in matching their widths occurs when the header and content divs are nested inside an outer div. In this scenario the % widths of each no longer match their parents width (e.g.,<body> tag) and the fixed element's width is based on something which is confusing me.
To better explain what I mean, contrast these two js fiddles:
http://jsfiddle.net/2dudX/4/
vs.
http://jsfiddle.net/2dudX/10/
here's the code for each:
<div id="fixed"></div>
<div id="content"></div>
#fixed{ position:fixed; z-index:2; width:90%;
height:25px; background:yellow;}
#content{ width:90%; height:300px; background:red}
vs.
<div id="main">
<div id="fixed"></div>
<div id="content"></div>
</div >
#main{ width:95%}
#fixed{ position:fixed; z-index:2; width:90%;
height:25px; background:yellow;}
#content{ width:90%; height:300px; background:red}
Note only in jsfiddle #1 do the yellow and red divs widths match up regardless of how you resize the browser. Unfortunately, jsfiddle#2 is more of a real world scenario and I'm wondering how to correct the id="fixed" div such that its width also matches up with id="content" div.
Thoughts?
You can to it this way FIDDLE (to set % relative to the #main)
fixed element's dimensions always is calculated relative to the root element, so you need to reset %-unit accordingly
in this particular case you need to set:
#fixed {
width: 85.5%;
}
It is case #main is 95%, your static element is 90% relative to the main. So you need to calculate its width towards the root element (1 * .95 * .9 = .855)
Easy one my friend. Fixed width elements are yanked from their parents and are now relative in width to the window, so in both situations the fixed div is always relative to the size of the window, but when in a parent container with a width other than 100% the fixed element will remain relative to the window width but the non-fixed position element is now relative to the parent width. So the non-fixed element became 90% of the 95% of the window while the fixed element remained a constant 90% of the window only.
Edit:
If you wish to match the widths you can use jquery like this:
$(function(){
$('#fixed').width($('#content').outerWidth());
});