I'm trying to use margin on an element, but it ends up stretching the body's width. Can find the reason why.
.navbar {
width: 100%;
position: absolute;
top: 0;
left: 0;
background: $c-white;
margin: 0.5rem;
}
Related
I have 2 divs: the .container and its child .element.
The container is centered on the page, both elements have position: absolute and have vw and vh for width and height.
The difference between them is that the parent element has 25vh for height and 25vw for width, however the child element has the opposite: 25vh for the width and 25vw for height. This means that the width of one is equivalent to the height of the other.
Then, I used transform: rotate(90deg) to rotate the child div. Now they look the same.
I want to move only the child element so that it dynamically fits into the parent element. But I'm not getting it done.
I've tried to use positioning properties, transform-origin, translate and so on with percentage or vw and vh units, but nothing is working.
How to fit this div into the parent div while remaining that way on any screen size?
body {
background-color: #333;
}
.container {
background-color: #000;
position: absolute;
height: 25vh;
width: 25vw;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.element {
position: absolute;
background-color: #abc;
transform: rotate(90deg);
height: 25vw;
width: 25vh;
}
<div class="container">
<div class="element"></div>
</div>
You need to consider transform-origin and some translation too
body {
background-color: #333;
}
.container {
background-color: #000;
position: absolute;
height: 25vh;
width: 25vw;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.element {
position: absolute;
background-color: #abc;
height: 25vw;
width: 25vh;
transform: translateY(-100%) rotate(90deg);
transform-origin: bottom left;
}
<div class="container">
<div class="element"></div>
</div>
I am confused by the size of the margins in this example on chrome (v 56.0.2924.87 as of posting)
<div class='a'><div class='b'></div></div>
Here is the simple css:
.a {
position: absolute;
width: 100px;
height: 400px;
background-color: red;
overflow-y: scroll;
}
.b {
position: absolute;
top: 0;
left: 0;
height: 4000px;
width: 100%;
background-color: pink;
transform-origin: 50% 0%;
transform: scale( 0.25 );
margin-top: 20px;
margin-bottom: 20px;
}
http://codepen.io/jedierikb/pen/EZRZbx?editors=1100
Some questions:
Why is the top margin different from the bottom margin? The top margin takes up 20px while the bottom just a few pixels.
Why isn't the top margin scaled? I expected the margin value of 20px to be scaled just like the content.
What value would I used for the bottom margin to make it the same as the top margin?
I have a wrapper div which i want to expand to wrap the content that is dynamically generated. The content generated is a table, that increases based on the number of returned results.
css for wrapper div
#wrapperDiv {
position: absolute;
width: 100%;
height:1341px;
left: 0px;
border: 5px solid #408080;
overflow:hidden;
}
css for table inside the wrapper div
#Table {
position: absolute;
width: 940px;
height: 319px;
left: 409px;
top: 215px;
}
it doesn't show all the results, when i change overflow to visible it shows all but the results goes beyond the wrapper div, and i still want the footer div to always be at the bottom.
You have a couple of little problems here :)
First: You have set your height to a fixed value "1341px". Because you have set it to this value your div will never get higher than 1341px. You can use min-height if you want the div to only scale when the content gets bigger than 1341px.
Second: Your #Table is positioned Absolute. Wich means that the parent will always ignore the size of the #Table element when rendering.
i suggest you have a quick look at http://www.w3schools.com/css/css_positioning.asp for some more information on this toppic.
Try the following css:
#wrapperDiv {
position: absolute;
width: 100%;
height:1341px;
left: 0px;
border: 5px solid #408080;
overflow:hidden;}
#Table {
position: relative;
float: left;
width: 940px;
height: 319px;
margin-left: 409px;
margin-top: 215px;}
Happy coding :)
As someone say it in comments, height: auto; should works fine. But your code is a mess. I think you don't understand how css position works;
Let's create a container (.Container) and fill the parent (.Container { position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; }). And simply add { position: absolute; width: 100%; bottom: 0; height: auto; max-height: 100%; overflow: auto; } for dymanic content block.
*,
*:before,
*:after {
box-sizing: inherit;
}
html {
box-sizing: border-box;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
body {
background-color: #F72F4E;
overflow: hidden;
}
.Container {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border: 5px solid #408080;
overflow: hidden;
}
.Content {
position: absolute;
width: 100%;
height: auto;
max-height: 100%;
overflow: auto;
bottom: 0; //or top: 0;
background: rgba(0,0,0,.2);
}
<main class="Container">
<div class="Content">Dynamic Content</div>
</main>
JSFiddle
I have a div with class of container. The height of this div must equal the width. I have achieved this with:
.container{
background-color: #e6e6e6;
position: relative;
}
.container:before{
content: "";
display: block;
padding-top: 100%;
}
Inside the container is an image holder, and inside this an image. The image must be constrained, it's height or width must not exceed the container and still maintain aspect ratio. This is achieved by:
img{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
max-height: 100%;
max-width: 100%;
width: auto;
height: auto;
}
My question concerns the image holder, I need this to be the same width and height as the image that is inside of it. How can I do this? Using CSS only please.
https://jsfiddle.net/1tbrtoaj/4/
Remove position: absolute from your img tag.
.container{
background-color: #e6e6e6;
position: relative;
}
.container:before{
content: "";
display: block;
padding-top: 100%;
}
.img-holder {
border-style: solid;
border-color: #0000ff;
}
img{
top: 0;
left: 0;
bottom: 0;
right: 0;
max-height: 100%;
max-width: 100%;
width: auto;
height: auto;
}
I have an inner div in an outer div.
When I am setting top: SomeValue for innerdiv, it overlaps outer div.
#div1{
position: relative;
top: 10px;
left: 20px;
width: 50%;
background: green;
}
#div2{
position: relative;
top:5px;
left: 20px;
width: 80%;
background: red;
}
Here is my jsfiddle
How to overcome it?
You cannot use Top attribute for this. As it will ignore it's parent's boundaries.
Use padding-top instead
{ position: relative; padding-top:5px; left: 20px; width: 80%; background: red; }
Relative Positioning:
A relative positioned element is positioned relative to its normal
position.
http://www.w3schools.com/css/css_positioning.asp
You're using relative positioning on div2, so it is ignoring the fact that it's a nested div and moving it away from it's normal position.
I've updated the fiddle with a workaround:
http://jsfiddle.net/P6dbe/2/
The fiddle removes the relative position of div2 and adds padding to div1, with the below css:
#div1
{
position: relative;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 20px;
top: 10px;
left: 20px;
width: 50% ;
background: green;
}
#div2
{
width: 80%;
background: red;
}
You are positioning div2 partially outside of div1. If you want to constrain div2 within div1 you need to set overflow:hidden on div1.
#div1
{ position: relative; top: 10px; left: 20px;
width: 50% ; background: green; overflow:hidden;}