I try to make a div expand in height, but it's expanding over the absolute positionned sticky footer at the bottom, here is a demo:
http://jsfiddle.net/UMLKf/1/
(I don't need to support old browsers)
Your margin-bottom: 200px rule will only affect subsequent elements in the document flow. It will not make your div 200px smaller than the browser window. To demonstrate I've set up a jsFiddle here.
If you want the bottom of your div to be 200px from the bottom of the browser window, you could absolutely position it with top: 0 and bottom: 200px. JsFiddle here.
Try this on your main div:
#content { position: absolute; top: 0; left: 0; right: 0; bottom: 200px; }
and footer:
#footer { position: absolute; bottom: 0; height: 200px; }
This could probably work with position: relative as well.
EDIT:
Here's a demo: http://jsfiddle.net/adaz/nQVPm/
I'm pretty sure this works on IE7+
Related
Here what I have when I use this css code :
.circleImage {
position: absolute;
width: 40%;
left: 300px;
top: 570px;
}
And the result that I wish is here :
I try fixed and sticky in postion type, i dont exceed my screen but fixed or sticky does not correspond with my result
Thanks for the people who take time to help me
Just use responsive units to position the image.
.circleImage {
position: absolute;
width: 40%;
left: 30%;
top: 30vh;
}
<img class="circleImage" src="https://www.pikpng.com/pngl/b/390-3904056_round-profile-round-profile-clipart.png">
You're using fixed value like 300px which pushed the image outside the parent because the parent width is not that much wider. So use % like the answer above.
If you want to center it:
You can use this method to center any child with sticky/fixed/absolute container. Set the left and right value to 0. Then add margin-left and margin-right to auto. This will center the child regardless the parent width.
.circleImage {
position: absolute;
width: 40%;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTRn0sYfGooUSN-KGwa4xg2JbzdSB_wCC6_aA&usqp=CAU" class="circleImage">
How can I make a div cover the whole width of the page, but not altering the content inside? I already tried
#maindiv{
margin-right:-100px;
margin-left:-100px;
}
What you're looking for is to make use of position: fixed, while also setting a value of 0 for the top, left, right and bottom properties:
#full {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: cyan;
}
<div id="full">Text</div>
Hope this helps! :)
I have issues with understanding the div position (relative, absolute, fixed) properties. I basically have an absolute div centered. Inside the div it should be possible to scroll vertically and horizontally. Inside this div should be a fixed header with a width larger than to screen (overflow) and a content div which has an overflow vertically and horizontally as well.
html,
body {
height: 100%;
width: 100%;
background: #fff;
margin: 0px auto;
padding: 0px auto;
position: fixed;
}
.container {
width: calc(100% - 20px);
height: calc(100% - 20px);
top: 10px;
left: 10px;
background: #2924aa;
overflow: scroll;
display: flex;
position: absolute;
z-index: 20;
}
.container-header {
width: calc(100%);
height: calc(10%);
background: #2924aa;
overflow: visible;
z-index: 10;
position: fixed;
background: red;
}
.container-body {
width: calc(110%);
height: calc(110%);
background: #2924aa;
overflow: auto;
position: absolute;
background: green;
}
<div class="container">
<div class="container-header"></div>
<div class="container-body"></div>
</div>
Here is my plunker:
https://plnkr.co/edit/wCWvHPcuYmVMql5HulHy
So i think the main question you have is in regards to the Position Attribute in CSS3. Below is a brief summary of each possible value.
CSS Positioning
The CSS positioning attribute of position has four different values.
Static - Static is the default value for position. It keeps the element on the page in its place, and it scrolls up the page as you scroll.
Relative - Relative positioning is pretty much as the same as static; however, you can use the left, right, top, and bottom attributes to alter the placement of the element relative to its original position.
Fixed - A fixed element's position is in relation to the viewport (i.e. the browser) therefore, an element with a fixed position does not scroll with the page, because when you scroll the viewport does not change. However, if you resize the browser, the element will change position.
Absolute - A element with an absolute position, is positioned relative to its parent element (i.e. the element that contains it).
A good resource for more information, including some diagrams can be found here.
How to make a div to always appear at the top of a web page even when the paged is scrolled vertically.
Use CSS position: fixed;:
#topdiv {
position: fixed;
top: 0;
}
See jsFiddle example: http://jsfiddle.net/CXACT/1/
div#myDiv {position: fixed; top: 0px; ...}
Css :
#topdiv {
position: fixed;
top: 0;
}
You can also make with JQuery,
Just always take the scrolltop value and change the div top.
$("#topdiv").css("top", scrolltop);
I'm an iPhone Developer mainly, I'm a bit rubbish at CSS and I'm trying to make a webpage for my app.
I want to make my footer have the following properties:
Fixed width of 640px
Centered
Attached to bottom of screen, not page. So when the user resizes the window, the footer is always at the bottom
All the other styling I can do myself, it's just positional styling that I find really difficult.
Can someone please explain to me how to do this in just CSS.
footer {
width: 640px;
margin: 0% -320px;
position: fixed;
left: 50%;
bottom: 0%;
}
Example: http://jsbin.com/imisig/3
Example with heaps of text: http://jsbin.com/imisig/4
Put the footer HTML into a <div id="footer">. And the CSS would be something like this:
#footer {
width: 640px;
position: fixed;
bottom: 0px;
left: 50%;
margin-left: -320px;
}
Explanation
The width property sets the width to 640px
position: fixed will make it so it scrolls with the page
bottom: 0px makes it fixed on the bottom of the page (distance to bottom = 0px)
left: 50% puts the left side of the div to the center of the page
margin-left: -320px - now we have to move it 320px from the left to make it centered
.footer{
width:100%;
position: fixed;
bottom: 0%;
}
position: fixed will make it so it scrolls with the page
bottom: 0px makes it fixed on the bottom of the page (distance to bottom = 0px)
The width property sets the width to 100%