I have this layout: https://postimg.org/image/74ioib3y7/
The rules of the game are:
The container must be at least 210px wide and 85px high
Row1 should be able to grow as wide as it needs to and wrap words only when the container is as big as its container
Row2 has to be as wide as Row1 => it should wrap words and not stretch the container when the content of Row2 is wider than the content of Row1
I have managed to do everything except 3.
EDIT: JSFiddle
IGNORe THIS MUST HAVE IT TO PASTE JSFiddle
Please help
This should solve your request:
.container {
display: inline-block;
background: aliceblue;
min-width: 210px;
min-height: 85px;
position: relative;
}
.maxim {
position: absolute;
width: 100%;
max-width: 100%;
background-color: lime;
}
<div class="container">
<header>
<strong>12345620</strong>
<span>description</span>
</header>
<span class="maxim">
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum oposum
</span>
</div>
<div class="container">
<header>
<strong>1234567890</strong>
<span>description and more text is here also possible</span>
</header>
<span class="maxim">
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum oposum
</span>
</div>
Related
I am trying to make a side-by-side table with 2 divs column, that contains many <p> elements inside.
That would be easy if these two Divs and their contents are horizontal, but in this case, they are vertical, two sides' heights are not the same.
Is there any way to do it without using JavaScript?
*EDIT:
The reason I put two separate divs side by side is that I put new content to them using JavaScript Prepend.
On the left side are the English texts, and on the right side are translated texts.
It would be easier for me if the English texts were together inside a div and the same for the translated texts.
I have done it by using Javascript and setting one side's style. height = the other side's clientHeight, it would be much better if I was able to do this with only CSS and HTML
for (let i = 0; i < document.querySelectorAll('#div1 p').length; i++) {
document.querySelectorAll('#div1 p')[i].style.height = "auto";
document.querySelectorAll('#div2 p')[i].style.height = "auto";
if (document.querySelectorAll('#div1 p')[i].clientHeight > document.querySelectorAll('#div2 p')[i].clientHeight )
{
document.querySelectorAll('#div2 p')[i].style.height = document.querySelectorAll('#div1 p')[i].clientHeight-3+'px'
}
else
{
document.querySelectorAll('#div1 p')[i].style.height = document.querySelectorAll('#div2 p')[i].clientHeight-3+'px'
}
}
body {
font-family: Consolas,Menlo,"courier new",monospace;
font-size: 18px;
}
.grid-container {}
#div1{
width: 50%;
display: table-cell;
}
#div2{
width: 50%;
display: table-cell;
}
p{
margin-top: 0px;
padding-bottom: 3px;
padding-left: 3px;
margin-bottom: 6px;
border-bottom: 1px dashed #0000ff00;
border-color: gray;
}
<div class="grid-container">
<div id="div2" class="skiptranslate">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley.</p>
<p> the second cell</p>
<p> the 3rd cell </p>
<p> the 4th cell </p>
</div>
<div id="div1" >
<p> I want this cell's height same as the left "lorem ipsum" cell </p>
<p> the second cell</p>
<p> the 3rd cell</p>
</div>
</div>
Here how i would do it, with rows taking 100% and cells taking 50%
.cell {
width: 50%
}
.row {
width: 100%;
height: auto;
display: flex;
margin-top: 0px;
padding-bottom: 3px;
padding-left: 3px;
margin-bottom: 6px;
border-bottom: 1px dashed #0000ff00;
border-color: gray;
}
body {
font-family: Consolas, Menlo, "courier new", monospace;
font-size: 18px;
}
<div class=" grid-container">
<div class="row">
<div class="cell">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley.</p>
</div>
<div class="cell">
<p> I want this cell's height same as the left "lorem ipsum" cell </p>
</div>
</div>
<div class="row">
<div class="cell">
<p> the second cell</p>
</div>
<div class="cell">
<p> the second cell</p>
</div>
</div>
<div class="row">
<div class="cell">
<p> the 3rd cell </p>
</div>
<div class="cell">
<p> the 3rd cell </p>
</div>
</div>
<div class="row">
<div class="cell">
<p> the 4th cell </p>
</div>
<div class="cell"></div>
</div>
</div>
just to add to LK77s good answer - is there any reason why you can't just use a <table> element here? That's the simplest solution.
failing that, a more modern solution is to refactor the HTML to take out the column divs, then you could use display: flex or display: grid to accomplish this:
.flex-table {
display: flex;
flex-wrap: wrap;
width: 600px;
border: 1px solid;
}
.flex-table p {
margin: 0;
flex: 0 0 50%;
max-width: 50;
}
.grid-table {
display: grid;
grid-template-columns: repeat(2, 1fr);
width: 600px;
border: 1px solid;
}
.grid-table p {
margin: 0;
padding: 5px;
}
/**
Just to show the different columns
**/
.table p:nth-child(2n) {
background-color: rgba(255,0,0,.5);
}
<div class="flex-table table">
<p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
<p>Lorem ipsum second cell</p>
<p>Lorem ipsum third cell</p>
<p>Lorem ipsum fourth cell</p>
<p>Lorem ipsum fifth cell</p>
<p>Lorem ipsum sixth cell</p>
</div>
<div style="margin-bottom: 30px"></div>
<div class="grid-table table">
<p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
<p>Lorem ipsum second cell</p>
<p>Lorem ipsum third cell</p>
<p>Lorem ipsum fourth cell</p>
<p>Lorem ipsum fifth cell</p>
<p>Lorem ipsum sixth cell</p>
</div>
I got the following situation:
My page contains a panel that looks like that in a normal situation.
Text 1 Text text lorem ipsum lorem ipsum lorem ipsum
Here's the HTML:
<div class="ui-g">
<div class="ui-g-6">
Text 1
</div>
<div class="ui-g-6">
Text text lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
</div>
</div>
Now, on low resolutions, I want the columns to reflow to a single one what I accomplished by using flexbox:
.ui-g {
display: flex;
flex-wrap: wrap;
}
.ui-g > div {
min-width: 180px;
max-width: 100%;
box-sizing: border-box;
margin: 0 auto;
}
This means: normally, both columns have a width of 50% (because of ui-g-6) and a min-width of 180px -> if the panel has a lower resolution than ~360px, the reflow happens.
My problem's the following:
When lowering the resolution, the page changes from
Text 1 Text text lorem ipsum lorem ipsum lorem ipsum
to
Text 1 Text text lorem ipsum lorem ipsum
lorem ipsum
and after the reflow:
Text 1
Text text lorem ipsum lorem ipsum
lorem ipsum
As you can see, the content is now unnecessarily narrow, I'd prefer it to look like that:
Text 1
Text text lorem ipsum lorem ipsum lorem ipsum
I know about flex-grow, but this overrides any width attribute and totally messes up my page layout on normal resolutions. Also, it didn't have the desired effect anyway.
Any tips are much appreciated!
Using flex-basis instead of min-width and adding flex-grow should get you there:
.ui-g {
display: flex;
flex-wrap: wrap;
outline: #0FF6 solid;
outline-offset: 3px;
margin: 1em;
}
.ui-g>div {
flex-basis: 180px;
flex-grow: 1;
box-sizing: border-box;
margin: 0 auto;
outline: #F0F6 solid;
outline-offset: 0px;
}
<div class="ui-g">
<div class="ui-g-6">
Text 1
</div>
<div class="ui-g-6">
Text text lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
</div>
</div>
<div class="ui-g" style="width: 300px">
<div class="ui-g-6">
Text 1
</div>
<div class="ui-g-6">
Text text lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
</div>
</div>
I might have misunderstood your question, but :
.ui-g {
display: flex;
flex-wrap: wrap;
}
.ui-g > div {
min-width: 180px;
max-width: 100%;
box-sizing: border-box;
margin: 0 auto;
}
#media only screen and (max-width: 360px) {
.ui-g {
white-space: nowrap; /* text wont go to next line if it refactors */
}
}
I am building a message box with title, description, and answers.
I have been struggling for days with that, even played with a Codepen, but can't figure to handle this correctly.
I need:
Title to expand to a maximum of 300px before scrolling
Description to expand to a maximum to left space if no answer (or few), distribute space say 80% of space otherwise (I will add a button to hide this space) before scrolling also
Fixed height for message number title
Messages div to expand to a maximum space left
Input area to stay at bottom and able to size up if any user input (again let's say 20% before scrolling?)
Codepen link
<div class="demoContainer">
<div class="page">
<div class="title">
<h1>My awesome title that is so long i will move everything down</h1>
<button>Some stuff to click</button>
</div>
<div class="row">
<div class="colLeft">
<div class="description">
<h2>Author</h2>
<p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsumlorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsumlorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsumlorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsumipsum lorem ipsum lorem ipsum lorem ipsumlorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsumipsum lorem ipsum lorem ipsum lorem ipsumlorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsumipsum lorem ipsum lorem ipsum lorem ipsumlorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
</div>
<div class="between">
<p>Answers</p>
</div>
<div class="messages">
<ul>
<li>
toto
</li>
<li>
tAta
</li>
<li>
tAta
tAta
</li>
<li>
tAta
</li>
<li>
tAta
</li>
<li>
tAta
</li>
>
<li>
tAta
</li>
>
<li>
tAta
</li>
>
<li>
tAta
</li>
>
<li>
tAta
</li>
</ul>
</div>
<div class="input">
<textarea placeholder="Input height adapt to size until a maximum"></textarea>
</div>
</div>
<div class="colRight">
<ul>
<li>
some
</li>
<li>
stuff
</li>
</ul>
</div>
</div>
</div>
<div class="divider"></div>
<div class="page">
<div class="title">
<h1>My awesome short title</h1>
<button>Some stuff to click</button>
</div>
<div class="row">
<div class="colLeft">
<div class="description">
<h2>Author</h2>
<p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
</div>
<div class="between">
<p>Answers</p>
</div>
<div class="messages">
<ul>
<li>
toto
</li>
<li>
tAta
</li>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</ul>
</div>
<div class="input">
<textarea placeholder="Input height adapt to size until a maximum"></textarea>
</div>
</div>
<div class="colRight">
<ul>
<li>
some
</li>
<li>
stuff
</li>
</ul>
</div>
</div>
</div>
</div>
* {
box-sizing: border-box;
}
.demoContainer {
display: flex;
flex-direction: row;
}
.divider {
width: 8px;
}
.page {
height: 600px;
width: 550px;
background-color: lightgrey;
display: flex;
flex-direction: column;
overflow: auto;
}
.title {
display: inline-flex;
justify-content: space-between;
align-items: center;
max-height: 200px;
}
.title button {
width: 90px;
height: 30px;
}
.row {
display: flex;
/*flex: 1 1 100%;*/
min-height: 0;
height: 100%;
}
.colLeft {
flex: 3 1 auto;
min-height: 0;
height: 100%;
border: 1px solid blue;
display: block;
flex-direction: column;
position: relative;
/*align-items: stretch;
align-content: stretch;*/
}
.description {
border: 1px dashed black;
/*flex: 4 1 100%;*/
max-height: 60%;
overflow: scroll;
}
.between {
border: 1px solid green;
height: 1, 1em;
}
.between>p {
margin: 0;
}
.messages {
border: 1px dashed red;
/*flex: 2 100 auto;*/
overflow: scroll;
}
ul {
max-width: 100%;
}
.input {
width: 100%;
min-height: 1rem;
flex: 1 1 3rem;
display: flex;
border: 1px solid yellow;
position: relative;
bottom: 0;
}
.input>textarea {
width: 100%;
}
.colRight {
flex: 1 1 auto;
border: 1px solid black;
min-width: 150px;
overflow: scroll;
}
The one on the right is a short example of what I would like, but remove <br/> to see the problem.
I tried with display: grid, isplay: block display: flex. I can't seem to find anything satisfying my needs.
My question is: is that even possible? With CSS only?
For everyone wondering, i discovered a few things while digging into css.
First of all is you can set a 100% height on a div to take up the free space if another element is in, but if and only if you set the parent element display: flex; !
With that in mind, it comes easier.
After that, I decided to dive into JS as my problem does not seem to be solvable with CSS only.
I took advantage of the "new" position: sticky; property, and my JS can take care of position it top: 0; or bottom: 0; depending on the scrolling position.
CSS Added :
.stickyBottom{
position: sticky;
bottom: 0;
}
.stickyTop{
position: sticky;
top: 0;
}
JS Code added:
var colLeft = document.getElementsByClassName("messagesInput")[0];
colLeft.onscroll = function(){myFunction()};
// Get the navbar
var between = document.getElementsByClassName("between")[0];
var desc = document.getElementsByClassName("description")[0];
// Get the offset position of the navbar
var sticky = between.offsetTop;
//between.classList.remove("stickyBottom")
function myFunction() {
if (colLeft.scrollTop >= sticky) {
between.classList.remove("stickyBottom")
between.classList.add("stickyTop")
} else {
between.classList.add("stickyBottom")
between.classList.remove("stickyTop");
}
}
It ends up in a way better UX than I initially wanted ! :)
CodePen Link updated accordingly.
I've made 3 examples of what I'd like to achieve.
I have 2 divs side by side in a wrapper that has 100% as width, the left div has a width of 100% minus the width of the righter div, the righter div has an auto width.
When the left div text isn't long enough to hit the righter div, the left div should extend till the righter div.
When the content in the left div is too long, it should overflow to a new line, the righter div will keep it's width.
When the content increases in righter div, the left div should adjust its width and overflow if needed.
Is there a way to do this without javascript and preferably without flex?
You can use flex for that:
.wrapper {
background: red;
display: flex;
align-items: flex-start;
}
.left {
background: gray;
flex: 1;
}
.right {
background: green;
width: 150px;
}
<div class="wrapper">
<div class="left">
Lorem ipsum
</div>
<div class="right">
Lorem ipsum
</div>
</div>
Just assign display: flex; to the wrapper DIV - that should do what you want
You can use Flexbox to do this, you just need to set flex: 1 on left div so it takes free width. Also to remove white-space when text wraps you can use word-break: break-all so it breaks on each letter and to make items keep its own height you can add align-items: flex-start Fiddle
.content {
display: flex;
align-items: flex-start;
}
.left {
background: lightblue;
word-break: break-all;
flex: 1;
}
.right {
background: lightgreen;
}
<div class="content">
<div class="left">Lorem ipsum dolor sit amet, consectetur.</div>
<div class="right">loremipsum</div>
</div>
hope this is what your are looking for.
.leftdiv {background: green;flex: 1;}
.container {display: flex;align-items: flex-start;}
.rightdiv {background: red;}
<div class="container">
<div class="leftdiv">
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
</div>
<div class="rightdiv">
hello world
</div>
</div>
</br>
<div class="container">
<div class="leftdiv">
Lorem ipsum Lorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsum
</div>
<div class="rightdiv">
Lorem ipsum Lorem ipsum Lorem
</div>
</div>
I am trying to place elements in my header. I would like to have 3 elements inline - button, image and simple text. The height of the header should be equal height of image. All elements should be centered vertically. Here's my HTML:
<div class="btn">
...
</div>
<img src="image.jpg">
<span style="float:none; display: inline-block; vertical-align: middle">lorem ipsum lorem ipsum</span>
On image "a" I present expected behavior. On image "b" and "c" my results were shown.
So, the expected result is to wrap text if it doesn't fit the page. But it still should be on the right side.
Legend:
red rectangle - button
orange rectangle - image
Does anyone know what styles I should use?
You should make them:
display: inline-block
Here is pretty simple demo:
HTML:
<div class="row">
<div class="btn">...</div>
<img src="http://www.ibm.com/developerworks/data/library/techarticle/dm-0504stolze/test_1.jpg" />
<span>lorem ipsum<br/> lorem ipsum</span>
</div>
CSS:
* {
margin: 0;
padding: 0;
}
.row > * {
display: inline-block;
vertical-align: middle;
}
.btn {
width: 30px;
height: 30px;
background-color: red;
}
Demo
Another way.
HTML:
<div class="row">
<div class="btn">...</div>
<img src="http://www.ibm.com/developerworks/data/library/techarticle/dm-0504stolze/test_1.jpg" /> <span>lorem ipsum<br/> lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsumlorem ipsum lorem ipsum</span>
</div>
CSS:
* {
margin: 0;
padding: 0;
}
.row > * {
display: table-cell;
vertical-align: middle;
}
.btn {
width: 30px;
height: 30p;
background-color: red;
}
.row { display: table-row; }
Demo
Try giving your span a width. That would force the line breaks in your "a" example.
HTML
<div class="header">
<div class="btn">BUTTON</div>
<img src="http://lorempixel.com/200/200" /><span>lorem ipsum lorem ipsum lorem ipsum lorem ipsum</span>
</div>
CSS
.header {
width: 500px;
background: dimgrey;
}
.btn, img, span {
display:inline-block;
vertical-align: middle;
}
span {
width:200px;
text-align: center;
}
http://jsfiddle.net/abN39/1