I have a container div (fixed width, float left) and a set of spans (fixed width and height) inside the container.
<div id="cont">
<span class="box">1</span>
<span class="box">2</span>
<span class="box">3</span>
...
</div>
While reaching the width of the container, the spans are broken to a new row. How can I make them stay in one row next to each other and have the area scrollable horizontally?
Here is the jsFiddle.
Thanks very much in advance!
Simply add white-space:nowrap; to #cont:
The white-space CSS property is used to to describe how white spaces
inside the element is handled.
nowrap collapses whitespace as for normal, but suppresses line breaks
(text wrapping) within text.
#cont {
overflow: auto;
width: 500px;
float: left;
white-space: nowrap;
}
.box {
background-color: #BBBBBB;
height: 100px;
display: inline-block;
margin: 5px 4px 5px 10px;
width: 100px;
}
<div id="cont">
<span class="box">1</span>
<span class="box">2</span>
<span class="box">3</span>
<span class="box">4</span>
<span class="box">5</span>
<span class="box">6</span>
<span class="box">7</span>
</div>
Just add
white-space:nowrap;
to your container div
fiddle here:http://jsfiddle.net/g1e3ztnu/3/
You are setting a width in the #cont. Remove the width: 500px to width : auto; If you want to force it with the widht you have you must set a new rule: white-space: nowrap.
Option 1 - CSS
#cont {
overflow:auto;
width:auto;
}
Option 2 - CSS
#cont {
overflow:auto;
width: 500px;
white-space: nowrap;
}
DEMO HERE
Related
Why adding contenteditable="true" to a span inside a div, cause break line?
div{
width: 110px;
height: 80px;
border:1px solid #5aa;
}
<div>
<span>IamANowSpaceLineSample</span>
</div>
<br/>
<div>
<span contenteditable="true">IamANowSpaceLineSample</span>
</div>
The text "IamANowSpaceLineSample" is longer than the 110px width you have allocated to your div. It has no spaces and no css rule saying that it can break the word to fit, so it isn't getting wrapped to fit inside its parent div, and its extending outside the div.
However when you add contenteditable="true" the styling changes and the following gets applied (as you can see if you check the element in the element inspector):
span[Attributes Style] {
-webkit-user-modify: read-write;
word-wrap: break-word;
-webkit-line-break: after-white-space;
}
This sets word-wrap: break-word; which forces the browser to wrap the text to fit inside the 110px width of the parent div.
If you want to prevent it wrapping, you can use white-space: nowrap; (or make the div wide enough to fit!)
Examples:
div{
width: 110px;
height: 20px;
background-color: #aaa;
margin-bottom:2em;
}
span.nowrap{
white-space: nowrap;
}
<div>
<span>IamANowSpaceLineSample</span>
</div>
<div>
<span contenteditable="true">EditableWithDefaultStyle</span>
</div>
<div>
<span class = "nowrap" contenteditable="true">EditableWithNoWrapStyle</span>
</div>
I'm trying to get a vertical navigation list that will allow for elements that are wider than the nav itself. Users can enter whatever names they like for items that will appear here, so I have no control over their width, aside from maybe a very high max character length.
I've tried a few different methods, and seem to be coming up with multiple ways to achieve the same wrong result, once with flexbox once without. In both cases, if I have some "normal" sized elements that don't overflow outside of the nav, they look fine at first. But if I have an oversized element that overflows outside the container, and the user scrolls to the right, they will see the items boundaries don't extend to the right.
If I use the outer "item" for visual styling (light blue), they all end up the same width, but not wide enough to account for the overflow. If instead try styling the inner item (green), it is the correct width for only the overflowing item, and all the rest of the items are different widths based on their length.
Is there a way to:
Have all items appear to be the same width when there is a large item that overflows larger than the container
Without setting some arbitrary width, because I don't have control over how long the user strings might be
CSS only, no javascript
Initial View, looks ok...
Scroll to the right... looks bad!
Codepen
Here's the Codepen
HTML
<div id="container">
<div class="item"><span>Item 1</span></div>
<div class="item"><span>Item 2</span></div>
<div class="item"><span>Item 3</span></div>
<div class="item"><span>Item 4</span></div>
<div class="item"><span>Super Long Item Name of Obliteration</span>
</div>
</div>
<div id="flex-container">
<span class="flex-item"><span>Item 1</span></span>
<span class="flex-item"><span>Item 2</span></span>
<span class="flex-item"><span>Item 3</span></span>
<span class="flex-item"><span>Item 4</span></span>
<span class="flex-item"><span>Super Long Item Name of Obliteration</span>
</span>
</div>
CSS
#container {
width:200px;
height:400px;
background-color: red;
overflow:auto;
}
.item {
height: 40px;
border: 1px solid blue;
background-color:lightblue;
white-space: nowrap;
}
#flex-container {
width:200px;
height:400px;
background-color: red;
overflow:auto;
display: flex;
flex-direction:column;
}
.flex-item {
height: 40px;
border: 1px solid blue;
background-color:lightblue;
white-space: nowrap;
}
/* Content */
span > span,
div > span {
background-color: green;
}
Use overflow and text overflow
.item,
.flex-item {
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%:;
}
Codepen link
I have 3 floated divs on the first "row", the two first divs have a height of 100px, and the third div has a height of 200px. Anything I add after the first row won't fill the whitespace created from the third div.
CSS:
#container {
overflow: hidden;
width: 440px;
margin: -5px;
}
#container div {
background-color: gray;
height: 100px;
width: 100px;
margin: 5px;
float: left;
}
#container #widget2 {
width: 210px;
}
#container #widget3 {
height: 200px;
}
HTML:
<div id="container">
<div id="widget1">1</div>
<div id="widget2">2</div>
<div id="widget3">3</div>
<div id="widget4">4</div>
<div id="widget5">5</div>
<div id="widget6">6</div>
<div id="widget7">7</div>
</div>
widget3 somehow creates unusable space, so that widget4 to 6 are far away and it generally looks weird.
You can see what I mean here: http://jsfiddle.net/SGdG3/80/
I want the red boxes to be "pushed" up to use the white space.
Basically this is how Floated elements behaves. if you want to fill the space, then you have go for absolute positioning with Javascript. Here is a Beautiful JQuery plugin for your solution.
I have this HTML code
<div style="display:inline" >
<div>
<label>NOM:</label>
</div>
<div>
<label>Ben felten</label>
</div>
</div>
I got this result:
I need to change my code to get a result like this :
I need the two labels displayed in the same line and each div (parent to each label) having a width of 50 percent of the page's width.
How can i change my snipet to do that?
Thanks
Try something like this:
<div style="display:inline" >
<div style="float: left; width: 50%;">
<label>NOM:</label>
</div>
<div style="float: left; width: 50%;">
<label>Ben felten</label>
</div>
</div>
You need display inline for more than just the parent div.
div{
display:inline;
}
label{
display:inline;
}
http://jsfiddle.net/SVH5C/
add a class to your main div:
<div class="main">
<div >
<label>NOM:</label>
</div>
<div>
<label>Ben felten</label>
</div>
</div>
and in your css:
.main div{width: 50%; float: left;}
Or if those inside divs are realy there just for the labels there's no need for them to exist and you can style the labels directly, like:
<div class="main">
<label>NOM:</label>
<label>Ben felten</label>
</div>
CSS:
.main label{display: block; width: 50%; float: left;}
HTML:
<div>
<div class="label-container">
<label>NOM:</label>
</div>
<div class="label-container">
<label >Ben felten</label>
</div>
<div class="labels-end"/>
</div>
CSS:
div.labels-end{
clear: both;
}
div.label-container{
float: left;
width: 50%;
}
And the fiddle http://jsfiddle.net/RsK5N/3/
Div "labels-end" is not mandatory if labels spread over the entire width like in this case.
Without extra clear: both styled div browser will try to put the latter content in the same line as your labels. So it works without this div but only because there is no more width available.
You can also use inline-blocks and table-cells as follows.
Using inline-blocks
<div class="ex1">
<label>NOM:</label><label>Ben felten</label>
</div>
div.ex1 {
border: 1px dashed gray;
width: auto; /* will take the width of parent (page) container */
}
div.ex1 label {
display: inline-block;
width: 50%;
background-color: beige;
overflow: auto;
vertical-align: top;
}
Using CSS table-cells
<div class="ex2">
<label>NOM:</label><label>Ben felten</label>
</div>
div.ex2 {
border: 1px dashed gray;
width: 100%; /* will take the width of parent (page) container */
display: table;
}
div.ex2 label {
display: table-cell;
width: 50%;
background-color: beige;
}
If you use inline blocks, you need to be careful about any white space between the two label elements since any white space will add to the width of the line and will cause the second label to wrap to a second line. Use vertical-align: top to get rid of the extra white space below the labels which arises because of the inline formatting.
The extra white space issue does not arise with table-cells. Use width: 100% on the table div to make it fill up the width of the parent container (auto gives a shrink-to-fit width).
See demo: http://jsfiddle.net/audetwebdesign/Nb24q/
Comment: You don't need to wrap the label elements in div unless you need them for some other reason.
I want my content area to stretch to the height of the parent, and I have a fixed height for the title area. I cannot hard-code the height of the content area because in the case I'm working on, the height of the parent area may change.
HTML:
<div class="parent">
<div class="title">Title</div>
<div class="content">
<p>My Content</p>
</div>
</div>
CSS:
.parent{
width : 500px;
height: 300px;
background-color : gray;
position: absolute;
}
.title{
height:50px;
background-color: #94A6E0;
margin:5px;
}
.content{
background-color: #8CBF99;
margin:5px;
}
JSFiddle: http://jsfiddle.net/PGJJv/
There is a way to do it without using fixed heights:
You can set the parent to display: table; and the children to display: table-row. Then the lowest div will take the rest of the height. The only thing is that you need an extra element in between to fake the space between the two elements as border-top or border-bottom don't work on <tr>s. Also you must add padding to the parent in place of margin on the children.
(This is not a real <tr>, it is a sematic div but it is just emulating the behavior of a <tr>.)
HTML:
<div class="parent">
<div class="title">Title</div>
<span class="greyLine"></span>
<div class="content">
<p>My Content</p>
</div>
</div>
CSS:
.parent{
width : 500px;
height: 300px;
background-color : gray;
position: absolute;
display: table;
padding: 5px;
}
.title{
height:50px;
background-color: #94A6E0;
display: table-row;
}
span.greyLine
{
display: table-row;
background-color: gray;
height: 5px;
}
.content{
background-color: #8CBF99;
display: table-row;
}
http://jsfiddle.net/Kyle_/PGJJv/6/
EDIT:
As Dipaks rightly points out, IE7 doesn't support the display: table-row; property.
Maybe you can use the property of a table. Set your parent as a table
You can have a fixed height for your title, that you display as a table-row.
And your content is the second and last table-row; so it always fit the height of the table.
Here is a fidde example : http://jsfiddle.net/PGJJv/5/
You just have to play with margin and border to recreate exactly your template.