I tried a responsive css layout,but "top:50%" can't work and the "left:50%" can.
Why it happened?
<div style="position:relative;top:0%;left:0%;height:100%;width:100%">
<div style="position:absolute;top:50%;left:50%;">
</div>
</div>
Define a dimension for the parent container, e.g. div:
<div style="border: 2px solid red;position:relative;top:0%;left:0%;height:200px;width:300px">
<div style="border: 2px solid green;position:absolute;top:50%;left:50%;height:50%;width:50%">
</div>
</div>
Or
Another way is to just stretch the parent container, i.e. div, by its top, bottom, left, and right properties. Like this:
<div style="border: 2px solid red;position: absolute;top: 0px;bottom: 0px;left:0px;right:0px;">
<div style="border: 2px solid green;position:absolute;top:50%;left:50%;height:50%;width:50%">
</div>
</div>
Consider your original HTML:
html, body {
height: 100%;
}
<div style="position:relative;top:0%;left:0%;height:100%;width:100%">
<div style="position:absolute;top:50%;left:50%;">test</div>
</div>
The inner/child div has position: absolute, so it is out of the content flow of the parent element and will not contribute to the height or width of the parent element.
The parent div is in the content flow, but has no content, so its intrinsic
height would be zero. However, you specified height: 100%, but this will not do anything because the div has no height reference on which to base a computed value. So the computed height value for the parent div is zero.
As a result, the child element's top offset computes to 50% of zero,
so it is positioned at the top edge of the parent block.
You would need either to specify a height for the parent div or assign
html, body {height: 100%}
as this would allow the div to compute its height based on the height of the
body, which is based on the height of the html, which being 100%, takes that of the screen.
See the link below. I believe you're going to have a better result with Fixed for what it is you're trying to do, although I'm still not 100% sure I understand what that is.
http://jsfiddle.net/8q107wvb/1/
body {background:#e9e9e9; color:#202020;}
#wrapper {width:500px; background:#fff; margin:50% auto;}
.centered-content {position: fixed; top: 50%; left: 50%; background:#fff; padding:20px;}
This is another to solve this issue
* {
height: 100%;
}
.first{
position:relative;
top:0%;
left:0%;height:100%;
width:100%"
}
div{
position:absolute;
top:50%;
left:50%;
}
<div class="first">
<div style=>Check this</div>
</div>
Related
I am trying to design a responsive web page so I am trying to avoid using pixel values. But sometimes, for example when trying to limit the width of a text containing div, I cannot use percentages since the width of the contianer is not known and going to be determined by the content inside. And due to the way CSS works, I cannot give a width value with reference to the container div higher in the html hierarchy.
So I thought of using vw, but since I am using min-width, max-width values on the body, it will not work properly outside those values. What can I use instead to refer to the body width?
Edit:
Since an example was asked for, I provided below an example whereby percentage did not work. Trying to make the span width 10% of the outermost container with no luck. Here is the jsfiddle link also: https://jsfiddle.net/68ha60p6/
html,body{
width:100%;
height:100%;
padding:0;
margin:0;
}
<div style="width:100%; height:60px;">
<div style="float:right; height:100%;padding-right:1%">
<button style="display:inline-block; height:70%;background-color:green; color:white;border:none; padding:0;">
<span style="display:inline-block; max-width:10%; text-overflow:ellipses;overflow:hidden; max-height:100%;text-align:center;white-space:no-wrap;">John John</span>
</button>
</div>
</div>
I cannot give a width value with reference to the container div higher
in the html hierarchy.
You absolutely can.
Have a look at the example below.
You'll see that the width of the parent container is not explicitly stated (it's determined by the content of the first subcontainer). Regardless, the second subcontainer's width is 50% of its parent's.
div {
margin: 6px;
padding: 6px;
}
.container {
display: inline-block;
border: 1px solid rgb(255,0,0);
}
.subcontainer1 {
border: 1px solid rgb(0,0,255);
}
.subcontainer2 {
width: 50%;
margin: 6px;
border: 1px solid rgb(0,255,0);
}
div p {
line-height: 60px;
}
<div class="container">
<div class="subcontainer1">
<p>I am a long sentence and I will define the width both of this sub-container and of the overall parent container.
</div>
<div class="subcontainer2">
<p>I am half the width of the overall parent container.</p>
</div>
</div>
I have a table inside a div, and the table won't fill the container div. Why not?
HTML:
<div class="fill">
<table class="table">
...
</table>
</div>
CSS:
.fill {
position:relative;
width:100%;
height:100%;
}
.table {
position:absolute !important;
left:0 !important;
right:10px !important;
bottom:0 !important;
top:39px !important;
}
The table only fills a small portion of the container div. Why?
UPDATE:
Or, If I try the following, it doesn't work in Firefox, but it does in Chrome.
HTML:
<div class="fill">
<div class="wrap">
<table class="table">
...
</table>
</div>
</div>
CSS:
.fill {
position:relative;
width:100%;
height:100%;
}
.wrap {
position:absolute;
left:0;
right:0;
top:39px;
bottom:0;
}
.table {
position:relative;
height:100%;
width:100%;
}
This second version is closer to what I want (since it DOES work in Chrome).
In regards to your original question, this is the answer to your 'why not':
If the height of the containing block is not specified explicitly
(i.e., it depends on content height), and this element is not
absolutely positioned, the value computes to 'auto'.
Source: http://www.w3.org/TR/CSS2/visudet.html#the-height-property
Your 'fill' div is set to 100% height, but what is its parent element's height set to? And if its parent element's height is also a percentage, what is its parent's height set to, and so on?
Add borders to your updated example and you could see, the height of 'fill' is 0 as it has no parent with a specified height, and so the height of 'wrap' is also zero. Add a parent wrapper to wrap the whole example with a height of 500px or so and it works as expected in (at least) Firefox and Chrome.
CSS:
.fill {
position:relative;
width:100%;
height:100%;
border: 1px solid red;
}
.wrap {
position:absolute;
left:0;
right:0;
top:39px;
bottom:0;
border: 1px solid blue;
}
.table {
position:relative;
height:100%;
border: 1px solid green;
}
.parent {
height: 300px;
}
HTML:
<div class="parent">
<div class="fill">
<div class="wrap">
<table class="table">
<tr><td>...</td></tr>
</table>
</div>
</div>
</div>
Tables are special, they don't behave like other block elements. Normally, a table will be just wide enough to hold its contents, and no more. Setting a width of 100% for the table should force it to fill the space allotted for it.
On .table, put width=100%
You may have to set a width for the td as well.. Depending keeping your layout structured
Your parent div of the table has a width and height of 100% which is going to be whatever the parent element is. The table needs to not be position: absolute, and therefore no need to have top, left, right, bottom set.
table {
border: 1px solid blue;
width: 100%;
height: 100%;
margin: 0;
}
Here's my fiddle of what you wanted, minus the top and right offsetting you have.
http://jsfiddle.net/jaredwilli/5s4DD/
You can instead use margin to set the top and right but you then cannot use the 100% width, that will not work. You can use display:inline-block, while not having a 100% width but instead dynamically setting the width to be 10px less than the width of the fill div's width using javascript but that's another thing. Same goes for the top positioning. You could do some other things too, but there's a lot of playing with things that you would need to do.
Also, you can use table, no need for a class unless you have multiple tables in the page.
And remove all of the !important's from your CSS.
It's never necessary to use !important, just saying.
I was under the impression that when using % or auto for margins on a div contained within another div the position would be calculated in respect to the parent div.
So if I have a div with height: 50%, margin-top: 25% and margin-bottom: 25% the box should centre vertically within the parent div.
When I do this though the div centres on the page not the parent div.
The CSS
div#header {
width: 100%;
height: 100px;
margin: 0px;
position: fixed;
}
div#leftnavigation {
height: 50%;
margin-top: 25%;
margin-bottom: 25%;
float: left;
}
And the HTML
<!--Title and navigation bar-->
<div id='header'>
<!--Left navigation container-->
<div id='leftnavigation'>
<p>efwfwgwegwegweg</p>
</div>
</div>
In my case there are other divs floated to the right of the one detailed above, but any one of them behaves the same way. I'm assuming I'm doing something daft but I've been over all the other questions I could find along these lines and still can't figure it out.
EDIT
Here's the JSFiddle as requested http://jsfiddle.net/ChtVv/
UPDATE
I've tried removing the margin constraints and setting the leftnavigation div to height: 100%, this works so the issue is with the margin attribute?
The reason it didn't work is that percentage-margins are percentages of the parent's width, not its height. You can tell this by using margin-top: 25px; margin-bottom: 25px;, and also by increasing the width of the right-panel in jsFiddle.
In all cases % (percentage) is a valid value, but needs to be used
with care; such values are calculated as a proportion of the parent
element’s width, and careless provision of values might have
unintended consequences.
W3 reference
CSS is tricky!! :D
This is a borrowed technique to centre vertically and horizontally, but it would involve changing your HTML and CSS. I am not sure how flexible you are with your code:
CSS:
#outer {width: 100%; border: 3px solid red;}
#middle {width: 100%; text-align: center;border: 3px solid green;}
#inner {width: 200px; margin-left: auto; margin-right: auto; text-align: left;border: 3px solid blue;}
/* Courtesy: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html */
HTML
<!--Title and navigation bar-->
<div id='outer'>
<!--Left navigation container-->
<div id='middle'>
<p id="inner">efwfwgwegwegweg</p>
</div>
</div>
You can build upon this to achieve whatever you are after!
fiddle: http://jsfiddle.net/pratik136/ChtVv/2/
Ok, so there are a lot of reasons why this would not work.
The main reason would be that your container has position:fixed;
When adding position:fixed; to a element, it no longer reserved it's space in the DOM and won't contain it's children.
I have made a example of the best way (in my Opinion) to center your child both Vertically & Horizontally
Here is a demo.
Demo
And here is the code.
<div id="container">
<div id="child"></div>
</div>
#container{
width:100%;
height:500px;
background:#CCC;
margin:0;
}
#child{
width:50%;
height:50%;
background:#EEE;
position:relative;
top:25%;
left:25%;
}
I am trying to use CSS to get a DIV to fill the remaining page width, after a fixed-width div on the left (and below a fixed-height header)
The CSS I have is:
body{margin:0;padding:0}
#header{height: 100px; background:#ccccff;}
#left {position:absolute; left:0; top:100px; width:200px; background:#ccffcc;}
#main {position:relative; left:200px; background:#ffcccc;}
The HTML is:
<div id="header">Header stuff here</div>
<div id="left">Left stuff here</div>
<div id="main">Main stuff here</div>
(head and doctype omitted here for brevity)
When it is rendered, the main div is still full page width, meaning the right-hand edge is 200px off the right edge of the browser. How can I get the main div to fill the remaining width?
(eventually I will want to put other divs inside main, and make their widths expressed in % relative to the main div)
Is this even possible?
Don't use position. Use Floats. Float the "left" div left, set its width. Give the "main" div a left-margin of the width of the left div, and set the width to auto.
#left { float: left; width: 200px;}
#main {margin-left: 201px; width: auto;}
Example here: http://jsfiddle.net/GhtHp/1/
Instead of using positioning which is considered evil, just use floats.
#left {float:left; width:200px; background:#ccffcc;}
#main {margin-left:200px; background:#ffcccc;}
DEMO
Does this accomplish what you're looking for?
HTML -
<div id="header">Header stuff here</div>
<div id="left">Left stuff here</div>
<div id="main">Main stuff here</div>
CSS -
div {
border: 1px solid black;
}
#left {
float: left;
}
Jsfiddle - http://jsfiddle.net/xzWK5/
Yes, it's easily possible with CSS calc. Unfortunately CSS calc is only supported in Chrome so far.
Here's a better way:
HTML:
<div id="header"></div>
<div id="left"></div>
<div id="main"></div>
CSS:
#header{height: 100px; width: 100%; background:#ccccff}
#main{position: absolute; left: 200px; right: 0; background:#ffcccc}
#left{width: 200px; left: 0}
Having #main exactly 200px from the left and 0px from the right gives you the full width minus #left
Some html:
<div style="height: 300px">
<div id="inner">
<div id="title">
...
</div>
<div id="content">
....
</div>
<div>
..another div
</div>
</div>
</div>
I want my inner div height to be not greater than parent div's and if it is greater then content div should have scroll, but if it is smaller it should be the same size with it's content.
I've tried to set inner's max_height=100%, but I can't make my content have scroll.
I want to do it without js
UPD: I do not know main div's height (300px is not constant)
UPD2: My main div has "max-height: 100%", so I do not know exact value
Demo:
http://jsfiddle.net/kzfRk/7/
Not sure I understand, but if your scroll bars are not appearing try:
#inner{overflow-y:scroll;}
Is this what you had in mind? (colours are just for ease of viewing) See live here.
css
.container{
height: 300px;
overflow: hidden;
border: 1px solid #000;
}
#inner{
max-height:300px;
overflow-y: auto; border: 1px solid #f00;
}
#title{ background-color: #eed;}
#content{background-color: #fee;}
html
<div class='container'>
<div id="inner">
<div id="title">
...
</div>
<div id="content">
....
</div>
<div>
..another div
</div>
</div>
</div>
Do you have a live example? It's difficult to work out what you are trying to do.
Do you want the parent div to fill the screen and the content to scroll withing it? If so, give your parent div a height of 100% and try applying the following style to your inner div:
height:100%; min-height: 100%; overflow:auto;
You set your height then use overflow to control the scrolling.
#inner{max-height:100%;overflow-y:scroll;}
Example: http://jsfiddle.net/calder12/drC3L/ Change the size of the outer div to anything you want, if there is too much content the inner div will scroll.
You need to set the inner div maximum height the same as the root div height. Using your fiddle, copy and paste the CSS below into your CSS file and it will work...
.container{
max-height: 100%;
border: 1px solid #000;
}
.inner{
max-height: 100px;
overflow-y: auto; border: 1px solid #f00;
}
.root{
height: 100px;
border: 1px solid;
}