I want to have a text box of fixed height where the text are aligned bottom. If the text exceeds the height of the box, the text will not be visible. My problem right now is that the overflow:hidden; is not hiding the extra text. I think this is because of the display:table-cell;. If I remove display:table-cell; the overflow:hidden; will work vertical-align:bottom; will no longer work.
EDIT: If the text is very long, the text needs to expand upwards until it has reached 40px. When it reaches 40px, additional text will not be rendered via overflow:hidden;.
http://jsfiddle.net/LxtqJ/
div {
background: yellow;
height: 40px;
width: 250px;
display: table-cell;
vertical-align: bottom;
overflow: hidden;
}
<div>
A SHORT LINK WITH MY TEXT
</div>
<br>
<div>
A VERY...VERY LONG LINK WITH MY TEXT
</div>
Where you need overflow is on <a>
a {
display:inline-block;
}
http://codepen.io/anon/pen/GLidz
(see my comment on question about display:table-XX;)
If this is not totally what you need , you may set a max-height or height to <a>
a {
display:inline-block;
max-height:2.4em /* average 2 lines 1.2 X 2 */
/* or max-height : height of cell ;*/
overflow:hidden;
}
A litlle more explanations:
table-cell will keep expand vertically , that's how it works.
If you set max-height:100%; to a child , and no height for
table-cell, it will grow it will be 100% of unknown.
If you set an height to table-cell like height:100px, it will grow, but if
childs have height or max-height like: 100%, it will be the 100% of those 100px
set in CSS file.
in HTML
<div class="outside">
<div class="insideside">
A SHORT LINK WITH MY TEXT
</div>
</div>
<br>
<div class="outside">
<div class="insideside">
A VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY LONG LINK WITH MY TEXT
</div>
</div>
In CSS
.outside {
background: yellow;
height: 40px;
width: 250px;
overflow: hidden;
}
.insideside {
height: 40px;
display: table-cell;
vertical-align: bottom;
}
Hope this will help you ...
You can do the same thing without editing HTML code
HTML: the same html code
CSS: Like this
div {
background: yellow;
height: 40px;
width: 250px;
overflow: hidden;
}
a {
display: table-cell;
height: 40px;
vertical-align: bottom;
}
maybe this will solve your problem ...
This works:
div {
background: yellow;
height: 40px;
width: 250px;
overflow: hidden;
position: relative;
}
div a{
position: absolute;
bottom: 0;
}
Related
EDIT: The problem is solved, so thanks to everyone who helped!
Original post:
So I am trying to put three divs next to each other (until thus far this part has been successful) with the third and last div to like go to attach to the bottom of the divs, which I have no clue how to do this.
How can I put the third div to attach to the bottom of the middle div and stay within the container?
To show you, I made a quick example. Something like this:
The black colour in the image is the 'body'.
The grey is a container div I put the three other divs in.
Each other box represents a div with what I want them to do and how approx. I want them to be positioned of one another.
I hope this can be done only using html and css. I would appreciate any help.
So far I have this as html for the divs:
#nav,
#textarea,
#contactallpages {
vertical-align: top;
display: inline-block;
*display: inline;
}
#containerpage {
position: relative;
margin: auto;
padding-top: 5%;
padding-bottom: 5%;
background-color: black;
height: 100%;
width: 70%;
}
#centercontainer {
background-color: lightblue;
width: 75%;
margin: 0 auto;
padding: 2%;
}
#nav {
float: left;
background: #aaaaaa;
height: 50%;
width: 15%;
padding: 1%;
}
#textarea {
display: inline-block;
background: #cccccc;
height: 70%;
width: 64%;
padding: 1%;
}
#contactallpages {
background: #bbbbbb;
position: absolute;
width: 15%;
padding: 1%;
bottom: 0;
}
<div id="containerpage">
<div id="centercontainer">
<div id="nav">
<ul>1
</ul>
<ul>2
</ul>
<ul>3
</ul>
</div>
<div id="textarea">
<header>
<h1>Welcome</h1>
</header>
<p>
Text text more text.
</p>
<p>
And more text.
</p>
</div>
<div id="contactallpages">
Random small textbox
<br>More small text.
</div>
</div>
</div>
The way you should lay this out is one container div and 3 children div's set to display: inline-block;
Using display: inline-block; will position all the div's next to each other and allows you to use the vertical-align property.
Now all you would need to do is set the proper vertical-alignment for each of the child div's. You can also set the height to the container div (#myPage) and that is the height that vertical-align will use to determine the positioning.
https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align
#myPage div {
display: inline-block;
width: 100px;
}
#centerFold {
height: 200px;
vertical-align: middle;
background-color: yellow;
}
#navBar, #contact{
height: 100px;
}
#navBar {
vertical-align: top;
background-color: red;
}
#contact {
vertical-align: bottom;
background-color: blue;
}
<div id="myPage">
<div id="navBar">
</div>
<div id="centerFold">
</div>
<div id="contact">
</div>
</div>
Try out flexbox if you do not have too much to worry about backward compatibility. My time at the moment doesn't allow to elaborate, but the essential part would be
#centercontainer {display: flex}
#contactallpages {align-self: flex-end}
Be aware though that some prefixing will be necessary for older browsers and this is only the standards-compliant solution. It does everything you want and you can forget about floating. Adding a
#textarea {flex-grow: 1}
would even allow the center to grow not only in height but in width also.
I am stuck with a CSS problem and I am calling out for your expertise to help me!
I am trying to align text and image. Text and image should be vertically centered, left aligned and fit right next to each other. Both elements should be contained inside the wrapper div that can have varying width.
Below is code that I have so far:
<style>
.cell {
width: 150px;
height: 200px;
box-shadow: 0 0 0.5em #999;
white-space: nowrap;
}
.text_element {
height: 100%;
display: inline-block;
white-space: normal;
float: left;
}
.tooltip_element {
height: 100%;
display: inline-block;
}
</style>
<div class="cell">
<div class="text_element"> This is some random, random text.</div>
<div class="tooltip_element">
<img src="http://www.sainsburysbank.co.uk/library/default/images/life-insurance/icon-tooltip.png"/>
</div>
</div>
Above code produces next image when the wrapper content is 500px:
In the above image elements fit correctly next to each other, but aren't vertically aligned.
For width 200px, we get another problem however:
Here we get empty space between text and image, which shouldn't be there, as image should fit right next to the text. Furthermore image element is now outside the div.
Note that:
wrapper content can have varying width
solution should work in all browsers (no flex solutions)
no JS, only CSS can be used
Thank you very much for your help!
EDIT:
Text should be left aligned!
Ok, here it is:
.cell {
width: 210px;
height: 200px;
box-shadow: 0 0 0.5em #999;
white-space: nowrap;
padding-right: 30px;
}
.text_element {
display: inline-block;
white-space: normal;
float: left;
text-align: justify;
position: relative;
}
.tooltip_element {
position: absolute;
left: 100%;
top: 50%;
transform: translateY(-50%);
}
<div class="cell">
<div class="text_element">This is some random, random text. Moar random text. And moar, moar random text...
<div class="tooltip_element">
<img src="http://www.sainsburysbank.co.uk/library/default/images/life-insurance/icon-tooltip.png" />
</div>
</div>
</div>
Please note I included the tooltip element inside the text element. So I could vertically align them. If they must be siblings, I'd need to wrap them both in a container for vertical centering without flex-box.
If you prefer jsFiddle, to play around with cell width, here it is.
You can use css table https://jsfiddle.net/2Lzo9vfc/247/
CSS
.cell {
width: 100%;
height: 200px;
box-shadow: 0 0 0.5em #999;
word-break:break-all;
}
.text_element {
display: table-cell;
vertical-align: middle;
}
.tooltip_element {
display: table-cell;
vertical-align: middle;
}
I have a 3 column layout which I'm creating using inline-block divs. The left and right columns are fixed widths but the inner column is to hold dynamic content and should expand horizontally as required by it's content width.
That's easy enough... the tricky part is that when the browser window is smaller (horizontally) than the width of the left, right and expanded middle divs, I would like the middle div to scroll and the side columns to stay fixed. In other words, the middle div's size should shrink and grow with window resize but should not grow beyond the available space.
Simply laying out the divs looks like this
https://jsfiddle.net/xzjp5xef/1/
HTML:
<div id="container">
<div id="lcol">
left
</div>
<div id="midcol">
<div id="spacer">
150px spacer
</div>
</div>
<div id="rightcol">
right
</div>
</div>
CSS:
div {
height:200px;
border-style:solid;
display: inline-block;
border-width: 1px;
vertical-align: top;
}
#container{
white-space: nowrap;
}
#lcol {
background-color:blue;
width: 100px;
}
#midcol {
background-color: yellow;
overflow-x: auto;
}
#spacer {
min-width: 150px;
margin: 10px;
height: 20px;
}
#rightcol {
background-color: red;
width:100px;
}
The point of the "spacer" div is to represent the dynamic content which in this case I've fixed to 150px plus padding. So in this case I want the divs to lay out the way they do in the above fiddle, but then when the window is shrunk horizontally, I want the middle div to scroll and the left and right divs to remain fully visible.
That fails because then the window gets a scroll bar but the middle panel remains the same width and the right hand div disappears into the scrolled region.
My next attempt was using absolute positioning
https://jsfiddle.net/n4zrLqh2/
I fixed the left div to the left and the right div to the right and set the middle div's right and left properties. This is a neat trick which allows the middle div to stretch and take up all available space. This works nicely but doesn't create the effect I'm after when the window is big - because I don't want the middle column to expand further than is necessary to contain its content.
In the end I've solved this with javascript but would much prefer a CSS solution.
Edit: To help others see what I'm trying to achieve, here's the complete javascript solution (which I'd prefer to achieve with pure CSS):
HTML:
<div id="lcol">left</div>
<div id="midcol">
<div id="spacer">150px spacer</div>
</div>
<div id="rightcol">right</div>
CSS:
div {
height:200px;
display: inline-block;
vertical-align: top;
margin: 0px;
float:left;
}
body {
white-space: nowrap;
margin:0px;
max-height: 200px;
}
#lcol {
background-color:blue;
width: 100px;
}
#midcol {
background-color: yellow;
overflow-x: auto;
}
#spacer {
min-width: 150px;
height: 20px;
background-color: gray;
margin: 5px;
}
#rightcol {
background-color: red;
width:100px;
}
JAVASCRIPT (with jquery)
function adjustSizes() {
// Sizes of middle divs are dynamic. Adjust once
// built or whenever the viewport resizes
//
var $leftDiv = $('#lcol')
var $milddleDiv = $('#midcol');
var $rightDiv = $('#rightcol');
// 1. Resize middle div to available viewport space
var maxBodyWidth = $(window).innerWidth() - ($leftDiv.outerWidth() + $rightDiv.outerWidth());
$milddleDiv.css('maxWidth', maxBodyWidth);
}
$(window).resize(function () {
adjustSizes();
});
And the fiddle: https://jsfiddle.net/bjmekkgj/2/
I think setting max-width of spacer will solve your problem in case content increases.
Set max-width to calc(100vw - 200px) if all margin and padding are 0. Otherwise adjust the value 200px taking margin, padding into account.
I have created a plunker. Please check if it solves your issue. Try checking after running plunker in spearate window
http://plnkr.co/edit/WG9v0MyiD2hiaZrOA3Yw?p=preview
For the one example you provided, since the left and right columns are positioned absolutely, you should take up the space somehow. I used padding on the middle column, then nested a "content" block inside that represents the visible part of the middle column. Then, I put overflow-x: auto; on the new content block and set a max-width on the overall container to force the new block to shrink.
(In previous edits, I was attempting to do this same thing but with floats instead of absolutely positioned divs)
* { margin: 0px; padding: 0px; }
#container {
box-sizing: border-box;
display: inline-block;
position: relative;
max-width: 100%;
border: 1px solid black;
height: 200px;
}
.column {
box-sizing: border-box;
height: 100%;
}
#left {
position: absolute;
left: 0px;
top: 0px;
bottom: 0px;
width: 100px;
border-right: 1px solid black;
background: blue;
}
#mid {
border: none;
padding: 0px 100px;
}
#mid > .content {
box-sizing: border-box;
background-color: yellow;
overflow-x: auto;
height: 100%;
}
#spacer {
width: 150px;
height: 20px;
}
#right {
position: absolute;
right: 0px;
top: 0px;
bottom: 0px;
width: 100px;
border-left: 1px solid black;
background: red;
}
<div id="container">
<div id="left" class="column">
left
</div>
<div id="mid" class="column">
<div class="content">
<div id="spacer">
150px spacer
</div>
</div>
</div>
<div id="right" class="column">
right
</div>
</div>
...and in JSFiddle form
flexbox can do that.
div {
border-style: solid;
border-width: 1px;
}
#container {
height: 200px;
display: flex;
}
#lcol {
background-color: blue;
width: 100px;
}
#midcol {
background-color: yellow;
flex: 1;
overflow-x: auto;
}
#rightcol {
background-color: red;
width: 100px;
}
<div id="container">
<div id="lcol">
left
</div>
<div id="midcol">
</div>
<div id="rightcol">
right
</div>
</div>
JSfiddle Demo (showing overflow effect).
Support is IE10 and up.
Try setting the middle div to have a max width with a percentage so it will get thinner with the screen size:
.midcol {
max-width: 25%;
}
I put a value for the max-width in there for an example, but you can change the value.
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 want to have two divs in a single row with the left div's text getting clipped based on the right div's width(the text in the div is dynamically generated) hence we cannot fix the widths of these divs(the text in the right div must be completely visible whereas the text in the left div can be clipped).This image shows the sample output:
here is the fiddle:
http://jsfiddle.net/UzqLZ/1/
here is the html part of code:
<div class="parent">
<div class="text">This text must be hidden if it is overflowing</div>
<div class="number">88818888.333346</div>
</div>
Can someone help me with this.
How does this look: http://jsfiddle.net/P6Nbg/
I've given the parent position relative and a background colour of white for the number div so it hides the text below.
.parent {
width: 30%;
position: relative;
overflow: hidden;
}
.number {
display: inline-block;
position: relative;
background-color: white;
float:right;
}
.text {
display: inline-block;
position: absolute;
background-color: transparent;
white-space:no-wrap;
overflow:hidden;
float:right;
}
Here is one way of doing it.
You need to add an inner wrapper element around your text as follows:
<div class="parent">
<div class="text">
<div class="inner">This text must be hidden if
it is overflowing</div>
</div>
<div class="number">88818888.333346</div>
</div>
Now use the following CSS:
.parent {
display: table;
width: 30%;
border: 1px dotted blue;
font-size: 1.00em;
line-height: 1.50em;
}
.number {
display: table-cell;
border: 1px dotted blue;
}
.text {
display: table-cell;
}
.inner {
height: 1.50em;
overflow: hidden;
word-break: break-all;
}
Apply display: table to .parent and specify the font-size and line-height.
Apply display: table-cell to .number and .text.
The .inner block will fill up the rest of the width not taken up by .number,
and the text will wrap onto two or more lines. If you specify the height to be one line, then you can use overflow: hidden to hide the extra text.
Using word-break: break-all may be a good idea.
See demo at: http://jsfiddle.net/audetwebdesign/QBQVg/