Set responsive div height to equal its sibling - javascript

I have two divs whose widths are controlled by percentages. I want the right div to be exactly as tall as the left div, which expands and shrinks based on the width of the image it contains and the width of the browser window.
Is there a way to accomplish this without javascript?
http://jsfiddle.net/5JU2t/

The simplest way to achieve this is to make the .right div absolutely positioned and setting top and bottom to 0.
Just remember to position the parent (.main) div relatively and remove all of the floats:
.right {
bottom:0;
position: absolute;
right:0;
top: 0;
}
.main {
position: relative;
}
Working example: http://jsfiddle.net/5JU2t/1/
Note
The reason the right column is a little longer in the example is due to the white space added under an image. Should you only be using an image in this column then you can add float: left to the image to resolve this:
Working example: http://jsfiddle.net/5JU2t/2/

I'd try wrapping it in a third div and give your two divs either height:auto or height: 100%.

Set the parent (.main) to display as table
and set the children (.right, .left) to display as table cell.

I would say funk all the extra css and use a table layout

Related

CSS/HTML - Floating DIV when I scroll issue

I have what seemed like a simple issue but cant quite figure this one out. I am using bootstrap version 3 to create my base layout. I have a footer that needed to be at the bottom of the page so i made it position: absolute; bottom: 0; and worked fine if I zoom out. When the content start getting lengthy it creates the vertical scroll bar and when scrolling the DIV floats around instead of staying at the bottom.
I tried giving the container a position: relative; but dosent seem to do anything. Would anyone have any ideas?
Heres an example of my layout, if you resize the preview section to force the vertical scroll bar you will see that when you scroll the DIV floats around instead of staying in place.
https://jsfiddle.net/DTcHh/10301/
try with fixed
.footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
js fiddle example
non-fixed, see the below:
your problem is (from what I gather) the footer is floating dependent on the content and and you want it to stay put where you call it.
.footerElement {
// base styles all styles
display: inline-block; // add this, does as you imagine
}
"Displays an element as an inline-level block container. The inside of
this block is formatted as block-level box, and the element itself is
formatted as an inline-level box" -W3schools
scrollbar, see the below:
As for the element that has a scrollbar resolving.
.elementwithScrollbar {
// base styles all styles
overflow:hidden; // or use overflow-y:hidden; or x
}
fixed, see the below:
If you want it to be fixed; adding position: fixed; and the value coordinates should all you have to do there. (ie. position:fixed; and where you want it)
"Do not leave space for the element. Instead, position it at a
specified position relative to the screen's viewport and don't move it
when scrolled. When printing, position it at that fixed position on
every page." -MDN
Using fixed only anchors it to the bottom of the screen regardless of which part of the page you are viewing. I think you want to have the footer at the bottom of the page rather than constantly sitting at the bottom of the screen.
To fix, amend your spelling mistake here:
.contrainer-fluid { <-- should be container
position: relative;
}

Scroll a page with 100% height fixed div which always on top and shouldn't cover the footer

http://jsfiddle.net/9fCfE/1/
.fixed {
width: inherit;
height: 95%;
overflow-x: hidden;
overflow-y: auto;
position: fixed;
}
footer {
width: 100%;
}
Fixed div must be always on top and shouldn't cover the footer when I scroll.
100% height or from top to footer.
How can I do it?
The simplest answer is to drop the z-index of the fixed region so that when it would otherwise cover the footer, it instead moves behind it. You'll need to make sure the footer is position: relative;.
Fiddle example
If, instead, you want the two to never intersect, you're in for a harder challenge.
The best way to do it would to be giving your fixed element a fixed height, giving your footer a fixed height, and making sure that the fixed element height + the footer height <= the screen height.
Fiddle example
Those are really your only options - you essentially have to design around it. To the best of my knowledge, there is no way to dynamically shrink the fixed element when it intersects with other elements on the page (ignoring the rest of the elements on the page is the purpose of position: fixed, after all).
I've cobbled together a quick and dirty implementation of what you asked using jQuery, offset(), scrollTop() and height()
Here's the jsfiddle example.
Is this what you wanted? If so - why? :)
I don't see any visual difference between this method, and the one where the fixed element goes under the footer.

Bottom div with horizontally sliding content

I need an div that will be always at the bottom of the page, margin 172px at the left, and 383px at the right.
This div will have some images and text and left and right buttons. When you hover the mouse at the right button, for example, the content that was "invisible", after reaching the div's width limit, will start appearing from the right, sliding the content for the left.
I tried using position:fixed; bottom:0px, but I couldn't margin the div, and the width of it doesn't change when the screen size changes...
For example, this would be exactly what I want (the black div at the bottom):
If you know any jquery plugin that does what I want or if you know how to do something like this, please help me!
If you're using position: fixed, margin can not be applied. You can specify the left and right attributes though.
position: fixed;
right: 383px;
bottom: 0;
left: 172px;
I know it's not exactly what you're asking for, but you can then set the white-space and overflow attributes on that div to make it so that it will show a horizontal scrollbar.
white-space: nowrap;
overflow: auto;
The user would use the scrollbar on the bottom to move the content of the div. Here's an example: http://jsfiddle.net/rustyjeans/5nv84/
To use jQuery set overflow: hidden and add some functions that adjust the scrollLeft of the div, then add some controls that call those functions when they're hovered. Here's an example: http://jsfiddle.net/rustyjeans/FtSGn/
This shouldn't be too hard to do. You want a containing div that has the dimensions of the viewer. Then, have a div inside that one, with position absolute and dimensions that extend beyond the viewer in width. When the arrows are hovered over use jquery to change the "left" css property of the inner div. Did that help?
EDIT:
The outer div should have "position: relative;" to insure that the inner div is positioned relative to its margins.

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.

Can the content remain centered while the screen size changes?

First, here's is my rough example: http://demindu.com/sandbox/simple.html
What I'm trying to do:
Create a content div: let's say 400px tall and 700px wide, like the example. The content box has a margin of 50px in each direction. The content div should always be centered both vertically and horizontally, regardless of screen resolution. The black background should extend from the centered content area all the way to the right side of the screen, but not to the left.
The only way I can think of possibly doing this is something using window.innerWidth & window.innerHeight in JavaScript, but I don't know enough to know if this is even possible.
The amount of blank space above and below the middle section would need to be:
window.innerHeight - height of the div (in this example: 500px [400px box with two 50px margins]) / 2
The blank space to the left of the black bar would need to be:
window.innerWidth - width of the div (in this example: 800px [700px box with two 50px margins]) / 2
My question to you is: Is this possible in JavaScript? Is this possible somehow with pure CSS?
You can do this entirely in CSS with 4-point absolute positioning. You will need two elements:
The first item spans from the right of the screen to the center where the content is positioned. This element uses absolute positioning for the top, left, and right coordinates of the element (we can leave bottom unspecified as it's taken care of by the height.)
The second item is nested in the former. This item has a fixed width to ensure the content itself remains in the specified width you've chosen. We can also set the height and padding on this object and the parent will inherit it's height. Don't use margins to simulate padding - it can cause cross browser issues when you're just trying to do some positioning tricks as we are here.
So your HTML code would look something like this:
<div id="my_centered_design">
<div id="my_centered_design_content">
<p>This is just some example text.</p>
</div>
</div>
And you're CSS would look like this:
div#my_centered_design {
background: #000;
margin-left: -400px;
margin-top: -250px;
left: 50%;
position: absolute;
right: 0;
top: 50%;
}
div#my_centered_design_content {
background: #333;
height: 400px;
/* I think you actually want padding for
the effect you're trying to accomplish */
padding: 50px;
width: 700px;
}
Essentially this is the same trick as the Joe2Tutorial except we are applying additional positioning rules to adhere the centered element to the right side of the screen.
I think this pure css solution would suit you best: http://www.joe2torials.com/view_tutorial.php?view=37
A very quick google resulted in this piece of code.
this code does not align a div in the middle. what you actually for your own website is that you put the following div css
.main {
width: 140px;background-color: #252525; float: left;margin-top: 25px; }
inside a table that is aligned to be centered. so, basically you're using the table's centering feature to center your left floated div simply as a content. you're not doing anything through div or css for that matter. the piece of css code you offered doesn't not anything about centering a div in the middle.

Categories