I am trying to display 2 values on the same row and give the one on the right priority to grow (it is a mobile app and needs to detect the width of the screen and "squash" the left cell to be smaller.
Here is my attempt: http://jsfiddle.net/rodneyjoyce/TxBhD/
HTML
<div id="screen">
<div id="leftDesc">This is a Long Description</div>
<div id="rightDesc">1000</div>
</div>
CSS
#screen
{
width: 200px;
}
#leftDesc
{
display: inline-block;
overflow: hidden;
float: left;
height: 20px;
max-width:160px;
color: blue;
}
#rightDesc
{
float: right;
display: inline-block;
text-align: right;
color: red;
}
What should happen: Increase "1000" to "1000 000". Blue text should chop off the end of the word "Description" and the red and blue text should stay on the same line.
Disclaimer: I am not very good at CSS - in XAML I use the * value on width so that a cell auto-grows and shrinks the others.
I do not want to use Javascript or JQuery.
I'm not sure if you can dynamically change the size of your floated elements with CSS based on the content, but part of the problem can be solved with:
Adding to #leftDesc:
text-overflow:ellipsis;
white-space:nowrap;
The white-space property keeps the text on one line; text-overflow should be pretty self-explanatory.
JSFiddle
Use the flexible box layout:
#screen
{
width: 200px;
display: -webkit-flex;
display: -moz-flex;
display: flex;
}
#leftDesc
{
overflow: hidden;
height: 20px;
color: blue;
white-space:nowrap;
}
#rightDesc
{
text-align: right;
color: red;
}
I've removed your floats and your inline-blocks, and added display: flex to get the boxes to behave.
I've also added white-space:nowrap; to make sure the description gets cut off, like you've asked.
I've also removed max-width:160px;, because it didn't appear to have any effect in this scenario.
Keep in mind that this will not work in IE.
Related
My client is requesting a site with paragraphs that are centered horizontally, with poems written in a narrow column. This column should change width depending on the length of the words on the line.
In effect, the artistically-written width of the letters taken up by the text should determine the width of the column, so every page looks centered. Each poem (therefore, each page) may have a different number of characters per line. Is this possible??
IE:
"Mary had a little lamb
little lamb, little lamb,
Mary had a little lamb,
its fleece was white as snow" <- The div should be only as wide as the longest width of text in the poem (here it is the last line), and should be flexible depending on whether words are added or removed, or a different font is used.
I have tried to set this up like this with inline-flex:
.one {
background: grey;
display: inline-flex;
margin: 0 auto;
}
p {
overflow: hidden;
white-space: nowrap;
}
.centered {
text-align: center;
}
<div class="centered">
<div class="one">
<p>Here is some text for div 1 depending on the size of the div.</p>
</div>
</div>
Code: https://codepen.io/Clare12345/pen/rzRNmK
But the issue I'm having is that some of the paragraphs (ie lines in the poem) are displaying next to each other rather than one above the other. clear:both didn't work.
Any ideas?
Edit: Here's a screenshot of what's happening: https://www.dropbox.com/s/kxtiuuiptstes1i/Screen%20Shot%202017-09-03%20at%2010.11.24%20AM.png?dl=0
Edit 2: The answer below was almost right. Here's the CSS code that is working:
(The website is using WordPress, and the .centered div is inside the .entry div.)
.postid-85 .entry {
text-align: center;
}
.centered {
display: inline;
}
.one {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
}
.one p {
text-align: left;
}
Sorry for all the edits. It is working now!
.one {
background: grey;
display: inline-block;
margin: 0 auto;
}
.centered {
display: flex;
}
This is my code but I want the text to only have background color behind it, and not stretch across the entire screen? Any ideas?
.section_title {
background-color: orange;
text-align: center;
margin: 0px auto;
}
HTML is
<div class="col-md-12">
<div class="section_title">
<h2>Choose a Pack to Print</h2>
</div>
</div>
An option is adding display: inline-block; to the CSS of the text element.
One problem I found with display: inline-block; is it clears floats incorrectly. Instead, I use width: fit-content;
.highlight {
background: yellow;
padding: 0.5em;
width: fit-content;
}
<h1 class="highlight">Highlight for text only!</h1>
<h1 class="highlight">Highlight me too!</h1>
There's a few ways to do this, but probably the best way is to make the h2 inline or inline-block.
Using inline-block will allow you to set width/height.
.section-title {
text-align: center;
}
.section-title h2 {
display: inline-block;
}
The other way to do this is to set a width on the h2 and set the margin to auto;
.section-title h2 {
margin-left: auto;
margin-right: auto;
width: 50%; /* for example */
}
If you want all your headings to be a set width, I'd choose the second one (allowing for text to wrap). If you want the box to be flexible and hug the contents, I'd use the first.
I have been searching for an answer for this for days now and no solution seems to be the correct one for my needs. Please help!
I have two divs for which I want to fill 100% width of the browser, and have more of these which will stack to fill the height. I want the text in each of these (which is being generated from javascript ) to be vertically aligned.
I have also tried using display:table-cell and it works great in all ways, however I do not have the ability to set the cell width as a fixed %, and I need to add html markup which seems to limit me in using certain media queries later on.
How can I vertically align text using inline-block?
Im having trouble making a fiddle but this is close: http://jsfiddle.net/z4bj14op/
Here is my CSS
html, body {
margin: 0;
padding: 0;
height: 100%;
overflow-y: hidden;
font-family: helvetica;
}
#status {
width: 100%;
font-size: 0;
}
#line0, #status0 {
display: inline-block;
width: 50%;
vertical-align: middle;
height: 10%;
}
h2 {
font-size: 18px;
}
#line0 {
background-color: #B36305;
color: white;
}
#status0 {
background-color: black;
color: white;
}
And the HTML
<div id ="status">
<div id="line0"></div>
<div id="status0"></div>
</div>
There is an article from Steven Bradley 6 Methods For Vertical Centering With CSS: http://www.vanseodesign.com/css/vertical-centering/
Which solution would be the best depends on your requirements. I think the Absolute Positioning and Negative Margin way could be the solution you need, as your container have a defined height.
When using display:inline-block;vertical-align:middle the element is only vertically centered to the other inline-elements of the current row.
is this what you want ?
JSfiddle Example
If you want both of the divs to be 100% in their width that impossible ! otherwise the rest of the div will hidden by the other one
clarify more what's needed ..
<div id ="status">
<div id="line0"><h2>Bakerloo</h2></div>
<div id="status0"><h2>Good Service</h2></div>
</div>
css code:
#line0{
background:pink;
width:50%;
display: inline-block;
}
#status0{
background:red;
width:49%;
display: inline-block;
}
Why are you using display: inline-block? must you use this way? try to put float: left instead display: inline-block inside block #line0,#status0 and after you can work with text-something else
You Can try this
#line0{
background:pink;
width:50%;
display: inline-block;
float:left;/*added*/
}
#status0{
background:red;
width:50%;
display: inline-block;
}
DEMO
So I have this strange problem, I have two div on one line (display:inline-block) and the first div appears on hover in a sliding effect. For this animation I need to set overflow:hidden, but it seems to break the my page.
I made a demo on JSFiddle
Have you ever face this problem ?
Thank you
NOTE: IE8+ compatible hints or solutions would be a huge plus
Code
HTML
<div class="container">
<div class="hello NoOverflow">Hello</div><div class="textWrapper">mytext</div>
</div>
<br>
<div class="container">
<div class="hello">Hello</div><div class="textWrapper">mytext</div>
</div>
CSS
.container {
background: #000;
color: #FFF;
}
.hello {
display: inline-block;
width: 40px;
background: #F00;
}
.textWrapper {
display: inline-block;
background: #090;
}
.NoOverflow {
overflow: hidden;
}
EDIT
For those who want the hover animation : JSFiddle Updated
You will see my problem by hovering the 2nd container (the JQuery "animate" call add a "overflow: hidden" property)
You need to specify vertical-align: top for your inline-block child elements.
When you specify overflow: hidden, you are triggering a new block formatting context, and its bottom edge will align with the baseline of the following inline element.
See demo: http://jsfiddle.net/audetwebdesign/7SZkN/
The relevant CSS to modify is:
.NoOverflow {
overflow: hidden;
vertical-align: top;
}
There is pretty much CSS2 so it should work fine in IE8+ (any browser that supports inline blocks).
Have you tried to float them left.
.container {
background: #000;
color: #FFF;
}
.hello {
/*display: inline-block;*/
float:left;
width: 40px;
background: #F00;
}
.textWrapper {
/*display: inline-block;*/
float:left;
background: #090;
}
.NoOverflow {
overflow: hidden;
}
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/