my problem is about positioning a div. i have a div with dynamic height, sometimes it is 600px and sometimes it's 300 and so on, let's call that div, div A. Now i want to put another div inside div A and want to position it always on the bottom right, let's call this div B.
I know one way with positioning div B relative and do stuff with bottom:xy but in this case it isn't working, because my div A changes dynamically it's height.
My question is, is this possible? Do i need Javascript for that?
You can do it by using absolute position
<div class="d1">
<div class="d2"></div>
</div>
.d1{
position:relative;
height:350px; width:150px;
background-color:grey
}
.d2{
position:absolute;
bottom:0; right:0;
background-color:red;
height:60px; width:80px;
}
Demo here http://jsfiddle.net/aMdrr/
You can change the d1 div height to test the effect
position:absolute;
bottom:0;
width:100%;
It's possible and i just made a simple example for you :
http://jsfiddle.net/ujf9D/
NOTE: I use a js script try to manipulate your dynamic width/height situations.
Related
I want a web page which would have an rectangle at the top of the webpage coming from the browser.
I currently have a square created by css, but I am trying to get it to be an square that should come out from the top of the page.
like this
image from the corner
I am using css with wordpress elementor to create the square
This is my css
content:"";
position:absolute;
top:0;
left:0; right:0;
z-index:-1;
height:100%;
width:100%;
background: linear-gradient(270deg, #0fffc1, #7e0fff);
background-size:200% 200%;
the result which is coming out currently is this
centered image
We need info about your HTML. I'll assume that the element you want to position is a direct child of the body element (or a pseudo element that belongs to body). In that case you can use position:absolute since an absolute positioned element looks for the nearest ancestor, if not It's positioned in the viewport.
Keep that in mind because you may need position fixed or sticky if the above don't apply.
I'm also seeing that you're using a left:0 and right:0; which means that the positioned element will take all the available space on the left and right (It's the same as saying width:100%).
There is more... You're using a width of 100% and the image that you've provided to us doesn't. Also, don't set percentages on height. You could use the vh(viewport height) unit in this case.
Finally, I've just created a fiddle that kind of represents what you're looking for.
myFiddle: https://jsfiddle.net/lucasdavidferrero/4ak6pe8j/41/
Try this:
you can change the size by changing height and width and also by changing right, you can move it right and left.
.container:before{
content:"";
position:absolute;
top:50px;
right:-50px;
z-index:-1;
height:5rem;
width:10rem;
background: linear-gradient(270deg, #0fffc1, #7e0fff);
background-size:200% 200%;
}
<div class="container"></div>
I'm trying to use a div as a divider inside of another div and it's not showing up. I figured if I set the height on the divider div to 100% it would automatically adjust to the height of the containing div, which I have set to "auto" for the height.
If I change the height of the containing div to an exact pixel amount the dividing div kicks in and works fine. The reason I want it to adjust automatically is because there will be multiple instances of the containing div with different content which will make the height vary from one to the other so just setting an exact pixel amount for all of them won't be sufficient.
Here's the CSS I created
.container{
width:600px;
height:auto;
margin:auto;
float:left;
display:block;
}
#divider{
width:4px;
height:100%;
float:left;
display:block;
}
Is my coding wrong or is there something else at play that makes this not possible? Thanks in advance for your assistance.
100% is relative to the parent. Try making it 100 vh. Codepen
#divider{
width:4px;
height:100vh;
float:left;
display:block;
}
EDIT: BEFORE YOU ANSWER, READ THIS! I can't set footer like "height: 30px;" because it has to stretch! That's why most solutions don't work!!
Okay so I have a problem. My footer sticks well to the bottom of the page if there's enough content, but when I have only a few lines of content, there's a white space under the footer. Picture:
(source: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page)
The page which I got that image from offered one solution, but it doesn't work for me. Because my footer needs to be dynamic (I don't know the height in pixels or whatsoever, the div just stretches by the amount of content placed in footer)
All of the solutions I've found need a specified height for the footer... How could I get the footer to stay at the bottom of the page?
My divs look something like this:
<div class="mobile_main">
<div class="header">
Stuff
</div>
<div class="body_main">
Stuff
</div>
<div class="footer_mobile">
Stuff
</div>
</div>
All the 3 divs inside the main divs are stretching by content (no height specified).
Does anyone have a solution?
you could give the footer an absolute position at the bottom left corner of the mobile_main container div. therefore you also should give this container a relative position.
http://jsfiddle.net/kasperfish/FQ6fG/5/
.mobile_main{
position:relative;
}
.body_main{
background:grey;
min-height:300px;
}
.footer_mobile{
width:100%;
position:absolute;
bottom:0px;
left:0px;
background:lightblue;
}
.header{
background:yellow;
}
I think you want footer always fixed in bottom of the screen. If it is here is the solution.
.footer_mobile{
width:100%;
position:fixed;
bottom:0px;
left:0px;
background:lightblue;
}
But if you want footer should stay below the main container until the container height less than window height and footer get fixed on window screen bottom when container height get larger than window screen size. For that condition we have to use the jQuery for solution.
Don't use height in footer.
#body {
padding:10px;
}
#footer {
position:absolute;
bottom:0;
width:100%;
background:#6cf;
}
Have a look at, http://thomaspalumbo.com
I have this CSS for my website's container:
.graybox {
padding: 0 30px 30px 30px;
background: #ededed;
position:absolute;
left:0;
right:0;
}
Then I have a container on top of that to center that info.
The .graybox container spreads the width of the page like I want but now my footer div is hidden, according to firebug is it actually behind? And up on the page?
Is there a fix for this?
While I'm here can anyone explain the white space on the right side of the page. It comes into effect once the page is resized smaller.
You can use the CSS z-index property to make sure your footer is in front of the content. Z-index only works when the element is positioned though. So make sure you add position:relative to your footer
#footer{
position:relative;
z-index:999;
}
Read more: http://www.w3schools.com/cssref/pr_pos_z-index.asp
EDIT
Just checked out the code of your website, and I don't understand why your graybox is positioned absolutely, this will only make things more complex. The same goes for your menu, why position it absolute, why not just add it in the right order in the HTML in the first place?
EDIT
If you want to center your content but with a background that has a 100% width then you can simply add a container div like so:
HTML
<div class="container">
<div>lorem ipsum....</div>
</div>
CSS
.container{
background:red;
}
.container div{
width:400px;
margin:0 auto;
background:yellow;
}
See JSFiddle here: http://jsfiddle.net/HxBnF/
Currently you cannot do this because you have a container which you set at 980px, don't ever do that unless you are sure you don't want anything to wrap over it, like in this case the background of a div in that container.
in the div style, just assign a z-index value greater than any other z-index such as
.divClass{
position: absolute;
z-index: 1 //if other elements are still visible chose a higher value such as 20 or even higher.
}
All,
I have a page which is suppose to take up only the available screen space in the browser.
I have a 'top bar' and a 'bottom bar', both of which are fixed positioned at the top and bottom of the page. I want to have a div which will consume (take up) the remaining of the space inbetween the two bars mentioned above.
Its crucial that the middle div is not overlapped by the top and bottom bars. Is this at all possible with CSS or do I need to make use of js.
Also, if I do go with js, considering the browser loads up the CSS first before the js code, how is the above work out using js for centre positioning?
Many thanks,
You can use relative and absolute positions. Here an example:
css
html,body,#wrapper {
height:100%;
margin:0;
padding:0;
}
#wrapper {
position:relative;
}
#top, #middle, #bottom {
position:absolute;
}
#top {
height:50px;
width:100%;
background:grey;
}
#middle {
top:50px;
bottom:50px;
width:100%;
background:black;
}
#bottom {
bottom:0;
height:50px;
width:100%;
background:grey;
}
html
<div id="wrapper">
<div id="top"></div>
<div id="middle"></div>
<div id="bottom"></div>
</div>
Demo: http://jsfiddle.net/jz4rb/4
This demo works for me in Chrome12 but YMMV depending on which browsers you need to support. For example position:fixed does not work correctly in IE6.
Use absolute positioning on the body tag. position:absolute with zero top and bottom will "stretch" body to be the same size as the browser window. Alternatively, setting height: 100% also works but I remember it works wierd for certain old browsers.
Then use absolute positioning on the center div, with enough top/bottom offsets to avoid your header and footer bars. The header bar is absolutely positioned with top and the fotter is absolutely positioned with bottom.
Note: This won't work on mobile browsers. You'll need to use JS to get the window's height and manually set the center div's height.