Recently I have come across a problem for which I am not finding any appropriate solution.
Below is the image which gives an idea of what i am trying to achieve:
The div shown by the arrow is the mark of the problem which i am finding a solution for.
The problem is I want the div to be extended to full screen.
This div is inside a parent div who has a fixed width due to which i am not able to extend my image to full screen.
Have tried giving overflow to parent but isn't working.
I have tried below solution which is working to a certain extent but need a reliable solution.
width: 100%;
left: 0;
position: absolute;
margin-left: calc(-31.5vw);
align-content: center;
Could someone please provide some solution to this?
html, body
{width: 100%; height: 100%; overflow: hidden;}
#parent{
display: block;
background-color: yellow;
border: 1px solid red;
position: fixed;
width: 200px;
height:100%;
}
#child1{
background-color: red;
display: block;
border: 1px solid yellow;
position: absolute;
width: 100vw;
margin-left: calc(200px - 100%);
//top:0px
}
<div id="parent">parent with position: fixed
<div id="child1">child wrapper (uncomment top to fit the parent wrapper)</div>
</div>
use Viewport Sizes so it will cover the whole page (vw and vh)
#first {
width: 100px;
height: 100px;
background:gray;
position: fixed;
top: 0;
left: 0;
}
#second{
width: 100vw;
height: 100vh;
background:blue;
position:absolute;
}
<div id="first">
<div id="second">
something
</div>
</div>
The below code snippet should work, if I understand your question correctly. Setting the width of the child div to 100vw makes the div 100% of the width of the viewport (window).
Also note that in order to get the child to start at the left of the viewport and not the left of the parent, I gave the child a position of absolute and a left of 0. Because the parent is not positioned, it starts the left of the child at the left of the viewport (the closest positioned ancestor).
#parentDiv {
width: 250px;
height: 250px;
margin: 0 auto;
background-color: orange;
border: 2px solid red;
}
#childDiv {
/* 100vw is 100% of the viewport width. */
width: 100vw;
height: 50px;
background-color: lightblue;
box-sizing: border-box;
border: 2px solid green;
position: absolute;
left: 0;
}
p {
text-align: center;
}
<html>
<body>
<div id="parentDiv">
<p>Parent</p>
<div id="childDiv"><p>Child</p></div>
</div>
</body>
</html>
Related
There are lots of card to be showed and I need to show menu when I hover one of the cards.
I use position: absolute; for menu and use position: relative; for the card, but why the scrollbar appeared when I hover on the card ？
<!DOCTYPE html>
<html>
<head>
<style>
.box {
height: 240px;
width: 200px;
overflow: auto;
border: 1px dashed red;
}
.card {
height: 120px;
width: 120px;
border: 1px solid blue;
position: relative;
}
.menu {
display: none;
height: 400px;
width: 200px;
position: absolute;
top: 0;
left: 0;
background: linear-gradient(orange, pink);
}
.card:hover .menu {
display: block;
}
</style>
</head>
<body>
<div class="box">
<div class="card">
<div class="menu"></div>
</div>
</div>
</body>
</html>
The scrollbar has nothing to do with your positioning, it is a result of overflow: auto; on your .box element.
overflow: auto; will show a scrolling bar if a child element overflows its parent container where overflow: auto; is set.
Seeing as the .box parent-element has a fixed size value height: 240px; while its child element .menu has height: 400px;, it will cause a scrollbar to appear because there is an overflow of 160px.
While #Yong is correct with document flow in his answer with the position: absolute; property, seeing as you have fixed height and width on all your elements, position: absolute; doesn't actually do anything in this exact reproducible example.
If I understand your problem correctly, a simple solution to your problem if you want to keep the fixed width and height on your .box element, you can simply disable the scrollbar by applying display: none; to the .box pseudo-element ::-webkit-scrollbar.
(NOTE: As of February 28th, 2022 this is still not supported in Firefox).
Read more about browser support at https://caniuse.com/?search=%3A%3A-webkit-scrollbar
Example with no positioning properties & -::webkit-scrollbar
.box {
height: 240px;
width: 200px;
border: 1px dashed red;
overflow: auto;
}
.box::-webkit-scrollbar{
display: none;
}
.card {
height: 120px;
width: 120px;
border: 1px solid blue;
/*position: relative;*/
}
.menu {
display: none;
height: 400px;
width: 200px;
/*position: absolute;
top: 0;
left: 0;*/
background: linear-gradient(orange, pink);
}
.card:hover .menu {
display: block;
}
<!DOCTYPE html>
<html>
<body>
<div class="box">
<div class="card">
<div class="menu"></div>
</div>
</div>
</body>
</html>
If you want to remove overflow altogether, you can apply overflow: hidden; to .box.
Keep in mind the fixed height of 400px on the .menu element will not apply as the fixed height of 240px on the .box element will hide the remaining 160px. I hope this solves your problem, but a little more detail would help!
absolute
The element is removed from the normal document flow, and no space is
created for the element in the page layout. It is positioned relative
to its closest positioned ancestor, if any; otherwise, it is placed
relative to the initial containing block. -MDN
.menu is positioned absolute therefore it is positioned relative to .card which is the closes positioned ancestor to it.
relative
The element is positioned according to the normal flow of the
document, ... -MDN
And because .card is positioned relative it would still take space and position according to the normal flow of the document. Therefore, it would still be taken into consideration whether the .box or its parent would overflow or not.
with set position: absolute; for .menu and position: relative; for .card you able to change the position of .menu with top bottom left right properties relative to its first positioned (not static) ancestor element( .card position ).
but in your question, the absolute or relative position is not the cause of the scrollbar appear . The reason is the owerflow property .
the default value for owerflow is visible that create no owerflowing . And you created the scrollbar by setting it auto because the size of menu is larger than card.
.box {
height: 240px;
width: 200px;
/* overflow: auto; */
border: 1px dashed red;
}
.card {
height: 120px;
width: 120px;
border: 1px solid blue;
position: relative;
}
.menu {
display: none;
height: 400px;
width: 200px;
position: absolute;
top: 0;
left: 0;
background: linear-gradient(orange, pink);
}
.card:hover .menu {
display: block;
}
<div class="box">
<div class="card">
<div class="menu"></div>
</div>
</div>
I have created a grid and now have problems with max-width. I want to have containers which take up the available width and are restricted by a left and right margin. This containers can contain children. These children may be bigger then the parent container and may be moved with the class .move-to-right-border to the right border to take up full width on the right.
I now have added a max-width to the container, to restrict the width. But now i have the problem that i can't set child elements to take up full width. I tried with 100vw, but width 100vw the scrollbar is included. Has anybody a solution for this problem?
Maybe it gets more clear with this example, comment max-width in and out to see what i want.
.row-right {
box-sizing: border-box;
margin-left: 200px;
margin-right: 100px;
max-width: 700px; /* to see the problem comment max-width in and out */
width: calc(100% - 100px - 200px);
border: 1px solid red;
}
.move-to-right-border {
box-sizing: border-box;
width: calc(100% + 100px);
border: 2px solid blue;
}
http://codepen.io/anon/pen/eJymOL
just use below css
CSS
.row-right p {
text-align: justify;
width : 100%
}
Hope this will help you :)
I think u r after something like this:
.parent{
position: relative;
height: 300px;
padding: 10px 0;
background-color: #99ff99;
text-align: center;
}
.container{
width: 200px;
margin: 0 auto;
height: 100px;
padding: 30px 0;
background-color: #ff9999;
}
.child{
position: absolute;
width: 100%;
height: 50px;
left: 0;
background-color: #9999ff;
}
<div class="parent">
This is parent
<div class="container">
This is container
<div class="child">
This is child
</div>
</div>
</div>
I have this simple HTML code, but make me frustrated because it can't center vertically :
<div class="outer">
<div class="inner">
Hello World
</div>
</div>
and here's my CSS :
.outer {
position: relative;
height: 350px;
}
.inner {
position: absolute;
height: 100px;
top: 50%
}
the .inner div is really center vertically, but based on top side of it. because of top: 50%, what I want is this .inner div really centered vertically on top of .outer. how to do that?
You can center your element using css3 even if you don't know the dimensions.
.inner {
position: absolute;
height: 100px;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
Since you know the height of both elements you can set your top to top: 125px;
(350 - 100) / 2.
UPDATED WITH JQUERY
http://jsfiddle.net/yf0ncd7f/
Actually an easy way to center a absolute div is to use margin: auto;
section {
width: 100%;
height: 800px;
position: relative;
background: #eee;
}
div {
width: 500px;
height: 300px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
background: orange;
}
<section>
<div></div>
</section>
I added borders to differentiate clearly
Is this you want?
http://plnkr.co/edit/JRct1x95gnIUl8jITzG0?p=preview
.outer {
position: relative;
height: 150px;
border : 1px solid #f00;
}
.inner {
position: absolute;
height: 80px;
top:0;
bottom:0;
margin:auto;
border : 1px solid #0f0;
}
You could use this CSS trick to make the div vertically centered (and optionally horizontally as well). This works for a parent div of any height and width, as long as they are specified.
.inner {
position:absolute;
// The height and width of the element have to be set for this to work
height:100px;
width:100px;
// Setting the top and bottom to 0px as well as the margins to auto
// causes the div to be centered vertically.
top: 0px;
bottom: 0px;
margin-top: auto;
margin-bottom: auto;
// To also center the div horizontally, do the same for
// left, right and the margins.
left: 0px;
right: 0px;
margin-left:auto;
margin-right:auto;
}
Note that this solution only works when the height of the parent div is known beforehand and is specified. So the parent element needs to have height:100px or whatever amount of pixels you need it to be. Also the height can't be percentual, meaning that if the height of the parent div is declared as height:50%, this will NOT work.
The inner div can actually have a
You can set it by line-height property set it to the height of the div as in your code it should be line-height: 100px;
.outer {
position: relative;
height: 350px;
background: gray;
}
.inner {
position: absolute;
height: 100px;
line-height: 100px;
background: blue;
}
<div class="outer">
<div class="inner">
Hello World
</div>
</div>
Here is the code. I want the DIV.fixed-nav (position:fixed) to completely fit its parent DIV.container of which width may change. Is there a pure CSS solution for this?
CSS:
body {
margin: 0;
padding: 0;
}
.container {
border: 1px solid #000000;
margin: 0 auto;
max-width: 600px;
min-width: 400px;
}
.fixed-nav {
background-color: red;
height: 20px;
position: fixed;
width: 100%;
top: 0;
z-index: 99;
}
.content {
background-color: green;
height: 100px;
margin-top: 20px;
}
HTML:
<div class="container">
<div class="fixed-nav">
</div>
<div class="content">
</div>
</div>
Please check the DEMO.
The problem with fixed is that it will always be relative to the browser window. So if you set 100% height on your fixed container it will be 100% of the browser window.
The only way I could think of to achieve this is to use jQuery. Or if you don't need the menu to be fixed and it could be absolute then height 100% will work.
If you'll take a look at my site http://www.metroflatsmiami.com/listing.html, you'll see that I have a floating DIV on the right, but the thing is it's set off the left side. If you resize your window (or have a different resolution), it won't look right. I want it to always be just to the right of the main content DIV, but still scrolling... any thoughts?
The CSS:
.floating_price_box {
position:fixed;
width: 200px;
border: solid 1px black;
height: 400px;
top: 50px;
left: 1000px;
}
Use jQuery:
$(window).bind("load resize", function(){
$('.right-block').width($('.main-block').width() - (25));
});
Yeah....why not do right: 50px instead of left: 1000px?
If you set the floating_price_box div to have a left value of 75%, it will scale with the page size. It breaks when the browser window gets too small, but the window has to be pretty small for that.
.floating_price_box {
position:fixed;
width: 200px;
border: solid 1px black;
height: 400px;
top: 50px;
left: 75%;
}
In order to make the sidebar 25px to the right of the main content, you could also do something like this. Add an inner div to your floating price box:
<div id='home_search_container'>
...content...
</div>
<div class="floating_price_box">
<div class="floating_price_box_inner">
Nightly Rate: $90 - $130 (Instant Quote)<br/>
</div>
</div>
And here's your CSS:
#main {
float: left;
margin-right: 25px;
width: 700px;
}
.floating_price_box {
float: left;
width: 200px;
}
floating_price_box_inner {
border: solid 1px black;
height: 400px;
position: fixed;
top: 50px;
}
Basically all this second method does is float the outside boxes to the correct position. Then the inner div is styled to fix the box vertically where you want it.
The simplest way is to position it like the main content and then use margin to shift it to the side:
.floating_price_box {
position:fixed;
width: 200px;
border: solid 1px black;
height: 400px;
top: 50px;
/*left: 1000px;*/
margin-left : 700px; /* main column width */
}