I am having a problem with some div's
The outer div has a min-height, but the inner divs are all varying heights. Because the inner divs are absolute positioned, they do not affect the outer divs height. Is there a way to make these inner divs affect the height of the outer div?
The reason I am styling these divs with position:absolute is so that they all start at the top of the container div.
As far as I know, there's no way for absolutely positioned child elements to affect the height of their statically, or relatively positioned parent elements using only CSS. Either:
Reorganize so that the child elements remain in the document flow
Use JavaScript on load of the page to set the height of the parent to the height of the largest child
This issue is common in fade-in/fade-out JavaScript slideshows, and from what I've seen either 1) the height of the parent container needs to be defined or 2) the parent container's height is set dynamically for each slide.
I recently had this problem with a fade in/out CSS transition slideshow, and ended up solving it by giving the first child element position: relative; and the others position: absolute; top:0; left: 0; which ensures that the containers height is the same as the height of first element. Since my CSS transition slideshow uses the opacity property the container dimensions never changes during the course of the slideshow.
Alas, since I also needed to supply a javascript fallback for older browsers I had to set the container height for these browsers anyway (because of jQuerys fadeIn/fadeOut actually setting display: none; I would guess).
Here is a long overdue cross-browser solution to your problem. No more static width, no more em hack.
<style>
/* clearfix */
.container:after {
content: '';
display: table;
clear: left;
}
.page {
float: left; /* display side-by-side */
width: 100%; /* be as wide as parent */
margin-right: -100%; /* take up no width */
}
</style>
<div class="container">
<div class="page"></div>
<div class="page"></div>
</div>
After searching for a solution to this problem for so long, I am baffled to see how simple it is. Granted, the .page elements are not absolutely positioned. However, all the same goals can be achieved through this method, with almost no pain or sacrifice.
Here's a demo: https://jsfiddle.net/eqe2muhv/
This also works for inline-blocks, of course. Though you might need to set the font-size or letter-spacing of the container to 0. I would also recommend using vertical-align: top on the .page, to simulate a regular block element.
Here's a demo: https://jsfiddle.net/dzouxurs/8/
Try to use display: inline-table, height: auto; .. it works for me
I think you should position them relatively and just change "vertical-align" to "top" in the interior divs. Then you won't have the issue of messing with abs divs.
You can simply float the divs if you want them to be on the same horizontal plane.
i've done this task without any JS. Only, by CSS:
.frame {
max-height: calc(100vh - 283px); // 283px gives me some space at the botoom of the frame
}
Maybe u can try max-height: calc(100% - 50%); it will work if the content that should be in the middle of the screen/div is super short/small.
position:absolute;
top:0;
bottom:0;
margin:auto;
width:auto;
height:auto
max-height: calc(100% - 50%);
...etc...
Test display: inline-block on the element that need auto height.
Related
I have a panel with a height of 100vh, so 100% of the screen (but height: 100% doesn't work, for some reason).
This panel must show a div with its own contents and the footer.
The footer is normally displayed under that panel, but in the front page it must be inside it, so I have to disable the normal one and call it inside the panel.
Thus, it must have position: absolute and bottom: 0.
Now the problem is that the footer takes its own height (which changes a bit when resizing the window's width), and the other div in the panel must take all the remaining height.
So, is there a way to set that div's height dynamically, rather than filling the CSS with media queries for each window width where the footer's height changes, setting it as height: calc(100vh - [footer height])?
Firstly, if you don't set height for parent elements, setting height in percentages on the child won't work. Your parent elements should have their height set to 100% (including html and body elements).
Secondly, if your browser support is IE10+, I recommend using flexboxes.
Here's how you do it (without browser prefixes):
.parent-container {
height: 100%;
display: flex;
flex-direction: column;
}
This will set the parent container as flexbox and change its direction to "column" (so its children stack one under the other).
.expanding-child {
height: 100%;
flex-basis: 0;
flex-shrink: 1;
flex-grow: 1;
}
This is the wrapper for your content. It will expand as much as it can, keeping in mind your footer's height.
.sticky-child {
flex-basis: auto;
flex-shrink: 0;
flex-grow: 0;
}
This is your footer that will now always be at the bottom, pinned, without overlapping the scrollable content.
Here is what your HTML would look like:
<div class="parent-container">
<div class="expanding-child">
</div>
<div class="sticky-child">
</div>
</div>
And I made a quick fiddle to demonstrate it here
This will work as intended only if you set height to 100% on all parent elements.
Edit: here is a good source to learn more about flexbox, I recommend looking into it. And here is one I used when I first started using flexbox.
I think you are asking about sticky footer. I hope it will helps you. Always footer fixed at bottom using FlexBox
Fiddle
In a fluid layout I need in the same line, side by side, a fixed-width block and a fluid width block with a max width. When the window is resized, the fluid width block should resize being "pushed" by the fixed width block.
Here is what I came to achieve: http://cssdesk.com/gHvUB
But sadly the content expands outside its container .....
Anyone ?
One way to achieve your goal with the example you gave would be to
Add a right margin of 200px to the fluid box
Add a relative position of -200px to the fixed-width box.
.line {
...
position: relative;
}
.fluid {
...
margin-right: 200px;
}
.fixed-width {
...
position: relative;
top: 0;
right: -200px;
}
With css (and especially css3) there are going to be many different ways to achieve this.
Here a couple examples:
example
example
And here on the site:
CSS Layout 2-Column fixed-fluid
Ok, the easiest way is to set the container to overflow: auto. Then set both child containers to position: absolute. Since the container's position:relative they'll sit inside the parent. Then you need to set the parent's height to something. You can try min-height: (value). I have a sample here.
Hope this helps.
I have this problem that is driving me mad... I've been struggling with it for hours but can't figure out how to over come it.
I am using jqDock and want to place a toolbar in a "box" in a column. There is quite a lot of code included but you can see a sample here: http://ag.wasen.net/index.php?option=com_content&view=section&id=2&Itemid=17
Look at "Simple File Lister v2.0 #2" in the right hand side column where the toolbar is perfectly place. Then look at the left hand side where the toolbar goes vertical and is completely off track.
These two modules (as they are called in Joomla) is using the exact same code!
The difference between these two modules, the left one and the right is that the left one inherits a lot of CSS from the "div" statements in the left column.
The problem seems to be with the inherited "width" from a previously loaded CSS file. If I look at it in FireBug and remove the declaration for #leftcolumn div {width: 191px;} in FireBug the toolbar on the left is working fine.
I have tried to insert my own "width" on all different DIV's and using "!important" but even if FireBug shows the "#leftcolumn div" as stiked-out it still affects my toolbar DIV.
Regardless of how I have tried to "nullify" the inherited "#leftcolumn div" width it still affects my DIV.
Any clues on how I would be rid of it?
Regards,
Anders
Try the below css - Paste this in you template.css file and try to set the width if required on different selectors.
#main_bg #leftcolumn div.module_menu div div div, #main_bg #leftcolumn div.module div div .jqDocked div {
width: 20px;
}
see below image for output: Open the image in new window so you can see clearly.
Problem 1. You are trying to fit a horizontal Dock that has a maximum expanded width of 263px (7 48x48 icons) into a column that is only 191px wide: the Dock is going to overflow!
Problem 2. The template you are using is setting a specific width of 191px on any div more than 1 level below the div.module child of div#leftcolumn. Additionally, your template is specifiying both width and padding on some elements, which is going to cause cross-browser inconsistency and also makes some of the elements extend beyond the bounds of the column.
Since jqDock does not provide many ids on elements, the rules needed in order to override your template are going to have to be at least as 'specific' as the template's, if not more so.
For example, replace your page's rules for...
.sflpage {...}
.sflmenu {...}
#main_bg #leftcolumn div.module_menu div div div,
#main_bg #leftcolumn div.module div div {...}
with...
/*position the Dock's container, ensuring it's visible, and killing
the padding imposed by the template...*/
#leftcolumn div.module div div div div.sflpage {
padding: 0pt;
position: relative;
top: -20px;
width: auto;
z-index: 9999;
}
/*put the Dock in the center of its container, and give it plenty
of width for a fully-expanded Dock...*/
#leftcolumn div.module div div div div.jqDocked {
left: 50%;
margin-left: -150px;
padding: 0px 0pt;
position: absolute;
top: 0pt;
width: 300px;
}
/*kill the width and padding imposed by the template...*/
#leftcolumn div.module div div div div.jqDocked div {
width: auto;
padding: 0;
}
/*center the dock...*/
#leftcolumn div.module div div div div.jqDocked .jqDockWrap {
margin: 0pt auto;
}
/*use this to set/tweak the label's styling...*/
#leftcolumn div.module div div div div.jqDocked .jqDockLabelText {
}
I would also suggest that you need more horizontal space for the Dock (ie. between the module header and the file list), that your labels need better styling so that are visible and readable.
I'm struggling with a client project. All of my divs have no absolute positioning, height:100% for html, body, and container divs, and yet the static-content stops short of its contents (at 910px).
I can change the overflow property to auto, and the background will continue down to the end of the content, but it adds a scroll bar, and the bottom border of the static-content div stays in the same place (at 910px).
UPDATE: Development link was no longer valid, so I removed it. Suffice to say that Animuson's thorough explanation is the valuable part of this thread, and solved the problem of containers not expanding to match their content. – Ty
You used the wrong overflow-y property for clearing, and you should set a min-height instead of a regular height. Try this:
#static-content {
background-color: #FFFFFF;
margin: 0 auto;
min-height: 100%; /* Set to minimum height so overflow doesn't get hidden */
overflow-y: hidden; /* HIDE overflow; I know, it doesn't make much sense */
position: relative;
width: 960px;
}
Floating Content by Itself
Given this green box which has a padding of 20px (for visibility), notice how a single red box floated to the left will expand past the boundary of its parent box. This is because floating content doesn't actually take up any "space" in the visual area. All other elements will expand underneath it, and only text will wrap around it.
Clearing Floated Content in the Parent
In order to counter this and make the green box completely encompass the area of its child red box, we can add overflow: hidden to its styles. This will expand the box down far enough.
Expanding the Parent to 100% Height
You might think that just adding height: 100% is the simplest way to make it expand to where it needs to be.However, the height property specifies an absolute height. Since the content which is floated does not actually take up any vertical space, our overflow: hidden property will cut off all the content that goes past the parent's height.
Using a Minimum Height Instead
Since we want it to expand to at least a 100% height, we can use the min-height property to force it there and still maintain the "automatic" height needed to make the parent green box fully encompass the child red box, letting it push past the 100% only when it needs too.
How You Were Set Up
All elements, by default, are set to overflow: visible so that property didn't really change anything. The only difference you had between this and the first example I provided was that you had a height: 100% set on the element. So the parent was expanding to 100% height but still not encompassing the full height of its child red box.
If you have to use overflow:visible for some reason, there's other way to force container to stretch to contain all floated content. You have to put element with clear:both as a last container's elements. If you ignore ancient IEs (<8) you can do it with very simple css (vide https://css-tricks.com/snippets/css/clear-fix/):
.your-container:after {
content: "";
display: table;
clear: both;
}
If height: 100% doesn't work well for you, you can try this calc function from CSS3:
/* Firefox */
height: -moz-calc(100%);
/* WebKit */
height: -webkit-calc(100%);
/* Standard */
height: calc(100%);
You can try this either with height, or with min-height, as already said. You can with this calc functions also other calculations like:
height: -moz-calc(100% - 50px);
And this is sometimes very useful, as you might guess.
height:100% is the height of the content that flows with your container at hand and is not taking into account your floated content, so that is why the height of your container is stopping short. Remove it and clear your container properly to clear your floated elements within and it will work:
#static-content:before, #static-content:aftr {
display:table;
content:"";
}
#static-content:after {
clear:both;
}
#static-content {
zoom:1; /*ie fix*/
}
You have a float in static-maincontent, which removes it from the regular flow of the content of the document, and hence static-content doesn't care about its height any more, and so won't expand to cover it.
Additionally, remove height:100% for static-content.
READ FOR ANSWER!!!-- Okay so I had the same problem, All that was needed was to remove the "Positioning" Style. Should work perfectly fine.
Here's a question that's been haunting me for a year now. The root question is how do I set the size of an element relative to its parent so that it is inset by N pixels from every edge? Setting the width would be nice, but you don't know the width of the parent, and you want the elements to resize with the window. (You don't want to use percents because you need a specific number of pixels.)
Edit
I also need to prevent the content (or lack of content) from stretching or shrinking both elements. First answer I got was to use padding on the parent, which would work great. I want the parent to be exactly 25% wide, and exactly the same height as the browser client area, without the child being able to push it and get a scroll bar.
/Edit
I tried solving this problem using {top:Npx;left:Npx;bottom:Npx;right:Npx;} but it only works in certain browsers.
I could potentially write some javascript with jquery to fix all elements with every page resize, but I'm not real happy with that solution. (What if I want the top offset by 10px but the bottom only 5px? It gets complicated.)
What I'd like to know is either how to solve this in a cross-browser way, or some list of browsers which allow the easy CSS solution. Maybe someone out there has a trick that makes this easy.
The The CSS Box model might provide insight for you, but my guess is that you're not going to achieve pixel-perfect layout with CSS alone.
If I understand correctly, you want the parent to be 25% wide and exactly the height of the browser display area. Then you want the child to be 25% - 2n pixels wide and 100%-2n pixels in height with n pixels surrounding the child. No current CSS specification includes support these types of calculations (although IE5, IE6, and IE7 have non-standard support for CSS expressions and IE8 is dropping support for CSS expressions in IE8-standards mode).
You can force the parent to 100% of the browser area and 25% wide, but you cannot stretch the child's height to pixel perfection with this...
<style type="text/css">
html { height: 100%; }
body { font: normal 11px verdana; height: 100%; }
#one { background-color:gray; float:left; height:100%; padding:5px; width:25%; }
#two { height: 100%; background-color:pink;}
</style>
</head>
<body>
<div id="one">
<div id="two">
<p>content ... content ... content</p>
</div>
</div>
...but a horizontal scrollbar will appear. Also, if the content is squeezed, the parent background will not extend past 100%. This is perhaps the padding example you presented in the question itself.
You can achieve the illusion that you're seeking through images and additional divs, but CSS alone, I don't believe, can achieve pixel perfection with that height requirement in place.
If you are only concerned with horizontal spacing, then you can make all child block elements within a parent block element "inset" by a certain amount by giving the parent element padding. You can make a single child block element within a parent block element "inset" by giving the element margins. If you use the latter approach, you may need to set a border or slight padding on the parent element to prevent margin collapsing.
If you are concerned with vertical spacing as well, then you need to use positioning. The parent element needs to be positioned; if you don't want to move it anywhere, then use position: relative and don't bother setting top or left; it will remain where it is. Then you use absolute positioning on the child element, and set top, right, bottom and left relative to the edges of the parent element.
For example:
#outer {
width: 10em;
height: 10em;
background: red;
position: relative;
}
#inner {
background: white;
position: absolute;
top: 1em;
left: 1em;
right: 1em;
bottom: 1em;
}
If you want to avoid content from expanding the width of an element, then you should use the overflow property, for example, overflow: auto.
Simply apply some padding to the parent element, and no width on the child element. Assuming they're both display:block, that should work fine.
Or go the other way around: set the margin of the child-element.
Floatutorial is a great resource for stuff like this.
Try this:
.parent {padding:Npx; display:block;}
.child {width:100%; display:block;}
It should have an Npx space on all sides, stretching to fill the parent element.
EDIT:
Of course, on the parent, you could also use
{padding-top:Mpx; padding-bottom:Npx; padding-right:Xpx; padding-left:Ypx;}