I have the current css:
#inner {
height: 50em;
width : 20em;
overflow: auto;
float : left;
padding :10px;
margin : 20px;
white-space: normal;
}
#outer{
width: 60em;
white-space:nowrap;
border: 13px solid #bed5cd;
overflow-x: auto;
overflow-y: hidden;
}
My html code looks like:
<div id="outer">
<div id="inner">
data
</div>
<div id="inner">
data
</div>
<div id="inner">
data
</div>
. . . .
</div>
I could able to see horizontal scrolling. But the problem is, I don't want to hard code outer.width as 60em. I want to keep it as auto. But that ends in vertical scrolling.
Any idea where I'm making the mistake?
Set white-space:nowrap and overflow:auto on outer div.
Set display:inline-block on inner div, and remove float.
#outer {
border: 13px solid #bed5cd;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
}
#inner {
display: inline-block;
white-space: normal;
width: 20em;
padding: 10px;
margin: 20px;
}
<div id="outer">
<div id="inner">
data
</div>
<div id="inner">
data
</div>
<div id="inner">
data
</div>
</div>
You can apply below css class on the div
.scrolls {
overflow-x: scroll;
overflow-y: hidden;
height: 80px;
white-space:nowrap
}
Related
enter image description here
Remove box space from vertical and horizontal scroll bar
What you want is not possible because scroll is a native ui. However it is obviously possible if you make your own scrollbar using JS.
This is the closest that I can get with CSS
.case-1 .wrapper{
width: 100px;
height: 100px;
overflow: auto;
}
.case-1 .wrapper .something{
width: 200px;
height: 200px;
background-color: hotpink;
}
.case-2 .wrapper{
width: 100px;
height: 100px;
overflow-y: auto;
}
.case-2 .wrapper-inner{
overflow-x: auto;
}
.case-2 .wrapper .wrapper-inner .something{
width: 200px;
height: 200px;
background-color: hotpink;
}
body{
display: flex;
margin: 0;
font-family: sans-serif;
}
.case{
margin: 20px;
}
<div class="case-1 case">
<h4>Normal</h4>
<div class="wrapper">
<div class="something"></div>
</div>
</div>
<div class="case-2 case">
<h4>Desired</h4>
<div class="wrapper">
<div class="wrapper-inner">
<div class="something"></div>
</div>
</div>
</div>
You can try the property overflow.
The overflow-x property controls whether the content of the block element is displayed horizontally and overflow-y vertically.
I am currently trying to figure out a way to be able to have a layout that has a bottom-up, content-oriented resizing behavior.
I have the following situation: https://codepen.io/Flash1232/pen/JJYPVQ
What is wrong here is obviously that the wrapper divs do not wrap around the table divs. Now is there any solution for this involving just plain CSS and HTML or do I have to write something in JS like "set wrapper width to the width of its inner div"?
Thanks in advance for any clues!
Man i solved my problem with display:flex on parent element :)
You may want to consider using a flexbox. Please see below. If there is anything that needs to be different, just let me know.
.outer-div {
position: absolute;
background: black;
width: 800px;
left: 0;
top: 0;
bottom: 0;
overflow: auto;
padding: 10px;
}
.area {
overflow: auto;
display: flex;
border: 5px solid red;
background: white;
margin: 10px 40px 10px 10px;
}
.column {
background: green;
border: 5px solid blue;
}
.wrapper {
display: flex;
border: 5px solid yellow;
justify-content: center;
align-items: center;
}
.table {
white-space: nowrap;
}
.violet {
background: violet;
width: 120%;
height: 80px;
}
.red {
background: red;
width: 150%;
height: 80px;
margin-bottom: 20px;
}
.icons {
Background: yellow;
float: right;
height: auto;
width: auto;
}
<div class="outer-div">
<div class="area">
<div class="column">
<div class="wrapper">
<div class="table red">
<span>***Table Content***</span>
</div>
</div>
<div class="wrapper">
<div class="table violet">
<span>***Table Content***</span>
</div>
</div>
</div>
<div class="column">
<div class="wrapper">
<div class="table violet">
<span>***Table Content***</span>
</div>
</div>
</div>
</div>
<div class="icons">
<p>Icon</p>
<p>Icon</p>
<p>Icon</p>
<p>Icon</p>
<p>Icon</p>
<p>Icon</p>
</div>
</div>
You should read the definition of the width attribute.
https://developer.mozilla.org/en/docs/Web/CSS/width
Percentages: refer to the width of the containing block
If you set width to 150%, you explicitly say, that the child should be bigger than the parent. You can not expect, that the parent has the same width like the child, if you force the child to be wider.
I have a vertically central adaptable scrollable flexbox element, which itself should have two columns (I solved this with two child-divs). The central flexbox should have a frame and a central divider line.
I can't get the central divider line to run all the way to the bottom of the scrollable flexbox. I tried it with a third child div element but the line only appears for the vertical extent of the flexbox.
How can I make two columns in a scrollable flexbox with a frame and central divider line running all the way to the bottom?
Thank you for your help.
Here is the example:
https://jsfiddle.net/soliman/0d0tn22x/2/
<body>
<div class="wrapper">
<div class="header">
<h1>Header</h1>
</div>
<div class="content">
<div class="leftContent"> Column 1
With a lot of lines.
</div>
<div class="divider"></div>
<div class="rightContent"> Column 2
With fewer lines
</div>
</div>
<div class="footer">
Footer
</div>
</div>
</body>
CSS:
html,
body {
height: 100%;
margin: 0;
padding: 0;
background: black;
color: red;
}
.wrapper {
display: flex;
/* use the flex model */
height: 100%;
flex-direction: column;
}
.header {
margin: 1em 1em 0 1em;
}
.content {
flex: 1 1 auto;
display: flex;
overflow-y: auto;
position: relative;
min-height: 100px;
margin: 0 1em 0 1em;
border: 6px double red;
}
.content > div {
width: 50%;
padding: 3%;
}
.content > div:first-child {
margin-right: 10px;
}
.footer {
margin: 0 1em 1em 1em;
}
.divider {
position: absolute;
left: 50%;
top: 0%;
bottom: 0%;
border-left: 6px double red;
}
Try this mixed flexbox and CSS table layout. You can set the content area as a table, and the three columns as table cells, so they always be equal height.
There is one issue with the approach is - it only works properly if the content is taller than the container, otherwise the vertical line will stop in the middle. See the other approach at the bottom.
jsFiddle
html,
body {
height: 100%;
margin: 0;
}
.wrapper {
height: 100%;
display: flex;
flex-direction: column;
}
.content {
flex: 1;
overflow-y: auto;
min-height: 100px;
border: 1px solid;
}
.wrapContent {
display: table;
width: 100%;
}
.wrapContent > div {
display: table-cell;
}
.leftContent,
.rightContent {
width: 50%;
}
.divider {
border-left: 1px solid;
}
<div class="wrapper">
<div class="header">
<h1>Header</h1>
</div>
<div class="content">
<div class="wrapContent">
<div class="leftContent">
<div style="height:500px;">Left</div>
</div>
<div class="divider"></div>
<div class="rightContent">
<div style="height:auto;">Right</div>
</div>
</div>
</div>
<div class="footer">
<p>Footer</p>
</div>
</div>
Another way would be using background image for the vertical line, set that to the center of the content container, with repeat-y, the image can be just a square dot. It works well even if the content is shorter than the container.
jsFiddle
html,
body {
height: 100%;
margin: 0;
}
.wrapper {
height: 100%;
display: flex;
flex-direction: column;
}
.content {
flex: 1;
display: flex;
overflow-y: auto;
min-height: 100px;
border: 1px solid;
background: url("http://i.imgur.com/oyQ4xsL.png") center top repeat-y;
background-size: 1px;
}
.leftContent,
.rightContent {
width: 50%;
}
<div class="wrapper">
<div class="header">
<h1>Header</h1>
</div>
<div class="content">
<div class="leftContent">
<div style="height:500px;">left</div>
</div>
<div class="rightContent">
<div style="height:auto;">right</div>
</div>
</div>
<div class="footer">
<p>Footer</p>
</div>
</div>
I've two floated DIVs (two columns) which are nested in an "clear-float"-DIV, which itself is nested in an centered DIV ("wrapper" DIV).
<div id="content">
<div class="block2">
<div id="slot_left">
CONTENT-LEFT
</div>
<div id="slot_right">
*CONTENT-RIGHT*
</div>
</div>
</div>
The right column has min-width and max-width CSS option set. But the wrapper DIV, which has min-width and max-width also, is always expanded to max width.
#content {
min-width: 300px;
min-height: 80px;
max-width: 350px;
margin: 0 auto;
background: #c00;
}
.block {
overflow: hidden;
_overflow: visible;
_overflow-x: hidden;
_height: 0;
}
#slot_left {
width: 200px;
background: #ff0;
float: left;
position: relative;
}
#slot_right {
float: left;
background: #cc0;
min-width: 100px;
max-width: 150px;
position: relative;
}
What's the reason for that? I want the wrapper DIV to has minimum width required but to be centered on screen.
Here is an fiddle.
use display:inline-block
why this is happening?? div is by default block level element, so when you have given max-width, it will always obey it to occupy max area possible....
http://jsfiddle.net/sHB7g/3/
CSS
#content {
min-width: 300px;
min-height: 80px;
max-width: 350px;
margin: 0 auto;
background: #c00;
display:inline-block
}
.block {
display:inline-block;
overflow: hidden;
border:1px solid #000;
}
http://jsfiddle.net/sHB7g/1/
#content {
display: inline-block;
}
and then added a content wrapper
#contentwrapper {
text-align: center;
}
the html then is like this
<div id="contentwrapper">
<div id="content">
<div class="block">
<div id="slot_left">
CONTENT-LEFT
</div>
<div id="slot_right">
*CONTENT-RIGHT*
</div>
</div>
</div>
I have 2 div : avatar and secondClass. I want these 2 div to be aligned, so I'm giving to both of them the css attribut "display: inline-block;"
Inside of "secondClass" I have the div "message", I'm it the css attribut "word-wrap: break-word;".
"avatar" and "secondClass" are only aligned when "message" is not too long, and I want them to be aligned no matter what.
my css are :
.firstClass{
width: 80%;
}
.avatar{
display: inline-block;
padding-right: 5px;
vertical-align: top;
}
.secondClass{
display: inline-block;
vertical-align: top;
}
.message{
width: 50%;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
-o-hyphens: auto;
hyphens: auto;
word-wrap: break-word;
}
and my html code is
<div class="firstClass">
<div class="avatar">
<img src="avatar.jpg">
</div>
<div class="secondClass">
<div class="message">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
</div>
</div>
<br>
<div class="firstClass">
<div class="avatar">
<img src="avatar.jpg">
</div>
<div class="secondClass">
<div class="message">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
</div>
</div>
For example in this fiddle it's working on the first try but not on the second one:
http://jsfiddle.net/ZZ8Dr/
You'll have to give them a max-width so the avatar and the secondClass both do not go over 100% of firstClass. Have a look at that fiddle.
For example:
.secondClass{
max-width: 80%;
}
.avatar{
max-width: 20%;
}
Use box-sizing: border-box; to include margin and padding in the percentage calculation.
In this case, I'd let .avatar float left. Then the width of .secondClass is not important for the alignment.
.avatar {
float: left;
}
and eventually (if you prefer):
.secondClass {
margin-left: <width of .avatar>;
}