I have two containers which are both children of a main-content div. Whenever the second container (or any for that matter) overflow i can scroll over, BUT both the divs overflow, just the content.
For instance, the image below shows the second container overflowing, but the background colors do not expand the entire way as i scroll. Iv'e tried absolute positioning, but the results are not what i need.
Also, I would like any padding to be included when scrolling. For example, is i set my padding to be padding: 0 10px i want to be able to scroll 10px more than the overflowing content (considering my div will expand?)
Here is a JSFIDDLE of the replicated issue.
UPDATE:
I can fix the issue by setting each individual div's background color and also setting the main background color, but that seems a bit unclean and I would rather have a better way to get the desired results.
This JSFIDDLE is my desired result, but there are so many "hacks" like setting font-size to 0, setting the main-content's background color, setting each div's background color, etc. I am trying to get the same result without all these workarounds.
The easy way is to use table layout.
.main-container {
display: table;
}
.container, .second-container{
display: table-row;
}
http://jsfiddle.net/afelixj/4mpue0gw/2/
Just add the display: table to .main-container class.
.main-container{
display: table
}
Try like this: Demo
.main-container {
overflow-x: auto;
color: #AAA;
background: #343434;
}
.container {
white-space: nowrap;
}
.second-container {
height: 300px;
white-space: nowrap;
background: #454545;
display:table;
width:100%;
}
You can try this CSS:-
.main-container {
overflow-x: auto;
color: #AAA;
display: table;
}
.container {
white-space: pre-wrap;
background: #343434;
display: table-row;
}
.container > div {
display: inline-block;
height: 50px;
line-height: 50px;
padding: 0 10px;
}
.second-container {
min-height: 300px;
white-space: nowrap;
background: #454545;
display: table-row;
padding: 10px;
}
.second-container > div {
display: table-row;
white-space: pre-wrap;
line-height: 22px;
}
Related
I'd like to create a table like div structure, which is placed in a container, can be scrolled horizontally and gets not breaked. I wrote the structure, but when the content gets longer than the container it puts the rest of the content in a new line.
Here's my code so far:
http://jsfiddle.net/rcdzdyv7/2/
where all of these elements represent a "table" row:
<div class="header">...</div>
<div class="body">...</div>
<div class="footer">...</div>
My goal is to make these rows one-lined and look like if it was a table. How could I solve this?
You can't use float:left because when content reach the width there's no way to avoid the floating elements "jumping" to next line (without changing the html structure).
However you can use display:inline-blockbecuase your elements this way can change their behaviour with the property white-space:nowrap.
Basically:
.container {
width: 500px;
overflow-x: scroll;
}
.header {
width: auto;
display:inline-block;
background-color: #D9D9D9;
white-space: nowrap;
clear: both;
}
.body {
display:inline-block;
margin: 5px 0;
}
.body-row {
background-color: #E5EBFF;
display:inline-block;
clear: both;
white-space: nowrap;
}
.footer {
clear: both;
background-color: #D9D9D9;
white-space: nowrap;
}
.row-title {
width: 300px;
display:inline-block;
}
.row-content {
width: 150px;
display:inline-block;
}
.value {
width: 100%;
}
as in this FIDDLE
You could use:
.row-content {
width: 150px;
display: inline-block;
}
instead of:
.row-content {
width: 150px;
float: left;
}
Let me know if it works!
this is because you are using DIV with delimited width no set height.
so when the width needed will be too high for the container width it will automatically do under. Hope this makes sense. A soluation can be to use inline-block, personnally I would recomment to use a classic table but just my opinion
try these css properties to the <div> for which you want a scroll
div {
overflow-x: scroll;
overflow-y: hidden;
}
hope this is what you want !
I am trying to add a table border for just the inner sections, I don't want the borders to be placed at the first and last cell.
So, I tried:
.grid > div:last-of-type {
border-right: none;
}
However, as you can see in the image, the last cell is 5px larger than the rest now, that is because it is trying to fill the empty space left behind when we removed the padding from it... How can I remove the padding, but keep its height the same as the others? maybe a way to make all of them stretch to fit? please bare in mind, I can't add a fixed height as the number of cells will change and their hight may vary.
I have also tried adding border-collapse:collapse; it stretched them (AWESOME!) but the middle cell is now slightly smaller than the other two.
Here is a JsFiddle: http://jsfiddle.net/ju76y/5/
(Added images to the fiddle)
.grid {
width: 100%;
overflow: hidden;
background-color: green;
display: table;
table-layout: fixed;
word-wrap: break-word;
text-align: center;
letter-spacing: 0px;
word-spacing: 0px;
}
.grid > div {
display: table-cell;
vertical-align: top;
border-right: 5px solid red;
}
.grid > div:last-of-type {
border-right: none;
}
Try adding this to the cell property:
box-sizing:border-box;
This will align the last div to align properly with others
.grid > div:last-child > div {
margin-top: -2px;
}
DEMO
same need to be applied for the first child also
.grid > div:first-child > div {
margin-top: -2px;
}
I'm currently in planning stage for a site, which needs to scroll horizontally.
The simplest solution I have to tackle this is to go in this direction, JSFiddle.
I'm not sure if this is the best option, as I will have to arrange each div individually i.e. left: 100% left: 200%;.
Is there a way around the divs, with a display: inline-block value auto wrapping to the viewport, so I don't have to arrange each div individually?
Removing the absolute positioning
What you need to do here is remove the float and absolute positioning from your dividers and simply add white-space: nowrap to your body. As your dividers are set to display as inline-block, these get affected by the white-space property.
body {
margin: 0; padding: 0;
white-space: nowrap;
}
.full {
width: 100%;
height: 100%;
display: inline-block;
}
JSFiddle demo.
Removing the spaces between each block
Now that we've removed the floats and the positioning, you'll notice that there is a white space between each divider. If we refer to this CSS Tricks article, we can remove this by simply giving the body a font-size of 0, and giving each divider a font-size of what you're wanting the font size to be within those blocks:
body {
margin: 0; padding: 0;
white-space: nowrap;
font-size:0;
}
.full {
width: 100%;
height: 100%;
display: inline-block;
font-size:16px;
}
Second JSFiddle demo.
http://jsfiddle.net/MsRCS/3/
You can remove the absolute positioning and use float instead.
body {
margin: 0; padding: 0;
width:300%;
}
.full {
width: 33.3%;
height: 100%;
display: inline-block;
float: left;
}
#screen-1 {
background: red;
}
#screen-2 {
background: blue;
}
#screen-3 {
background: yellow;
}
I'm playing with css3's flexbox in Chrome (no need to worry about cross-browser for this). I'm having a hard time convincing it to lay out my content the way I'd like. Here's a sketch of my goal:
Here's a jsFiddle of my attempt: http://jsfiddle.net/Yht4V/2/ This seems to work great except each .group will expand its height rather than create multiple columns.
I'm using flexbox pervasively here. The body lays out vertically, with the #content div taking the remaining height of the page. Each .group is laid out horizontally. Finally, each .item is laid out within a .group vertically with wrapping.
Unfortunately, each .group ends up as a single column by expanding the #content height, which causes a vertical scrollbar (unwanted). If I set the height of each .group to a fixed pixel size, the items break out into multiple columns, but this defeats the fluidity of the flexbox. Here's what it looks like with fixed heights: http://jsfiddle.net/Yht4V/3/
So, how can I get my #content div to not expand vertically since everything is managed with flexboxes without setting a fixed height? I was expecting the flexbox to trigger more columns instead of expanding the height of its parent and causing a scrollbar.
From what I've seen with the Chrome and Opera implementations for Flexbox, a flex-direction of column requires restricting the height of the element, otherwise it will continue expanding vertically. It doesn't have to be a fixed value, it can be a percentage.
That said, the layout you want for your .group elements can also be achieved by using the CSS Columns module. The flow of the elements will be similar to that of the flexbox column orientation, but it will create columns as long as there's enough width for them, regardless of how long the document is.
http://jsfiddle.net/Yht4V/8/ (you'll have to excuse the lack of prefixes)
html {
height: 100%;
}
body {
height: 100%;
display: flex;
flex-flow: column nowrap;
}
h1 {
padding: 1em;
}
#content {
padding: 10px;
background-color: #eee;
display: flex;
flex-grow: 1;
}
#content > .group {
margin: 10px;
padding: 10px;
border: 1px solid #cfcfcf;
background-color: #ddd;
flex: 1 1 auto;
}
#content > .group:first-child {
columns: 10em;
flex-grow: 2;
}
#content > .group .item {
margin: 10px;
padding: 10px;
background-color: #aaa;
break-inside: avoid;
}
#content > .group .item:first-child {
margin-top: 0;
}
Leaving it as a bunch of nested flexboxes, this was about as close as I could get it:
http://jsfiddle.net/Yht4V/9/ (again, no prefixes)
html {
height: 100%;
}
body {
height: 100%;
display: flex;
flex-flow: column nowrap;
}
h1 {
padding: 1em;
}
#content {
padding: 10px;
background-color: #eee;
display: flex;
flex: 1 1 auto;
height: 100%;
width: 100%;
}
#content > .group {
margin: 10px;
padding: 10px;
border: 1px solid #cfcfcf;
background-color: #ddd;
display: flex;
flex-flow: column wrap;
flex: 1 1 30%;
max-height: 100%;
}
#content > .group .item {
margin: 10px;
padding: 10px;
background-color: #aaa;
}
Replace the following in your css -
display: -webkit-flex;
to the following -
display: -webkit-box;
This worked very well for me :-)
I have following fiddle: http://jsfiddle.net/BFSH4/
As you see there are two issues:
The h1 and h2 aren't vertically aligned.
The nav and the content aren't horzontal alligned.
For the 1. I already tried margin and padding. No success...
The second one also isn't that easy the common ways of floating and using inline-block don't work...
What am I doing wrong?
I finally managed floating the header. The problem was that hgroup isn't a block element.
However even it worked after all I think it is better to use a real image for the enterprise name and slogan.
Now only the issue with the horizontal alignment fails.
I don't know why:
http://jsfiddle.net/BFSH4/2/
I can do what I want there is no way that they wan't to be side by side!
Solution for your first problem (found here):
HTML
<div class="header">
<span></span><img src="images/prototype.png" /><hgroup><h1>Prototype</h1><h2>SideBySide</h2></hgroup>
</div>
CSS
.header {
height: 160px;
border: 1px solid #8a2be2;
/* text-align: center; */
}
.header span {
height: 100%;
vertical-align: middle;
display: inline-block;
}
.header img {
display: inline-block;
height: 160px;
float: left; /* added, so the image will appear left to the text correctly */
}
.header hgroup {
margin: 0;
vertical-align: middle;
display: inline-block;
}
This solution depends on display: inline-block
Solution for the second problem:
.nav {
width: 229px;
display: block;
margin: 0 auto;
}
Live demo: http://jsfiddle.net/BFSH4/4/