I´m currently trying to make an inline article for a school project.
The text is overflowing and I´m not sure why, but I have an idea.
When I remove white-space: nowrap; - the text doing what it´s suppose to, fill the pink box, but then the inline doesnt work any more.
Any ideas? I have attached a codepen.
http://codepen.io/torarne_n/pen/PwQBmx
.slider {
width: 1225px;
height: 600px;
white-space: nowrap;
overflow-y: hidden;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
padding: 1rem;
background-color: #ccc;
margin-bottom: 10px;
}
.slides {
height:500px;
width:1225px;
display: inline-block;
background-color: aqua;
}
.intro-image {
height: auto;
width: auto;
display: inline-block;
background-color: pink;
}
.intro-text {
height: auto;
width: 300px;
display: inline-block;
background-color: fuchsia;
}
The issue is that the inner elements are inherriting the nowrap. Simply set it back to normal on the inner elements:
.intro-text {
height: auto;
width: 300px;
display: inline-block;
background-color: fuchsia;
white-space: normal;
}
Related
I have following in html:
.horizontal-div {
display: flex;
flex-direction: row;
}
.style-1 {
width: 140px;
height: 19px;
font-size: 16px;
color: #272d37;
margin-top: 19px;
margin-left: 8px;
}
.style-2 {
width: 16px;
height: 16px;
float: right;
margin-left: 295px;
cursor: pointer;
}
<div class="horizontal-div">
<div class="style-1">Dummy QC</div>
<div class="style-2">Some image</div>
</div>
What I observe is that 'Dummy QC' goes to next line, as:
What can be the solution to avoid it from going to next line?
You can use CSS white-space Property
.horizontal-div {
display: flex;
flex-direction: row;
white-space: nowrap;
}
.style-1 {
font-size: 16px;
color: #272d37;
margin-top: 19px;
margin-left: 8px;
flex-wrap: nowrap;
}
flex-wrap will work. The problem occurs only when resizing the page to go below your declared width. get rid of the width, or use a media query for small screen/size rules. tested and this works. will force the text to stay on one line.
Set overflow property to div you would, also select value that fits you most out of those:
div.ex1 {
overflow: scroll;
}
div.ex2 {
overflow: hidden;
}
div.ex3 {
overflow: auto;
}
div.ex4 {
overflow: visible;
}
I'm trying to display information for a plant right next to it and I want to force the information to stay right of the image of the plant as long as the screen has a specific min width.
Problem is: if the information contains a line that's longer than the normal width of 100% of leftover width-space in the parent div, the information div is shown below the image.
Example with good line length (no div wrap): https://jsfiddle.net/o3sjug9q/
Example with too much line length (div wrapped around): https://jsfiddle.net/seL72mt9/
How do I force the details div to wrap his text rather than wrapping itself to the next line?
<div class="outer">
<div class="slidecontainer row" id="biodivslider" data-id="1">
<div class="sliderbtn nowrap" onclick="bwdpic()"><</div>
<div class="wrap">
<div class="detailimg"><img src="http://www.nachhaltiger-weinbau.net/wp-content/plugins/biodivslider/img/Milchsterne/Dolden-Milchstern_Ornithogalum_umbellatum-Tci_2004.jpg" class="detailimg"></div>
<div class="details">
<p><span class="detailslabel">Name:</span><br>Milchsterne</p>
<p><span class="detailslabel">Lateinischer Name:</span><br>(Ornithogalum spec.), O. umbellatum, O. nutans</p>
<p><span class="detailslabel">Standort:</span><br>mäßig trocken, sandig, Wärmezeiger, mäßig stickstoffreich</p>
</div>
</div>
<div class="sliderbtn nowrap" onclick="fwdpic()">></div>
</div>
</div>
CSS:
div.outer {
width: 833px;
height: 491px;
background: lightblue;
}
div.slidecontainer {
max-height: 300px;
}
div.row {
display: table;
width: 100%;
table-layout: fixed;
border-spacing: 10px;
max-height: 300px;
}
div.row > div {
float: none;
display: table-cell;
height: 100%;
width: 100%;
}
div.row > div.wrap > div {
float: left;
}
#
div.detailimg {
height: 300px;
width: 300px;
}
img.detailimg {
display: block;
max-height: 300px;
max-width: 300px;
}
div.details {
max-width: 100%;
vertical-align: middle;
word-wrap: break-word;
overflow: visible;
}
span.detailslabel {
font-size: smaller;
font-weight: bold;
}
div.details > p {
line-height: 90%;
word-wrap: break-word;
overflow: visible;
}
div.sliderbtn {
font-size: 50px;
font-weight: 900;
min-height: 300px;
height: 100%;
width: 60px !important;
line-height: 300px;
text-decoration: none;
vertical-align: middle;
text-align: center;
cursor: pointer;
}
https://jsfiddle.net/tjepuh1L/
1.) erase overflow: visible; from div.details and from div.details > p
2.) Define the max-width of div.details as calc(100% - 300px)
change
div.details {
max-width: 100%;
vertical-align: middle;
word-wrap: break-word;
overflow: visible;
}
to
div.details {
max-width: 50%;
vertical-align: middle;
word-wrap: break-word;
overflow: visible;
}
if you use different sizes for your images change max-width in the CSS class of your images aswell to 50%
I have three divs:
.container (display:table),
.left, .right (display:table-cell);
For .left I used 80%, the .right is 20%. In the left div I have many items with percentage width. If I add about 5 items everything work, I can resize the browser window, but when I have about 25 items the right side disappear.
I didn't added the html, because it's too long. Please check the result on JSFiddle. How can I solve this issue?
.container {
border: 1px solid gray;
display: table;
width: 100%;
}
.left {
display: table-cell;
width: 80%;
background: yellow;
}
.right {
display: table-cell;
width: 20%;
background: red;
}
.items {
width: 40%;
height: 100px;
background: blue;
display: inline-block;
margin-right: 15px;
}
.scroll {
width: 100%;
overflow-x: scroll;
white-space: nowrap;
}
If you change the table-layout property to fixed for the .container element, it resolves the issue:
Updated Example
.container {
border: 1px solid gray;
display: table;
table-layout: fixed;
width: 100%;
}
I'm working on a page that can hold very big content. It could easily grow to (and over) 10.000px in width. I simply want my page to stretch along.
This should be very simple, and I can fix it with display: table-cell, but it doesn't 'smell' as the right answer. It feels like a hack. I think I'm missing something crucial.
Fiddle
CSS:
#container { white-space: nowrap; padding: 50px; background-color: green; }
#container > div { display: inline-block; width: 200px; height: 200px; }
#container > div:nth-child(2n+1) { background-color: red; }
body { background-color: #ccc; }
HTML:
<div id="container">
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>
Why isn't the container div stretching to its content?
BODY is correctly stretched, so how do I force my container div to take the width of its parent or children?
try something like this
#container {
background-color: #008000;
display: table;
padding: 50px;
white-space: nowrap;
}
EDITED
#container {
background-color: #008000;
display: inline-block;
padding: 50px;
white-space: nowrap;
}
DEMO
Add overflow-x: scroll; to #container. Is that what you want?
Edit: changed to overflow-x :)
CSS
#container {
background-color: green;
white-space: nowrap;
padding: 50px;
width: auto;
overflow-x: scroll;
}
#container {
background-color: green;
white-space: nowrap;
padding: 50px;
width: auto;
display:table;
}
#container > div {
display: inline-block;
width: 200px;
height: 200px;
display:table-cell;
}
add the line overflow-x: scroll; to your container-css
here is a jsfiddle as well
I have a small issue with a title where I would like text to display on a single line rather than split onto two as im trying to arrange these blocks as a grid
jsFiddle
html
<div class="garage-row">
<a class="garage-row-title" href="/board/garage_vehicle.php?mode=view_vehicle&VID=4">
<div class="garage-title">1996 Land Rover Defender</div>
<div class="garage-image"><img src="http://enthst.com/board/garage/upload/garage_vehicle-4-1373916262.jpg"></div>
</a>
<div class="user-meta">
<b>
Hobbs92
</b>
</div>
</div>
css
#import url(http://fonts.googleapis.com/css?family=Open+Sans);
.garage-row {
border: 1px solid #FFFFFF;
float: left;
margin-right: 5px;
padding: 12px;
position: relative;
width: 204px;
}
.garage-row img{}
.garage-image {
background-position: center center;
display: block;
float: left;
max-height: 150px;
max-width: 204px;
overflow: hidden;
position: relative;
}
.user-meta {
background: none repeat scroll 0 0 #2C3539;
color: #FFFFFF;
float: left;
padding: 10px;
position: relative;
width: 184px;
}
img {
border-width: 0;
height: auto;
max-width: 100%;
vertical-align: middle;
}
.garage-title {
clear: both;
display: inline-block;
overflow: hidden;
}
.garage-row-title {
font-size: 22px;
font-weight: bold;
}
a:link {
color: #43A6DF;
}
font-family: 'Open Sans',sans-serif;
I would greatly appreciate if someone were able to help me get the title into one line rather than two or even fix it so if the title exceeds the width then it gets ellipses.
Add white-space: nowrap;:
.garage-title {
clear: both;
display: inline-block;
overflow: hidden;
white-space: nowrap;
}
jsFiddle
The best way to use is white-space: nowrap; This will align the text to one line.