Size of div depending on size of another div - javascript

I got a div which contains 2 other divs. They are vertically aligned. Now, the lower div is changing its size via javascript. What I want now is that the upper div is changing its size depending on the other divs size. Is there a way to do this with css style only, without using js?
UPDATE: The outer div has a fixed size.
<div>
<div> childdiv 1</div>
<div> childdiv 2</div>
</div>
UPDATE: Ok I didnt make this clear enough, the lower box is changing its height in top direction. And the upper div should then decrease its height.

You could use display:table and display:table-row to change the height of the upper div accordingly, so that the total height matches the fixed height of the container:
#outer{
display:table;
height:200px;
width:200px;
}
#inner1{
background-color:red;
display:table-row;
}
#inner2{
background-color:green;
display:table-row;
height:30px;
}
You'll find an example here: http://jsfiddle.net/bRg6m/
Is this what you want?
Added: Note that this doesn't work in IE7 or older. You'll have to use a Javascript solution if you want to support those browsers.

I'm not sure I understand your question.
I made an example here where the upper div is changing its width depending on the lower divs size. Is that what you needed?
http://jsfiddle.net/8fwXR/
HTML
<div id="wrapper">
<div id="box1"></div>
<div id="box2"></div>
</div>
CSS
#wrapper {
float: left;
}
#box1 {
background: red;
height: 100px;
width: 100%;
}
#box2 {
background: green;
height: 100px;
width: 400px;
}

Possibly this is what I meant:
document.getElementById("upperDiv").style.width = document.getElementById("bottomDiv").style.width

Really depends on your setup. The easiest way by far would be to just apply the javascript code to both DIVs at the same time.
Setting the width of the first DIV to be 100% should cause it to resize the width to match the second DIV (as the resize will force the parent DIV to increase in width too), but you will have a problem when trying to get the height to match, as with pure CSS the first DIV will have no reference to recalculate its own height to match.
Example Here
Alternatively, instead of making the second DIV resize you could resize the parent DIV and have both children set with CSS as follows:
width:100%;
height:50%;

Related

HTML - CSS - How to left-align images in a centered and resizable parent

I have a lot of thumbnails in my page: I want them to be centered, but the last line looks awful while resizing and I have something like one or two orphan images floating in the center of the page.
The last line should be left-aligned.
How to do it?
I tried to insert another div with "margin:0 auto 0 auto;" but it doesn't work.
https://jsfiddle.net/4hw4fkm9/
What I try to have:
<div style="text-align:center;">
<img />
<img />
<img />
<img />
etc..
</div>
You should use CSS for this, not the HTML attribute "align", which is pretty old school. You can either float the images left, in which case they will stack to the left, or you could set all the images to display: inline-block, then use text-align: center on their container element (the div in this case).
Here are some references:
http://www.w3schools.com/css/css_float.asp
http://www.w3schools.com/cssref/pr_class_display.asp
I'm not sure if this is what you're looking for - as you mention that you both 'want them centered' but want them left-aligned, too.
What you can do is create another div that will act as a container, set width: 100% on the main div, set the width slightly lower on the container div and set margin: 0 auto; on the container. Then make the images relatively positioned with left:0;.
See Updated Fiddle Here. Is this what you're after?
EDIT: Re-Updated Fiddle for my attached comment. You can use set pixel values on the main and container div to account for the set pixel width of the thumbnails + any spacing that occurs.
Using the selectors in the fiddle.
.center {
text-align:center;
background-color:red;
margin:0 auto;
padding:0 20px;
}
.center:after{
content:'';
display:table;
clear:both;
}
img {
width: 100px;
height: 100px;
float:left;
}
From there the .center element would need a width of some multiple of 100px to include a fixed number of imgs. I added padding to make it look closer to the picture you provided.

fixed div overlaps scrollbar

I have problem with fixed div placed in other div with scrollbar. It overlaps scrollbar. it happend under safari and ie 11. When i set z- index to lower than divs with scrollbar than fixed div is under it and it losses interaction (you cant click links etc).Also i tried to make fake fixed position setting it to absolute and with javaScript set "left" to "scrollLeft" div with scrollbar but i cant use this solution because it gives strange effects under Safari and IE10.
Here is code:
HTML
<div id="cont">
<div class="spacer s2"></div>
<div id="target" class="box2 blue">
dsfsdf
</div>
</div>
CSS
#cont {
width:100%;
height:800px;
overflow:hidden;
overflow-x: scroll;
z-index:0
}
#target {
width:200px;
height:800px;
position:fixed;
overflow:hidden;
background-color:red;
z-index:0
}
.spacer {
width:3000px;
height:1px;
z-index:-1
}
And link to jsFiddle.
Please help me ive tried to find solution over 3 days
Thanks in advance
change Position from fixed to absolute
<div id="target" class="box2 blue" style="width: 200px; height: 800px; position: absolute; overflow: hidden; background-color: red; z-index:0">
dsfsdf
</div>
Its just because of your this line
<div id="cont" style="width:100%;height:800px;overflow:hidden;overflow-x: scroll;z-index:0">
Remove overflow from your style and it will work
It should be looks like
<div id="cont" style="width:100%;height:800px;z-index:0">
Demo
[Updated]
Please check new Demo
This is the right behavior. It happens in chrome too.
Why ?
position:fixed should be relative only to the viewport. When you set it on an element, that elemenet is taken out of the flow of any parent and overlapped according to the z-index.
This needs to be treated case by case for correct behavior in my opinion.
Also, maybe this fits your use-case:
<div style="display:inline-block;position:fixed; max-height:100px;overflow:hidden;">
<div id="target" class="box2 blue" style="width:200px;height:800px;overflow:hidden;background-color:red;z-index:0;">
dsfsdf
</div>
</div>
It wraps the fixed div in another one that has display:inline-block to enlarge to the size of the content and a max-height so it will not go over a fixed size.
If you need it to be contained by another div than you can simulate this. You can set position fixed when the fixed div should be visible and change to position absolute when the bottom of the fixed div hits the top of the scrollbar.
Edit:
You can set an elements height using top and bottom so you could probably do something like this and you calculate the bottom with javascript. The bottom would become the scrollbar height + padding.
Another way would be to calculate the height of the fixed div to be calculated like this:
var sizeUntillBottomScrollbar = containingDivHeight - containingDivScrollTop;
if(sizeUntillBottomScrollbar <= scrollBarHeight)
fixedDivHeight = windowHeight - scrollBarHeight - sizeUntillBottomScrollbar;
else
fixedDivHeight = windowHeight;
The scrollbar height can be calculated (there are other answers on that) and the above code is pseudocode so don't expect it to run as-is.
There is also another way if you need it to be 100% all the time. But is quite complicated.
You have to make your custom scrollbar functionality (or use a plugin, there are quite a lot) and set on the custom scrollbar a higher z-index than the fixed div and also set position:fixed on the custom scrollbar too when the scrollTop of the containing div is equal to its height - the custom scrollbar height.

Overlaying one div over another, but not knowing the size of the div

I'm trying to lay one div over another. This is really simple if you know the dimensions of the div.
Solved here:
How to overlay one div over another div
So, here is my HTML:
<div class="container">
<div class="overlay"></div>
<div class="content"></div>
</div>
In my case, I don't know the exact dimensions of the "content" or "container" div. This is because I don't have control over any of the content in the div (we are making our app extensible for 3rd party developers).
See my example on jsFiddle
The overlay should cover the content entirely. Width 100% and Height 100%. However, this does not work because in my example I positioned the overlay absolutely.
One solution is to use JavaScript to get the size of the content div and then set the size of the overlay. I don't like this solution much since if image sizes are not specified, you need to wait until images are loaded and recalculate the size of the div.
Is there any way of solving this problem in CSS?
You could set the position to absolute and then set all 4 positioning values to 0px which will make the box expand. See a demo here: http://jsfiddle.net/6g6dy/
This way you dont have to worry about recalculating things if you want padding on the overlay or the container (like you would if you used actual height and width values), because its always going to be adjusted to the outer dimensions of the box.
It's not possible to do this because:
The overlay is not contained by anything to restrict it's size (since there is no height/width applied to the container).
The size of the content div can change as content loads (since it has no fixed width/height).
I solved this by using JavaScript*. Eg.
function resizeOverlay() {
$('.overlay').css({
width: $('.content').width()
height: $('.content').height()
});
}
$('.content').find('img').on('load', resizeOverlay);
*Code not tested.
Hey are you looking like this : http://tinkerbin.com/Vc4RkGgQ
CSS
.container {
position:relative;
background:blue;
color:white;
}
.content {
position:absolute;
top:0;
left:15px;
background:red;
color:yellow;
}
I do not know what you are exactly trying to do but this might work:
container must be relative: anything from static
overlay and content are absolute :move top/left in first non static parent; no flow.
Give same top/left to be on top and higher z-index for upper element.
See this demo: http://jsfiddle.net/rathoreahsan/kEsbx/
Are you trying to do as mentioned in above Demo?
CSS:
#container {
position: relative;
}
.overlay,
.content{
display:block;
position: absolute;
top: 0;
left: 0;
}
.overlay{
z-index: 10;
background: #ccc;
}
You can indeed do this without JavaScript. Your problem is that #container element has 100% width relative to the whole page. To fix this you can:
a) position it absolutely,
#container {
position: absolute;
}
b) make it float or
#container {
float: left;
}
c) make it display as table cell
#container {
display: table-cell;
}
One of the above is enough, you don't need to apply all. Also you should not position .content absolutely as this will prevent #container to have the same width/height.
If you are worried about images loading after the height is set you can go ahead and set the dimensions of the image in the containing div and use the padding-bottom hack. This way when the browsers paints over the page it knows how big the image will be before it loads.

Reverse HTML Layout

I will try to keep this as short and specific as I can.
This is what I need to display:
-----------------------------------------
#div1
-----------------------------------------
-----------------------------------------
#div2
-----------------------------------------
This is how I need the HTML structure to be:
<div id="div2">...</div>
<div id="div1">...</div>
The reason I need the second div to be higher in the HTML structure is because when the page is printed in Firefox, I have to use fixed position for an image that is contained in "div2". If "div2" isn't at the top of the structure, the image will be printed on the second page, and therefore cannot be moved to the first page using fixed position (as far as I know).
I cannot for the life of me think how I can do this with CSS2 (maybe CSS3?). I also looked into "Any Order Column" but I don't think that will work since I'm dealing with rows, not columns.
Any help would be appreciated :)
Edit: #div2 cannot be positioned absolutely because #div1 needs to be able to collapse, and therefore #div2 needs to follow.
For this you can use css3 display:box property for this. Write like this:
.outer{
-moz-box-direction: reverse;
-moz-box-orient: vertical;
display: -moz-box;
}
Check this http://jsfiddle.net/phSfD/2/
You can do it like this.
HTML:
​<div class="outer">
<div class="a"> [div a] </div>
<div class="b"> [div b] </div>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
CSS:
.outer { position:relative; }
.a { position:absolute; top:100%; }
​Test it out: http://jsfiddle.net/phSfD/1/
The benefit of this approach is you don't need to know the sizes of either element for it to work.
This works because the height of the outer element is determined by the height of its contents. Since div A is absolutely positioned, it doesn't affect the height of its container, so the container's height is the same as div B's height. Setting A's top to 100% (of the container's height) means it will appear just below the container (and therefore just below div B).
One way to solve this is to set absolute positioning of the two divs. You'll need to have a parent with relative position and then set the absolute position of the two divs: div1 above the div2.
When you do so, remember to indicate in the <style> tag that these styles only apply to the on-screen rendering and provide a separate set of styles for printing, so that on print div would would appear below div2.
When you set position: fixed on an element, it is positioned relative to the browser window, irrespective of its container.
So, this
#div1 img{ position: fixed }
and this
#div2 img{ position: fixed }
will render the same result. You can write them in any order.
You can use display: table-*-group properties for vertical reordering of blocks of arbitrary height (dynamically resized in particular):
<style>
#example {display: table; width: 100%; }
/* Will display at the bottom of pseudo-table */
#block-1 {display: table-footer-group; }
/* Will display in the middle */
#block-2 {display: table-row-group; }
/* Will display at the top */
#block-3 {display: table-header-group; }
</style>
<div id="example">
<div id="block-1">First</div>
<div id="block-2">Second</div>
<div id="block-3">Third</div>
</div>
Works in all browsers including IE8+ (there is a small limitation in IE8).
For IE6/7 (if they do matter), elements can be swapped with JavaScript.
For details, see my article.

Cross browser div center alignment using CSS

What is the easiest way to align a div whose position is relative horizontally and vertically using CSS ? The width and the height of the div is unknown, i.e. it should work for every div dimension and in all major browsers. I mean center alignment.
I thought to make the horizontal alignment using:
margin-left: auto;
margin-right: auto;
like I did here.
Is this a good cross browser solution for horizontal alignment ?
How could I do the vertical alignment ?
Horizontal centering is only possible if the element's width is known, else the browser cannot figure where to start and end.
#content {
width: 300px;
margin: 0 auto;
}
This is perfectly crossbrowser compatible.
Vertical centering is only possible if the element is positioned absolutely and has a known height. The absolute positioning would however break margin: 0 auto; so you need to approach this differently. You need to set its top and left to 50% and the margin-top and margin-left to the negative half of its width and height respectively.
Here's a copy'n'paste'n'runnable example:
<!doctype html>
<html lang="en">
<head>
<title>SO question 2935404</title>
</head>
<style>
#content {
position: absolute;
width: 300px;
height: 200px;
top: 50%;
left: 50%;
margin-left: -150px; /* Negative half of width. */
margin-top: -100px; /* Negative half of height. */
border: 1px solid #000;
}
</style>
<body>
<div id="content">
content
</div>
</body>
</html>
That said, vertical centering is usually seldom applied in real world.
If the width and height are really unknown beforehand, then you'll need to grab Javascript/jQuery to set the margin-left and margin-top values and live with the fact that client will see the div quickly be shifted during page load, which might cause a "wtf?" experience.
"Vertical centering is only possible if the element is positioned absolutely and has a known height." – This statement is not exactly correct.
You can try and use display:inline-block; and its possibility to be aligned vertically within its parent's box. This technique allows you to align element without knowing its height and width, although it requires you to know parent's height, at the least.
If your HTML is this;
<div id="container">
<div id="aligned-middle" class="inline-block">Middleman</div>
<div class="strut inline-block"> </div>
</div>
And your CSS is:
#container {
/* essential for alignment */
height:300px;
line-height:300px;
text-align:center;
/* decoration */
background:#eee;
}
#aligned-middle {
/* essential for alignment */
vertical-align:middle;
/* decoration */
background:#ccc;
/* perhaps, reapply inherited values, so your content is styled properly */
line-height:1.5;
text-align:left;
}
/* this block makes all the "magic", according to http://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align specification: "The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge." */
#container .strut {
/* parent's height */
height:300px;
}
.inline-block {
display:inline-block;
*display:inline;/* for IE < 8 */
*zoom:1;/* for IE < 8 */
}
Then #aligned-middle will be centered within #container. This is the simplest use of this technique, but it's a nice one to be familiar with.
Rules marked with "/* for IE < 8 */" should be placed in a separate stylsheet, via use of conditional comments.
You can view a working example of this here: http://jsfiddle.net/UXKcA/3/
edit: (this particular snippet tested in ie6 and ff3.6, but I use this a lot, it's pretty cross-browser. if you would need support for ff < 3, you would also need to add display:-moz-inline-stack; under display:inline-block; within .inline-block rule.)
Check this Demo jsFiddle
Set following two things
HTML align attribute value center
CSS margin-left and margin-right properties value set auto
CSS
<style type="text/css">
#setcenter{
margin-left: auto;
margin-right: auto;
// margin: 0px auto; shorthand property
}
</style>
HTML
<div align="center" id="setcenter">
This is some text!
</div>
"If the width and height are really unknown beforehand, then you'll
need to grab Javascript/jQuery to set the margin-left and margin-top
values and live with the fact that client will see the div quickly be
shifted during page load, which might cause a "wtf?" experience."
You could .hide() the div when the DOM is ready, wait for the page to load, set the div margin-left and margin-top values, and .show() the div again.
$(function(){
$("#content").hide();
)};
$(window).bind("load", function() {
$("#content").getDimSetMargins();
$("#content").show();
});

Categories