I made one container <div>,and inside that one there are two <div>'s:
one is width 80% and the other is 20% and need to be position:fixed.
For some reason the total width of the container <div> is longer then the browser window.
once I remove the position:fixed on the right <div> everything is in order but I do need that <div> to be position:fixed.
Here is my code:
HTML
<div class="test">
<div class="leftSummary"></div>
<div class="rightTasks"></div>
</div>
CSS
.test {
width: 100%;
display: table;
}
.leftSummary {
width: 80%;
display: table-cell;
}
.rightTasks {
width: 20%;
min-width: 275px;
display: table-cell;
vertical-align: top;
position: fixed;
}
There is a basic issue here. Once you set position: fixed on .rightTasks, the display property is computed to block instead of table-cell.
This will change the layout accordingly and you need to rethink your markup.
Reference: http://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo
Also, elements with position: fixed are positioned with respect to the view port, not the block element that contains them. Therefore, the 20% width is with respect to the view port and not the .test parent.
If you inspect the .rightTasks element, you will see that the width is 20% of the view port width and not 20% of the table width. If you set the table width to 50%, the effect is more apparent.
You shouldn't use min-width.
Live Demo
EDIT
If you want to use min-width with position: fixed , you should use top and right css. If you dont want to encounter issue that is by browser, you should use reset.css
Live Demo
Related
I'm using a table layout and attempting to set the height of the child of table-cell to be 100% of it's container. Why does this not happen and how do you resolve this?
I also tried setting the table-cell height to 100% without success.
I would like to align ONLY the images to the bottom of the container. How can I do that within a table display?
The amount of text in each table cell is dynamic
Fiddle: http://jsfiddle.net/3u3gpf2n/1/
It seems like you're trying to create a 3-column, 2-row table, but only using single rows in order to keep your markup semantic. Without flexbox, distributing the image to the bottom will require some CSS trickery.
One example, which should fit your requirements of (1) cross-browser, including IE, compatibility (2) allow for arbitrary text in the box is:
*{
padding: 0;
margin: 0;
}
#container{
width: 500px;
margin: 0 auto;
}
ul{
list-style-type:none;
display: inline-table;
}
li{
position: relative;
/* image width / (image height * column count) */
padding-bottom: 11.764705882%;
display: table-cell;
background: red;
/* 100 / column count */
width: 33.333%;
}
a{
color: white;
}
img{
width: 100%;
position: absolute;
bottom: 0;
}
<div id="container">
<ul>
<li><a href><div class="header">Xiao Huang</div>
<img src="http://3door.com/sites/default/files/styles/ablum_306_108/public/special/xiao_huang_ren_fu_ben_.jpg?itok=cPnwgTyV" /></a></li>
<li><a href><div class="header">Xiao Huang</div>
<img src="http://3door.com/sites/default/files/styles/ablum_306_108/public/special/xiao_huang_ren_fu_ben_.jpg?itok=cPnwgTyV" /></a></li>
<li><a href><div class="header">Xiao Huang Xiao Huang Xiao Haung</div>
<img src="http://3door.com/sites/default/files/styles/ablum_306_108/public/special/xiao_huang_ren_fu_ben_.jpg?itok=cPnwgTyV" /></a></li>
</ul>
</div>
I've added a relative position to the LI, and absolutely positioned the Image. To ensure things work correctly, I've given the cells a percentage-based width. I've also added padding to the bottom.
The one thing that this doesn't include is the cursor all the way down. If the user clicks between the image and text, the anchor will not be triggered.
To fix this, consider removing the UL/LI, and styling the anchor tags as table-cells and the wrapping DIV (or NAV, if you have a JS shim for HTML5 tags) as table.
I'm using a table layout and attempting to set the height of the child
of table-cell to be 100% of it's container. Why does this not happen
and how do you resolve this?
I also tried setting the table-cell height to 100% without success.
When using percentage heights in CSS you need to specify the height for all parent elements, up to and including body and the root element (html).
From the spec:
CSS height property
percentage Specifies a percentage height. The percentage is calculated with respect to the height of the generated box's
containing block. If the height of the containing block is not
specified explicitly and this element is not absolutely positioned, the value computes to 'auto'.
auto The height depends on the values of other properties.
In other words, if you have not set an explicit height to the containing block (and the child is not absolutely positioned), then your child element with percentage height will have no frame of reference.
So the problem in your code boils down to this: You're missing a height on parents ul, #container, body and html.
DEMO: http://jsfiddle.net/sedetcc6/
I would like to align ONLY the images to the bottom of the container. How can I do that within a table display?
Although vertical-align is well-suited for aligning elements in a table cell, in this particular case, because each image has a sibling that must not move, the vertical-align property is not useful.
But the images can be shifted with absolute positioning. Try this:
li{
display: table-cell;
background: red;
height: 100%;
position: relative; /* establish nearest positioned ancestor for abs. positioning */
width: 33.33%; /* new */
}
img{
width: 100%;
position: absolute; /* new */
bottom: 0; /* new */
}
DEMO: http://jsfiddle.net/sedetcc6/1/
NOTES:
No changes to original mark-up
For the record, this problem could be easily solved with flexbox, but I understand it's not an option here due to a need for IE 8 & 9 browser support.
I hope I am understanding the problem correctly, but my advice would be to make each anchor display: table-cell so they are forced to the same height, and then you can position all elements inside the anchor or even use background images instead of <img />
JS fiddle here
All you need to need is set a height for all your elements, e.g.
*{
height: 50px;
}
You'll get your desired result: http://jsfiddle.net/asimplepeter/3u3gpf2n/10/
If the amount of text is going to be an issue, you can set overflow: auto for your .header class.
Your code and display properties like 'table' and 'table-cell' things are correct.
But, the problem is that tables are rendered with auto height only. Because of this, eventhough you had set your container height, the table structure was not rendered with the proper height. So, along with container class, set height for 'ul' as well
regarding the position of image, you can set your margin-top to 100% or by calculating the size of the image and reducing that from the 500px container height will help you in positioning.
Hope this answers your all queries
EDIT As setting the margin is expand the table height, alternatively you can use css property like below
transform: translateY(Y);
transform-origin: left top;
In this case, i would think it is better mantain the height of cell according to the img because it's static and set header as absolute.
Something like that:
li{
position: relative;
display: table-cell;
background: red;
height: 100%;
vertical-align: bottom;
}
.header{
width: 100%;
position: absolute;
display: block;
color: white;
background: blue;
}
http://jsfiddle.net/3u3gpf2n/12/
Look at this jsfiddle:
http://jsfiddle.net/w9k2sz52/
#content {
background: #ff0000;
min-height: 200px;
}
.container-fluid {
min-width: 2000px;
}
<div id="content">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<h1>Some title here</h1>
</div>
</div>
</div>
</div>
Why is the width of #content not stretching to be 2000px instead of being the width of the viewport? What do I need to do to make content stretch so that no matter what min-width is set on container-fluid #content will always stretch to fit it
Set #content to inline-block, and then set min-width to 100%. Note that setting width to 100% won't have the desired affect.
#content {
background: #ff0000;
min-height: 200px;
min-width: 100%;
display:inline-block;
}
Adding a float will make the parent element the same width as the child:
#content {
background: #ff0000;
min-height: 200px;
float: left;
}
#content {
background: #ff0000;
min-height: 200px;
display: inline-block;
}
You could use
width:auto;
This should mean it stretches to the width of its contents.
EDIT:
The min-width property in CSS is used to set the minimum width of a specified element. The min-width property always overrides the width property whether followed before or after width in your declaration. Authors may use any of the length values as long as they are a positive value.
You need to set a max-width or width with it. Say you had a width of 80% and a min width of 400px, it will be no smaller then 400px even if 80% of the page is 200px.
You could give the content a min width forcing the div to be auto and be no smaller then the content.
Could #content determine the width, while .container-fluid expands to fill it? Instead of the other way around.
#content {
background: #ff0000;
min-height: 200px;
width:2000px;
}
.container-fluid {
width: 100%;
}
By adding
position:absolute
to your CSS declaration for #content, you force the CSS interpreter to check what elements are inside #content, therefore achieving desired effect.
The problem with absolute positionning is that it remove the element from the natural workflow of the document. Therefore, you are better wrapping the element unto which you want to apply absolute positionning inside another element. This one will stay in the natural workflow of the DOM.
See this jsfiddle: https://jsfiddle.net/7Ls47d83/4/
Google "CSS box model" for more interesting articles and post about this, or this article.
I have two elements, both with display: inline-block, and the parent has white-space: nowrap.
When the screen is resized, the div on the right side don't resize, like this.
I'm trying to make only the blue div resize.
Full source (jsfiddle)
The structure of the html is like this:
<div class="container">
<div class="header">...</div> <!-- red -->
<div class="aside">...</div> <!-- pink -->
<article>...</article> <!-- blue -->
</div>
Relevant css:
* {
box-sizing: border-box;
}
div.container {
margin: 0 auto;
max-width: 40em;
padding: 0;
white-space: nowrap;
}
div.container > * {
white-space: normal;
}
.aside {
display: inline-block;
max-width: 15em;
vertical-align: top;
}
.article {
display: inline-block;
max-width: 25em;
}
Old question, but for the sake of knowledge of anyone who reads this and also has the doubt:
What I've found is that setting position: relative on the .container
and position: absolute on the .article does what I want.
An absolute positioned element is positioned relative to the nearest positioned ancestor, where a positioned element means anything with a position property different to static, the default; if does not found any positioned element, uses the body element.
The absolute positioned elements, if has their width and heigth in auto, resizes to fit its content, and limits the maximun sizes by its positioned ancestor. You can check this putting a short string instead a large one: the element will shrink to the length of text. If you remove the positioning from div.container, the article (if still positioned absolute) will grow (depending on its content) to cover the space between previous element and body width.
And, related to the aforementioned and to add some utility to this delayed answer, a not-very-know bonus: if you define the right and left properties of a absoluted positioned element, and leave the width in auto, the element will cover the horizontal size between the right and left defined. This way you could put something like
article {
background-color: #a0f4ec;
display: inline-block;
position: absolute;
right: 0;
left: 30%;
}
div.aside {
background-color: #faf;
display: inline-block;
max-width: 15em;
width: 30%;
}
This trick also applies in a vertical sense, but with height, top and bottom properties.
There are a few ways to do it.
Method 1:
two divs the same line, one dynamic width, one fixed
Method 2 (negative margins)
http://alistapart.com/article/negativemargins
Unfortunately, Narxx's answers require the divs to be floated. I'm sure that's what you should do if you're building a real site, but in my case, I'm trying not to use it.
What I've found is that setting position: relative on the .container and position: absolute on the .article does what I want.
Simplified fiddle
If anyone can explain why, I'll mark it as an answer.
Please look at the following: http://jsfiddle.net/ran5000/uZ7dD/
the header div has a fixed height of 40px, I want that the content div will use the remaining height of the screen without scroll and regardless of the screen height.
any ideas?
I generally use position:absolute for this, and then set the top value to start at the bottom of the header.
http://jsfiddle.net/uZ7dD/4/
.content {
background-color: yellow;
position:absolute;
top:40px; bottom:0; left:0; right:0;
}
Do you mean like that?
If so, I've used
position: fixed;
property in CSS.
I'm not sure what the browser support is like for the calc CSS feature, but this would be a good case for it. You can read about it here. You would need to change the height of the content div to height: calc(100% - 40px). This, of course doesn't take into account any space taken up by margin, padding, or border so it will still overflow a bit. If you make sure your divs don't have any of those it works perfectly. Here is my JSFiddle for it.
You can also use position: absolute and set the top value to 40px and the bottom to 0px but your parent element needs to have position: relative set.
Alternatively, you can use JavaScript/jQuery to calculate the required height of the content div and apply it.
For css3 browsers just use:
.content {
width: 100%;
background-color: yellow;
height: -moz-calc(100% - 40px);
height: -webkit-calc(100% - 40px);
height: -o-calc(100% - 40px);
height: calc(100% - 40px);
}
for non-css3 browsers use this workaround,
HTML:
<div class="container">
<div class="header">i am the header</div>i am the <content></content>
</div>
CSS
.header {
width: 100%;
height 40px;
line-height: 40px;
background-color: blue;
}
.container{
height: 100%;
background-color: yellow;
}
Hope I could help :)
In this case, the properties of table elements have some advantage in the fact that they have a lot of positioning power. In this case specifically, table rows and cells will always adjust to fill the table container.
Obviously, you don't want to be using actual table html elements, as that would not be semantic, which is where css comes into the game:
If you put a container/wrapper element around both your header and content, and then set it to be display: table; with 100% height and width it will act as the base table element.
Setting your header and content to display: table-row; will now associate them with that container and allow everything to share the table properties. Setting a fixed height on one will still work, and the other will simply fill the remaining space.
<div class="container">
<div class="header">i am the header</div>
<div class="content">i am the <content></content></div>
</div>
And the css:
.container { display: table; width: 100%; height: 100%; }
.header, .content { display: table-row; }
This approach also has the benefit of being well supported across browsers.
Let's say I want to place an element in the center of my viewport for use as a popup message. It should fulfil the following:
Element should remain centered (both horizontally and vertically) within the browser, even if element size changes dynamically
Element should stay centered if browser is resized
No Javascript is allowed
Would still work on IE7
Is there a nicer way of achieving this without resorting to the table-based solution below?
<table style="position:absolute;width:100%;height:100%">
<tr>
<td align="center">
<span id="centeredContent">I always remain centered</span>
</td>
</tr>
</table>
The best solution (in my opinion) is to use absolute positioning to place the top left of the element at 50%/50%, then shoving the element back into the centre using negative margins. The only drawback is that you have to specify a width and height of the element. Here's an example:
HTML:
<div id="centerme">
Hello, world!
</div>
CSS:
#centerme
{
position: absolute;
left: 50%;
top: 50%;
/* You must set a size manually */
width: 100px;
height: 50px;
/* Set negative margins equal to half the size */
margin-left: -50px;
margin-top: -25px;
background-color: cornflowerblue;
}
Here's a demonstration on jsfiddle: http://jsfiddle.net/UGm2V/
If you really require the centred content to have a dynamic height, there's a more advanced solution. Be ware that it won't work in older IE browsers. The HTML goes as follows:
<div id="outter-container">
<div id="inner-container">
<div id="centred">
<p>I have a dynamic height!</p>
<p>Sup!</p>
</div>
</div>
</div>
The outter container is required to cover the width and height of the page. It's a block element with absolute positioning.
The inner container is actually a table! That's decided by the display: table css property. The win here is that you don't actually need any table HTML.
The #centred div is the last required element. It still covers 100% of the page's width and height, but anything placed inside it will be centred both vertically and horizontally. This is the css you need, with explanations:
/*
An outter container is needed because the table
won't cover the page width and height on it's own
*/
#outter-container
{
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
}
/*
The inner container is a table which is set to
cover the width and height of the page.
*/
#inner-container
{
display: table;
width: 100%;
height: 100%;
}
/*
This table cell will cover 100% of the page width
and height, but everything placed inside it will
be placed in the absolute centre.
*/
#centred
{
display: table-cell;
vertical-align: middle;
text-align: center;
}
And of course, here's a jsfiddle demonstration to go with it: http://jsfiddle.net/N7ZAr/3/
If it is a fixed size element, you can do something like this:
#centered {
position:absolute;
width:200px;
height:400px;
top:50%;
left:50%;
margin-left:-100px; // negative-half of element's width
margin-top:-200px; // negative-half of element's height
}
The trick here is top:50%; left:50%;. Combine it with a margin-left and a margin-top equal to negative-half of your width and height, and your element will be centered in your page.
If you do not use a reset stylesheet such as Eric Meyer's CSS reset or normalize.css, it's important you set your body to margin:0; for this trick to work.
Here is a jsfiddle: http://jsfiddle.net/remibreton/fZywe/1/
Live example of a site I did: http://althotels.ca/
http://milov.nl/code/css/verticalcenter.html
check the source code
If you don't know the size of the centered content, you need a two step centering
Example here: http://jsfiddle.net/G6fUE/
<div class="popup-center">
<div class="content">
sadalshd<br />
sadalshd<br />
<img src="http://www.lorempixel.com/200/200" />
sadalshd<br>
</div>
</div>
.popup-center {
position: absolute;
top: 50%;
left: 50%;
}
.popup-center div {
margin-left: -50%;
margin-top: -50%;
}
for left/right centering, you can specify a width for the element and set the left and right margins to "auto".
For vertical centering, it's a bit trickier. You can use percentage heights, but remember to set the height of the body to be 100% or this won't work.
Don't know if this works in IE7, sorry.