I have used overflow:auto in a webpage and there is a scrolling problem. When I place the cursor over the content n try to scroll the entire webpage scrolls and earlier the content alone used to scroll and now it doesn't happen. Below is the code I have used.
/* CSS Code */
.about-style{
max-width: 100%;
max-height: 100%;
background-color: #fff;
color: #000;
opacity: 0.7;
width: 150px;
height: 150px;
overflow: auto;
padding: 10px;
text-align: justify;
border-radius: 3px;
position: relative;
-webkit-overflow-scrolling:touch;
}
<!-- HTML Code -->
<div class="about-style">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
Overflow only applies if your content is more than the specified width and height of the content div.
as you have mentioned width: 550px; height: 450px; the content of the <div class="about-style"> is not exceeding the above mentioned specs.
in this case overflow:auto and overflow:scroll does not make any difference.
If at all you want a scroll to the <div class="about-style"> div reduce its height and width such that content will overflow.
try with
width: 150px;
height: 150px;
you will get the scroll as you expect.
Related
This question already has answers here:
Overlap border of parent with h2 margin negative
(4 answers)
Closed 4 years ago.
Is there an easy way to achieve the same design as this image using css on a h2 and p tags?
you can try below's code.
.box {
margin-top : 50px;
border : 1px solid #000;
padding : 15px;
width : 500px;
margin-left : auto;
margin-right : auto;
position : relative;
}
.title {
position: absolute;
top: -20px;
font-size: 24px;
background: #fff;
padding: 3px 0;
width: 300px;
text-align: center;
left: calc(50% - 150px);
}
<html>
<head>
</head>
<body>
<div class="box">
<div class="title"><h2>Sample Text</h2></div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</body>
The code below vertically aligns the text within a div perfectly fine but when I try to center it, only the text that needs to be wrapped gets centered. When the text is short, say, 5-6 words, the text is not centered. I don't know if it is just me or I'm doing something wrong here.
I am using display: table-cell; to do the vertical alignment. Both div and p elements are defined in the CSS the same way. Have a look at the codepen to see the problem.
<style>
.outer { outline: 1px solid #eee; }
.outer > p {
display: table-cell;
height: 200px;
vertical-align: middle;
text-align: center;
}
</style>
<div class="outer">
<p>
This longer text will be vertically aligned.
</p>
</div>
<div class="outer">
<p>
This longer text will be vertically aligned and centered. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
http://codepen.io/anon/pen/vGowKL
.outer >p {
display: flex;
height: 100%;
justify-content: center;
align-items: center;
}
You can use flexbox to simplify things.
You just need to declare the wrapping outer class as display: table and width: 100%... The children p's have already been set as display: table-cell by yourself. Updated codepen: http://codepen.io/anon/pen/VaoOJp
.outer {
outline: 1px solid #eee;
display: table;
width: 100%;
}
.outer > p {
display: table-cell;
height: 200px;
vertical-align: middle;
text-align: center;
}
<div class="outer">
<p>
This longer text will be vertically aligned.
</p>
</div>
<div class="outer">
<p>
This longer text will be vertically aligned and centered. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
I need to show a fixed header in the top of the page, so it can't be out of the user's view. The problem is I need to be a responsive and resizable page, so e.g. the header size can change and the height sometimes is 1 em or sometimes 2em.
You can see an example in this fiddle:
<div id="header">
<div id="header-menu">
<div id="header-back-button">Ac1</div>
<div id="header-title">
<h1>This is my so so so long title</h1>
</div>
<div id="header-next-button">Ac2</div>
</div>
</div>
<div id="content">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
I need the content area of the page never be behind the header, and I know I can do it changing the "top" of the div, but that top need to be variable, because of the changing header size.
body{
display:inline-block;
width:100%;
}
#header {
position: fixed;
width: 100%;
top: 0;
}
#header-menu{
display: table;
width:100%
}
#header-back-button {
display: table-cell;
width: 15%;
min-width: 30px;
height: 25px;
background: orange;
}
#header-title {
display: table-cell;
width: 70%;
min-width: 40px;
background: yellow;
}
#header-next-button {
display: table-cell;
width: 15%;
min-width: 30px;
height: 25px;
background: orange;
}
#content{
position: fixed;
display:inline;
}
It has to be a CSS solution. I tryed a lot of things, like changing the position, the display, trying to make the body a table... But with no success. How can I do it?
Thanks a lot
Removing elements from the normal flow of the document is problematic, because then they overlap easily.
What you want can be achieved with sticky positioning, but sadly browser support is currently small.
First, remove this code in order to have a normal header:
body{
display: inline-block;
width:100%;
}
#header {
position: fixed;
width: 100%;
}
#content{
position: fixed;
display:inline;
}
And then add
#header {
position: sticky;
top: 0;
}
Demo
I'm trying to place an element at the bottom (5px) of a div which is inside of another div and has overflow set to auto. So when it's bigger than the parent div, the scroll bar appears.
I also need to place a button at the bottom of the inner div, so it stays at the bottom, therefore I set position:relative to the div and position:absolute to the button.
It works fine when the div is not bigger than the outer div, but when it has overflow, the button does not stay at the bottom of it, but rather has a position of 5px from the bottom of the outer div, and when I scroll the overflown div, it scroll with it. It's easier to see here:
Fiddle link
<div class="mainDiv">
<div class="innerDiv">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<button class="btn">Edit</button>
</div>
</div>
<br>
<div class="mainDiv">
<div class="innerDiv">
<p>Short text.</p>
<button class="btn">Edit</button>
</div>
</div>
.mainDiv {
border: 1px solid green;
width: 200px;
height: 200px;
}
.innerDiv {
border: 1px solid red;
background: lightcoral;
max-height: 200px;
height:100%;
overflow: auto;
position:relative;
}
.btn {
position:absolute;
bottom: 5px;
}
}
How can I solve this so that the button is always 5 px from the bottom of the inner div when it's overflowing and at the same time 5 px from the bottom of the outer div when the text is short?
https://dl.dropboxusercontent.com/u/10039660/whatiwant.png
Furthermore, I'm looking for a solution which wouldn't explicitly set the height of the part of the div above buttons about 70% because my buttons might have variable heights (from 20px to 200px).
Many thanks.
Add min-height to innerDiv will solve your issue.
Here is a working Demo
.innerDiv {
border: 1px solid red;
background: lightcoral;
max-height: 200px;
height:100%;
overflow: auto;
min-height:100%;
}
.btn {
position:absolute;
bottom:10px;
}
Edit: Latest Fiddle
give postion relative to .btn and place the button in parent dive
<style type="text/css">
.mainDiv {
border: 1px solid green;
width: 200px;
height: 200px;
}
.innerDiv {
border: 1px solid red;
background: lightcoral;
max-height: 200px;
height:100%;
overflow: auto;
position:relative;
}
.btn {
position:relative;
bottom: 30px;
}</style>
<div class="mainDiv">
<div class="innerDiv">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<button class="btn">Edit</button>
</div>
<br>
<div class="mainDiv">
<div class="innerDiv">
<p>Short text.</p>
<button class="btn">Edit</button>
</div>
</div>
not sure, if that's exactly what you're looking for, but if you don't position the button at all, it stays at the bottom of the inner div.
Give min-height to your paragraph element.
<p style="min-height: 70%;">Your Text...</p>
and change button position from absolute to relative.
.btn {
position:relative;
bottom: 5px;
}
May this will help in fixed your button position as per your requirement.
Another Solution
Add your button inside <div> like below :
<div class="btndiv">
<button>Edit</button>
</div>
Place this div inside your <div class="innerDiv">..</div>
Remove class from button element and give css class to new div.
CSS for new div
.btndiv{
position:relative;
bottom: 5px;
}
Implementing css columns: just columned content with wrapper div:
http://jsfiddle.net/AmqD5/4/
It all works in webkit and older (prior firefox 22) versions. And in v22 content behaves strangely (there are no columns and it depends on the window size).
Is it a bug of new version or there is may be a workaround (some other css rules) to make content work as in webkit and older versions?
HMTML:
<div class="wrap">
<div class="columns">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>
CSS:
.wrap {
position: absolute;
left: 100px;
outline: 1px dashed red;
width: 300px;
height: 407px;
}
.columns {
position: absolute;
left: 0px;
right: 0px;
-webkit-column-width: 276px;
-webkit-column-gap: 25px;
-webkit-column-rule: 0px none;
-moz-column-width: 276px;
-moz-column-gap: 25px;
-moz-column-rule: 0px none;
height: 407px;
font-size: 20px; text-align: left;
-moz-user-select: none;
cursor: default;
visibility: visible;
display: block;
}
Try position: relative;. Problem aparently solved
.columns {
position: relative;
...
}
Demo Here: http://jsfiddle.net/p3VHh/