.feature {
position:relative;
left:50%;
}
<p class="feature">This is super cool feature..</p>
The above code causes the following: text gets centered, but the scrollbar appears horizontally. This makes me think that the width of feature paragraph still stays the same and that's why it goes beyond the viewport.
If I change the position to absolute, it doesn't go beyond the viewport anymore.
Why does this happen ? If we say that absolute positioning means that it's not part of the flow anymore, this answer wouldn't be enough. It mightn't be part , but still, width is the same, so it should be going beyond the viewport too as it happens for relative.
I think your problem might be resolved, if you add border to the ".feature" element. in the below you could see that when we set "position:absolute" to ".feature" tag, the width of it reduces to its content:
.feature {
position:absolute;
left:50%;
border: 3px solid #000;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>positions</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p class="feature">This is super cool feature..</p>
</body>
</html>
but you may say that if we have a longer text inside the ".feature" tag, it also does not go beyond the viewport. like this:
.feature {
position:absolute;
left:50%;
border: 3px solid #000;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>positions</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p class="feature">This is super cool feature.. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, perspiciatis aliquam deleniti atque sunt labore modi aperiam accusantium et, tempore quibusdam, nemo dolores necessitatibus nobis rerum accusamus illum asperiores quam nesciunt tenetur velit ipsa vel mollitia at assumenda? Recusandae et, molestiae totam officiis labore ab temporibus fugit odit corporis cum.</p>
</body>
</html>
in response to that I think the tag with the "position:absolut" is limited to the boundaries of its nearest parent with non-static position. so if we add a ".parent" to the html file you could understand that the ".feature" tag is always limited to it. and if the ".parent" goes beyond the view the ".feature" also goes beyond the view.
.feature {
position:absolute;
left:50%;
border: 3px solid #000;
}
.parent {
position: relative;
left: 50%;
border: 2px solid #f21;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>positions</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="parent">
<p class="feature">This is super cool feature.. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, perspiciatis aliquam deleniti atque sunt labore modi aperiam accusantium et, tempore quibusdam, nemo dolores necessitatibus nobis rerum accusamus illum asperiores quam nesciunt tenetur velit ipsa vel mollitia at assumenda? Recusandae et, molestiae totam officiis labore ab temporibus fugit odit corporis cum.</p>
</div>
</body>
</html>
“Absolute positioning” is just like relative positioning, but the offset is relative to the entire browser window instead of the original position of the element. Since there’s no longer any relationship with the static flow of the page, please look at normal flow
Normally, block-level elements per default take up the full available width of their container element. However, when you set position: fixed or absolute the element isn't displayed in the same sense as with the rest of the elements.
according to MDN:
A block-level element occupies the entire space of its parent element (container), thereby creating a "block."
As such, the meaning of the container for a block-level element makes alters when refering to absolute or fixed positioned elements. It makes more sense to rather call it the parent.
Since there is no container element to inherit its width, you're seeing it behave more like an inline-block-type element if you inspect it you will see my explanation coming into hand.
EDIT:
if you want to see how absolutely positioned element's width is calculated
Look at W3C
paragraph default is display:block and take 100% width. Change to position absolute or change width of this .feature
The parent of .feature has a set position in css?
Related
I have an 2 HTMLs 1st with viewport tag which is in comments 2nd is without it: `
<html>
<head>
<meta charset="utf-8" />
<title>Civil War History</title>
<!-- <meta name="viewport" content="width=device-width, initial-scale=1"> it is in the first -->
<link href="cssfile.css" rel="stylesheet" />
</head>
<body>
<div> Large Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Asperiores
at deleniti exercitationem expedita laboriosam
laborum laudantium tempora ullam.
Delectus deserunt ducimus error esse
incidunt minus necessitatibus nihil,
obcaecati quaerat recusandae?
</div>
</body>
</html>`
cssfile for that htmls are same (no changes):
div {
font-size :16px;
}
When i checked it in Iphone X 's viewport both of them weird behaviour. First with viewport tag has 375px dimensions with 16px font size have more words than Second one without viewport tag which has an 980 px wide and 16 px for font size . How come ?
Is not it The bigger the space the more the words ? Please explain what is happening . Thanks in advance)
Browsers use text inflation algorithm which causes this effect . This algorithm by default enlarges text font size when it is too small and in touchable anchors in some small width devices.
To prevent this use: -webkit-text-size-adjustment: 100%;.
Absolutely or relatively positioned elements don't occupy its initial space in the document, so other elements behave as if it wasn't there.
I need this behavior, but with a sticky element.
I hope the code explains it all:
(also have it on JSFiddle)
const myDiv = document.querySelector('#container');
const tooltip = document.querySelector('#tooltip');
let showTooltip = false;
myDiv.addEventListener('click', () => {
showTooltip = !showTooltip;
if (showTooltip) {
tooltip.classList.add('shown');
} else {
tooltip.classList.remove('shown');
}
})
#container {
height: 19rem;
overflow-y: scroll;
}
.info {
background: lightblue;
padding: .5rem;
}
#tooltip {
background: gray;
position: sticky;
bottom: 0;
margin: 0 2rem;
opacity: 0;
padding: 1rem;
}
#tooltip.shown {
opacity: 1;
}
<div id="container">
<div class="content info">
Click in this div to hide/show the tooltip.
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex assumenda, quos, perspiciatis temporibus asperiores, corporis rerum veritatis veniam enim rem repellat doloribus a. Asperiores, perferendis voluptatem, quis non modi quibusdam!</p>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex assumenda, quos, perspiciatis temporibus asperiores, corporis rerum veritatis veniam enim rem repellat doloribus a. Asperiores, perferendis voluptatem, quis non modi quibusdam!</p>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex assumenda, quos, perspiciatis temporibus asperiores, corporis rerum veritatis veniam enim rem repellat doloribus a. Asperiores, perferendis voluptatem, quis non modi quibusdam!</p>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex assumenda, quos, perspiciatis temporibus asperiores, corporis rerum veritatis veniam enim rem repellat doloribus a. Asperiores, perferendis voluptatem, quis non modi quibusdam!</p>
</div>
<div id="tooltip">
This tooltip should not occupy its initial space at the bottom of its parent div...
<br><br><br>
But yet its space is taken into consideration. Scroll down to see...
</div>
</div>
Note: using 'display' instead of 'position' as suggested in answers also doesn't work. It does prevent the tooltip of occupying space when not displayed, but when displayed it's space is still taken in consideration...
I'm afraid I don't have a sample but I was able to achieve this with something like:
.sticky-element
{
position: sticky;
height: 0px;
overflow: visible; // not strictly needed
}
.content
{
position: relative;
top: -100%; // or calc(-20px - 100%) to add margin
}
Then:
<div class="sticky-element">
<div class="content">
....
</div>
</div>
In other words, the actual sticky element has a height of zero so it takes up no space, and you shift up the content by its own height.
The best thing about this is it doesn't require you to know the height of the sticky element.
There may be some side effects but it's working OK for my needs.
I think if you switch between
display:none;
and
display: block;
rather than opacity. Then the initial white space that is being occupied at the end will not appear.
You are using opacity: 0;
to hide your element.
Where it might sound like a cool idea, the element is still there, just transparent. Think of really polished window in real life. You might never acknowledge the window, but it is still there and is taking space, and if you are unaware you might crash into it and harm yourself really bad.
The better idea would be to just get rid of it for the time being:
#tooltip {
display: none;
}
#tooltip.shown {
display: block;
}
Here is working JSFiddle:
https://jsfiddle.net/dyabgve5/26/
EDIT:
I found out what you mean. I think you should override #container divs, because they are interfering with your sticky class divs.
Or.. you can try moving that sticky class behind container like this (it works):
</div> - end of div container
<div id="tooltip">
This tooltip should not occupy it's initial space at the bottom of it's parent div...
<br><br><br>
But yet it's space is taken in consideration. Scroll down to see...
</div>
Working JSFiddle: https://jsfiddle.net/83k1xwt5/29/
I have written style for my div element and div element at body section. When the code runs I see two div element at screen. Even when the body section is empty, the div seems at screen. I write on Visual Code. Please help me..
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
width: 400px;
height: 400px;
border: 1px solid black;
text-align: center;
}
p {
letter-spacing: 1px;
}
span {
text-decoration: underline;
}
</style>
</head>
<body>
<div>
<h1>article 1</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi sit, omnis voluptatibus quasi exercitationem cupiditate reprehenderit quidem distinctio. Omnis <span>temporibus</span> necessitatibus illo deleniti quia reprehenderit aspernatur molestias
rerum veniam quam!
</p>
</div>
</body>
</html>
It might be a cache related issue. Press "ctrl + shift + i", right click on the reload icon at the top left corner and select "Empty cache and hard reload". This MIGHT solve the issue.
Can you suggest how to do the following layout without CSS grid, in Bootstrap or IE compatible CSS grid.
In large screen
head, body on left stacking and image on right covering height of head and body.
[— layout in large screen]
In small screen
Head, image and body stacking, full width; image in middle.
[— layout in small screen]
Do you mean you need bootstrap grid which is compatible with IE browser?
If yes, than try to refer an example below.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<style>
.div
{
height:100px;
}
.div2
{
height:200px;
}
</style>
</head>
<body>
<div class="container-fluid">
<h1>Grid</h1>
<p>In large screen : head, body on left stacking and image on right covering height of head and body.</p>
<p>In small screen : Head, image and body stacking, full width; image in middle.</p>
<p>Resize the browser window to see the effect.</p>
<div class="row">
<div class="col-lg-6 col-sm-12 div" style="background-color:orange;">
Heading-<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div class="col-lg-6 col-sm-12 div2 pull-right" style="background-color:green;">
Image-<br> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto.
</div>
<div class="row">
<div class="col-lg-6 col-sm-12 div" style="background-color:yellow;">
Body-<br> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto.
</div>
</div>
</div>
</div>
</body>
</html>
Try to run the code in browser instead of code snippet to get the actual result.
Output in large screen:
Output in small screen:
Further, you can modify the code as per your own requirement.
If we misunderstood anything from your above description than let us know about that. We will try to correct our self and try to provide further suggestions.
I have an image floated to the left of a banner area which is taller than I want the banner to be, this is to leave room for the text to grow without the image cutting off.
When I apply overflow: hidden to .banner the banner clears the image instead of cutting it off.
I understand why this happens but I have been trying to figure out a way to get the desired effect to no avail. See the desired effect below.
I have tried various things like putting the image with a div and applying overflow: hidden to that but I can't seem to get it to work.
I'm sure that the answer is staring me right in the face but I'm just not seeing it.
I have uploaded my code to a JSfiddle for you (with a much smaller image so you can see the effect in the result window)
Thanks in advance.
Here i updated your JSFiddle so you can see the result.
You have to take the image out of the Textflow with position: absolute;.
With this, the image gets cut off, if the text is not high enough to show it all.
You could do it like this, if you know the width of the image: http://codepen.io/pageaffairs/pen/EcJAK
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
.banner {
margin-top: 35px;
background: #f00;
overflow: hidden;
position: relative;
}
.banner img {
position: absolute; top: 0; left: 0;
}
.caption {
margin-left: 230px;
padding: 20px;
font-size: 14px;
}
</style>
</head>
<body>
<div class="banner">
<div class="image">
<img src="http://placehold.it/220x300" alt="" />
</div>
<div class="caption">
<h2>Lorem ipsum dolor sit amet.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam asperiores dicta est, iure libero molestias pariatur. Aperiam aut autem consequatur, deleniti et eum minus nihil perspiciatis provident qui repellendus veniam voluptatem. Aliquid assumenda atque consequatur cumque nesciunt sequi. Adipisci autem cumque iste itaque laudantium necessitatibus optio possimus quam sint vero!</p>
</div>
</div>
</body>
</html>
There are 2 options you could go for:
1 . Apply the float to the image's DIV instead the image itself, and limit the DIV's height to the wanted minimum height.
Example:
.image{ float:left; height:1px; }
JSfiddle example: http://jsfiddle.net/z3zfx7uv/
2 . Get rid of the image and it's DIV altogether and use background-image instead, with appropriate padding-left.
Example:
.banner {
margin-top: 35px;
background: #f00 url(http://placehold.it/220x300) top left no-repeat;
overflow: hidden;
padding-left:220px;
}
JSfiddle example: http://jsfiddle.net/b6zzbowh/