I asked this question before and got pointed towards this link, which I followed and implemented the technique in my page:
Notice the announcement div and div next to it. I want the announcement div to be of the same height as it's counterpart.
What am i missing?
change the height of both divs to be the same
<div class="announcement" style="position: relative; width: 728px; height: 200px;"> <!--This is the containing div position: relative to flow in sequence with the rest of the page.-->
<div class="announcement" style="position: relative; width: 728px; height: 200px;">
<div style="position: absolute; top: 70px; left: 255px; width: 240px; background-color: azure;">
position: absolute; top: 70px; left: 255px; width: 240px; background-color: azure; overall width 248px including 2*3px padding and 2*1px border; (no height)
</div>
for example will fix the height of this div no matter if there is one line in the div or 5 lines or whatever this height will remain the same.
PK
You didn't, so far as I can tell, attempt (or implement) the faux-columns technique you linked to in your question, however because there's no way of forcing, with css, two siblings to maintain the same height without explicitly defining a height, and since you're already using jQuery, I've come up with this cludgy and not-really-portable approach:
$('#container1 > div').each(
function(){
if ($(this).height() > $(this).next().height()){
$(this).next().css('height',$(this).height());
}
else {
$(this).css('height',$(this).next().height());
}
});
It's over at JS Bin for your perusal.
Related
I'm using Vue.js & vuetify to make a SPA.
I have a component that has a background image onto which I'm overlaying a grid. The image adjusts its aspect ratio when I change the width of the page. I want the same behavior on the grid.
I generated the grid using divtable.com/generate. It just gave me a 12x12 table of divs and some css selectors for them. I wanted to have precise control of how I overlay the forms on top of this so decided to go this route.
I'm having trouble adjusting height of the div table cells. The width adjusts just fine and stays aligned, but the height of the cells is constant no matter what. I'm also bit of a css noob. I don't know if vuetify or vue is doing some overriding of the css in the background.
I tried a lot of things. Just setting the height property doesn't work for some reason. I tried to use "scoped" on the style in case something is being overridden. For some reason the height of the cell won't change no matter what. Any help is appreciated. j
A verbatim example of the code can be found here: http://divtable.com/generator/
The only difference is I have the following selectors before the table of divs:
img {
width: 100%;
}
.image-container {
position: relative;
width: 100%;
height: 100%;
}
.image-container .after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Thank you. Wouldn't ask if I wasn't in a bit of a rush to figure this out by tomorrow. Any help is appreciated.
Note: I tried setting a min height. Making it scoped and all sorts of other stuff I found.
I decided for the sake of time just to not use an grid overlay at all and just adjust the components over the image using relative positions. There was no real advantage to using a grid overlay in this case.
From a technical standpoint, I wasn't able to find the exact problem, but it likely wasn't any framework magic, just lack of time in finding the correct CSS selector to adjust.
Thanks for any help. Much appreciated.
img {
width: 100%;
}
.image-container {
position: relative;
width: 95%;
height: 100%;
margin-top: 10px;
margin-bottom: 10px;
margin-right: 10px;
margin-left: 10px;
}
.image-container .after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
min-height: 100px;
}
#loadControlDevices {
position: relative;
margin-top: 10.5%;
margin-left: 1.15%;
}
<div class="image-container" >
<div style="height: 100%;">
<img src="scope.ami.png" />
</div>
<div class="after">
<div id="loadControlDevices">
<v-checkbox id="loadControlCB" name="loadControlCB" label="" filled></v-checkbox>
</div>
... other divs following this ...
</div>
</div>
I want to know how to position multiple div's on each other, without position absolute in HTML.
I tried with position: absolute but due to this, I have to specify container div height explicitly, which I don't want to do.
How do you want to place them exactly ?
If they are div, they should be on top of each other with position: static by defaults. If you don't want to use position: absolute, you could use negative margins. This is not a recommended solution, but the hack definitely works.
.d1 {
background-color: red;
height: 200px;
width: 150px;
}
.d2 {
background-color: blue;
height: 150px;
width: 100px;
margin-top: -100px;
}
<div class="d1"></div>
<div class="d2"></div>
Note that you can use % margins if needed but the % margin properties will always be a percentage of the parent block WIDTH. So be careful with that.
NB : Tanks to #Oriol for correcting mistakes I made. I edited my answer thanks to his advice.
Not sure what you're trying to achieve but I can imagine only one scenario, where something like that would be usefull. Namely switching between several divs. If that's the case use display:none on all but the current div.
In anyway child div is by default "overlapping" with parent div, so I assume what you mean is that you want siblings to be "on each other"... however that sounds.
The only way to do this is (except for negative margin hacks) absolute and relative positioning.
Here's how:
#foo{
background-color:red;
height: 50px;
width: 50px;
position: relative;
}
#bar{
background-color:blue;
height: 50px;
width: 50px;
position: absolute;
}
#foobar{
background-color: green;
height: 50px;
width: 50px;
position: absolute;
}
#raboof{
background-color: yellow;
height: 50px;
width: 50px;
}
<div id="foo">
<div id="bar"></div>
<div id="foobar"></div>
<div id="raboof"></div>
</div>
Jsfiddle: https://jsfiddle.net/t81hvsa1/
Keep in mind that: 1. You may but don't need to make last child absolutely positioned. 2. The last absolutely positioned child will always be on top.
Edit: I've just noticed, this question's discussion has all the answers you could possibly want; more elaborate and better formatted at that.
I have the following code:
<div style="position: absolute; width: 100%; height: 100%; background-color: #00FF00">
<div style="position: relative; left: 300px; top: 45px; height: 100%; width: 100%; background-color: #FF0000;"></div>
</div>
Screenshot:
Why does the div gets pushed outside of the viewing area and hence showing the scrollbars. If you check toward the top right corner, the black area is the extension when the red div moved.
How can I edit it so the red div has the top and the left position but doesn't extend beyond the page width and height?
To actually answer the "why" of the question:
The reason you're getting scroll bars is that the relative positioned div inside of the absolute is set to 100% width and height, but ALSO is displaced (in this case, by top and left)
It is therefor assuming 100% width/height of the parent container AND displacing it, causing it to be too large.
By adding overflow:hidden, you seemingly solve this issue, but any content past that will be clipped, not actually fitting inside the dimensions you have set.
Another way to do this would be something like...
top: 10%;
left: 10%;
width:90%;
height:90%;
You could just as easily substitute top and left for padding/margin of that direction.
You can use CSS3's calc() function to set the second div's height and width to be the same as the first one's, minus the left and top offsets. This will also allow you to use position: absolute in your text, aligning it to the right:
<div style="position: absolute; width: 100%; height: 100%; background-color: #00FF00">
<div style="position: relative; left: 300px; top: 45px; height: calc(100% - 45px); width: calc(100% - 300px); background-color: #FF0000;">
<span style="position: absolute; right: 0; top: 50%;">TESTING THIS OUT</span>
</div>
</div>
Check the working JSFiddle. I also added a CSS reset to get rid of the body margins that the browser might add. If you want to use this reset in your HTML file, create a <style> tag inside your <head> tag, with the code that is showing in the CSS section in the JSFiddle. If you don't want to use the entire reset, the only actually relevant part is body { margin: 0px; }, so you can also add style="margin: 0px;" to your body tag.
How we can add a div tag over a slideshow like in the following link
http://www.hellofresh.com/
Here the div with title "DISCOVER THE JOY OF COOKING " is placed over a slideshow.
How might I do this?
First of all, welcome to Stackoverflow (oops; this isn't your first question!). The key to placing your div over the slideshow (or over any other element) is using absolute positioning. Absolute positioning enables you to specify the exact position for an element instead of leaving it with the flow of the document. If you take a look at your example website's CSS, you can see that the div that has "Discover the joy of cooking" is styled basically like this:
position: absolute;
top: 0px;
left: 0px;
top and left act somehow like x and y in a 2-dimensional grid system, except that the origin is placed differently. top: 0px; pulls the div up and left: 0px; pulls the div left, so all-in-all, it's placed on the upper-left corner.
To achieve the effect of the translucent black, you use the opacity property. opacity: 0.5; means that the div is half-opaque, while opacity: 0; means it's not visible at all. Your favorite value might be something like opacity: 0.7; -- anything in the range 0...1.
The last piece here is to tell the browser that the div should be over the slideshow, not behind it. To do that, use the z-index property. z-index specifies the relative "stack order" of elements. So if you want your div to be over the slideshow, style it with z-index: 5; while styling the slideshow with z-index: 1;, for instance.
Hope that helped at all!
Ok, you can do something like this ( http://jsfiddle.net/YgpqX/ ):
<div class="div1"></div>
<div class="div2"></div>
.div1 {
width: 320px;
height: 200px;
background: #aa5;
}
.div2 {
width: 100px;
height: 100px;
margin-top: -200px;
background: #5aa;
}
Or ( http://jsfiddle.net/YgpqX/1/ )
<div class="div1"></div>
<div class="div2"></div>
.div1 {
position: relative;
width: 320px;
height: 200px;
background: #aa5;
}
.div2 {
position: relative;
width: 100px;
height: 100px;
top: -200px;
background: #5aa;
}
And if your block in html should be earlier then slider block, then use z-index: 9999; to get it up.
And also abolute position:
<div class="div1">
<div class="div2"></div>
</div>
.div1 {
position: relative;
width: 320px;
height: 200px;
background: #aa5;
}
.div2 {
position: absolute;
width: 100px;
height: 100px;
background: #5aa;
}
By setting the opacity property in CSS
This is some basic info on this one W3schools Css opaque
They are accomplishing this effect using CSS Positioning. Basically they are absolutely positioning the discover the joy of cooking block over the slide show. You can use z-index on the absolute position div to bring it over the relative position (slideshow) div. Basically you need to use a combination of position and z-index. I have a basic example of the CSS/HTML here: http://jsfiddle.net/jqVAe/1/
HTML:
<div id="slideshow">
Scrolling sideshow goes here. Scrolling sideshow goes here. Scrolling sideshow goes here. Scrolling sideshow goes here. Scrolling sideshow goes here. Scrolling sideshow goes here.Scrolling sideshow goes here.
<div id="over-slideshow"></div>
</div>
CSS:
#slideshow{
width: 400px;
height: 200px;
position: relative;
background: green;
}
#over-slideshow{
position: absolute;
top: 10px;
left: 10px;
width: 100px;
height: 100px;
background: red;
}
This provides a basic structure in which to put your slideshow. I would recommend finding a good slide show plugin and not trying to reinvent that functionality. I'm sure there are plenty of Jquery (Javascript Framework) plugins that will accomplish this task for you.
You may try position: absolute and z-index. z index is used to align a layer over or under a layer. You may go through;
Lesson 15: Layer on layer with z-index (Layers), Understanding CSS z-index, and A Detailed Look at the z-index CSS Property
Exactly as the title says, I have an element that dynamically resizes itself to fit the content. I would like this element to be positioned proportionally to its size (so it stays centered on a fixed point). The problem I'm facing is that the parent element I'm using to position the child element is not inheriting the calculated size of the child element. I don't know if there's any CSS tricks to make the parent element get it's child's height without having to specify it using javascript.
The following fiddle demonstrates the problem, with the issue being displayed on the left and the desired final product on the right (minus the ability to do it dynamically).
http://jsfiddle.net/YEcx6/
The html:
<div class="parent">
<div class="child">This content is dynamic</div>
</div>
<div id="static" class="parent">
<div class="child">This content is static</div>
</div>
and the CSS:
.child {
position: relative;
right: -50%;
top: -50%;
}
.parent {
position: absolute;
top: 50px;
left: 10px;
background: #ddd;
}
#static {
left: 100px;
height: 54px;
}
.child {
background: red;
max-width: 50px;
}
== EDIT ==
I now know there is no way to do any relational positioning with regard to height without using javascript.
What about height:auto and width:auto on the parent ?
The problem is in order to get the vertical positioning to work right, you need to have a defined height to reference by. Since you want a dynamic height, it makes it challenging. I tried using negative margin-top instead of top but that, as I suspected, defaults to using the width of the element to determine the height offset (which does not achieve your effect). I found a solution that might work for you if you can compromise by setting the position of the upper left corner of the .child rather than the upper left corner of the .parent. Here is the solution, with the explanation following (this was only tested in FF).
HTML
<div class="parent">
<div class="child">This content is dynamic
<div class="bkg"></div>
</div>
</div>
CSS
.parent {
position: absolute;
top: 50px;
left: 10px;
}
.child {
position: relative;
}
.bkg{
position: absolute;
width: 100%;
height: 100%;
top: 50%;
bottom: -50%
left: -50%;
right: 50%;
background-color: #ddd;
z-index: -1;
}
The .parent now is supposed to be the final position of the upper left of where .child will be. The .child contains the content you want but gives a relative position by which .bkg will be related. By giving .bkg a width and height of 100%, that set's its size, which apparent is enough to correctly then calculate the correct 50% offsets to reposition it down and to the left (which is the same relationship you wanted for your original look).