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 !
Related
I'm running into an issue with floats. I have two divs I need to always be side-by-side, on the same line. They should not wrap when the screen is resized down. One must be floated left, the other floated right. If the screen width is too small to display both divs entirely, then the user must be able to scroll the main window to see all content (scrollbars should be where the user expects them to be, not "inner" scroll bars). I only want scrollbars to be visible if both floated divs are not entirely visible -- the scrollbars should not be otherwise visible.
The problem is, even when I set the container to use white-space: none; or overflow: visible, the divs still wrap.
I need the divs to always stay inline with one another.
important NOTE: the contents of the two floated divs will be variable in width; I have hard-coded some sizes for demo sakes but those are NOT always the sizes they will be. the divs must be inline with one another regardless of their contents.
fiddle: http://jsbin.com/yidapiriya/edit?html,css,output
markup:
<div class="container clearfix">
<div class="content-container">
<!-- the width/height of this div will be variable based on content... this is just hardcoded for demo purposes -->
<div style="width: 400px; height: 400px;"></div>
</div>
<div class="ads-container">
<!-- the width/height of this div will be variable based on content... this is just hardcoded for demo purposes -->
<div style="width: 640px; height: 480px;"></div>
</div>
</div>
CSS:
* {
box-sizing: border-box;
outline: 1px solid black;
}
.container {
white-space: nowrap;
width: auto;
max-width: 1600px;
margin: 0 auto;
height: auto;
padding: 1rem 3.5%;
overflow: hidden;
}
.content-container {
width: auto;
white-space: normal;
margin-top: 2.5rem;
float: left;
display: inline-block;
height: 25rem;
}
.ads-container {
width: auto;
display: inline-block;
float: right;
text-align: right;
}
.clearfix{
}
.clearfix:before {
content: ' ';
display: table;
}
.clearfix:after {
clear: both;
content: ' ';
display: table;
}
As per i understand your question you need two div be inline even if window is resize set min-width: to container
.container {
min-width: 1400px;
...
}
demo
UPDATE
New Demo
.container {
.....
min-width:380px;
}
.container > div{
display:inline-block;
position: relative;
width: 50%;
float: left;
}
Just remove the float: left and float: right from the .ads-container and .content-container and set overflow: auto; for .container
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;
}
I have the following:
<div class='container-main'>
<div class='container-inner'>
<div class='clickable-box'>
stuff
</div>
<div class='clickable-box'>
stuff
</div>
<div class='clickable-box'>
stuff
</div>
</div>
</div>
.container-main {
width: 100%;
}
.container-inner {
width: 90%;
}
.clickable-box {
width: 300px;
height: 300px;
/* ???? */
}
I'm trying to make it so the clickable box will be centered inside the inner container IF there isn't enough room for another clickable box next to it.
BUT if there is enough width (600px +) then they create 2 columns (which are together centered inside the inner container), and if theres more room even (900px +) then 3 columns etc...
in other words, when I start out with a window of width 500px, it should show 1 column of boxes all lined up under each other. As I drag the window out, the box should stay in the center until theres enough room for another to go next to it, and they create 2 columns instead, and so on.
But I don't want the column to float left or right while I'm dragging the window and leave a big empty space
Try this CSS:
.container-main {
width: 100%;
}
.container-inner {
width: 99%;
text-align:center
}
.clickable-box {
display: inline-block;
width: 32%;
margin: 0 auto;
}
I think what you're looking for is to set clickable-box to display: inline-block. Setting display: inline-block essentially makes the div act like text in regards to text-align rules, but still keeps some block properties as well. It's pretty sweet.
HTML
<div class='container-main'>
<div class='container-inner'>
<div class='clickable-box'>
stuff
</div>
<div class='clickable-box'>
stuff
</div>
<div class='clickable-box'>
stuff
</div>
</div>
</div>
CSS
.container-main {
background-color: red;
text-align: center;
}
.container-inner {
width: 90%;
}
.clickable-box {
background-color: blue;
width: 300px;
display: inline-block;
}
Here's a fiddle to demo it!
display:inline-block should be the best solution, this will display clickable boxes in one line if there is space for them:
.clickable-box {
width: 300px;
height: 300px;
display:inline-block;
}
Also add text-align:center to parent div in order for clickable boxes to be centered
.container-inner {
width: 90%;
text-align:center;
}
I think this should do it. I modified the CSS a bit to add some borders to see what the boxes look like. You could certainly remove those borders.
Fiddle Demo
.container-main {
width: 100%;
}
.container-inner {
width: 90%;
border:3px solid #454;
text-align:center;
}
.clickable-box {
width: 300px;
height: 300px;
border:1px solid #000;
margin:0 auto;
display:inline-block;
}
I'd use float rules because they can push down the boxes that do not fit. For instance, float:left will get you at least two boxes on a 1096px. display:inline might have issues on browser rendering.
.container-main {
width: 100%;
}
.container-inner {
width: 90%;
}
.clickable-box {
width: 300px;
height: 300px;
float:left; // right there.
}
I know there is a lot of similair questions but none of them helped me to solve this. I have very simple setup:
.wrapper {
width: 100%;
display: table;
}
.dontBreakmyLine {
display: table-cell;
}
.iCanUseWhatIsLeft {
display: table-cell;
}
<div class="wrapper">
<div class="dontBreakmyLine">
Some generated text
</div>
<div class="iCanUseWhatIsLeft">
Another generated text
</div>
</div>
Now I need to stretch first div to content and let the another one take remaining space. I know that maximum width of generated text in first div will be 300px, but max-width dont work here as I would like. Any suggestions please?
There is probably a better way, but if you're okay with the line not breaking you can set the left cell to a small width and set the text not to break on whitespaces
Here is a fiddle
http://jsfiddle.net/hqWaU/
.wrapper {
width: 100%;
display: table;
}
.dontBreakmyLine {
display: table-cell;
width: 1px;
white-space:nowrap;
}
.iCanUseWhatIsLeft {
display: table-cell;
}
div {
border: 1px solid silver;
}
A possible solution without display: table; would be to set both boxes to position: relative;, float the left and stretch the right one with right: 0px; (DEMO).
.wrapper {
width: 100%;
}
.dontBreakmyLine {
max-width: 300px;
float: left;
position: relative;
z-index: 2;
}
.iCanUseWhatIsLeft {
position: relative;
right: 0px;
z-index: 1;
}
The text will break as soon as it's longer than 300px but If it won't be longer it doesn't matter. Add display: table-cell back to the boxes if you don't want the right text flow under the left text.
If you still wan't to prevent the line-break you can use white-space:nowrap; maybe even in combination with overflow: hidden; (DEMO).
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;
}