I have 3 divs (example below):
<ul>
<div class="parent">
<li>
<div>
Lorem Ipsum is simply dummy
</div>
</li>
</div>
<li>
<div class="parent">
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting
</div>
</li>
</div>
</div>
</ul>
And I want to all of them to have the same widths as the longest. The width of the longest should be the same as the text inside it plus some pixel (f.e. + 15px). The text will be changing so width should dynamically changing. Display has to be inline-table.
Is it possible to do something like that in the HTML/CSS?
Yes it is possible using HTML/CSS. Here is the code snippet.
.parent {
display: inline-block;
width: auto;
}
.parent div {
border: 1px solid black;
padding-right: 15px;
}
<div class="parent">
<div>
Lorem Ipsum is simply dummy
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting
</div>
<div>
Lorem Ipsum is simply dummy text of the print
</div>
</div>
As per below code...
ul {
display: inline-block;
}
ul li {
list-style: none;
}
li div {
border: 1px solid black;
padding-right: 15px;
}
Related
I have the bellow code and as a newbie I'm struggling to make the button stay in line at the bottom of the div no matter how long the text above it is. I also want to keep the divs aligned at the top as well. Any help is appreciated.
Thank you!
edit: What I would like to achieve is something like how they did their packages (everything stays in place/buttons at the bottom of the box when the window is made smaller):
https://www.knownhost.com/
.div1{width:90%;height:100%;max-width:1920px;margin:2.5em auto}
.div2{vertical-align:top;width:32%;margin:0 0 2em .5%;display:inline-block}
.image {background-color:#0d0d0d}
.image1{float:left;width:100%;border:1px solid #d7d7d7;margin-bottom: .8em}
.title{color:#55068f;font:20px robotoregular;text-align:center;padding:3em 0 0}
.text{width:85%;margin:1em auto 0;text-align:center;padding-bottom:34px;font:16px robotolight;height:auto;color:#313030;line-height:1.4em}
.button a,.button a:hover{text-decoration:none;margin:0 auto}
.button a{font:19px robotolight;color:#55068f;text-align:center;border:thin solid #55068f;padding:.8em 2em;width:40%}
.button a:hover{color:#0d0d0d;border:thin solid #FFD83A;background-color:#FFD83A}
.button{text-align:center;}
<div class="div1">
<div class="div2">
<div class="image"><img src="" class="image1" alt=""></div>
<div class=content>
<div class=title>Title</div>
<div class=text><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</div>
</div>
<div class=button><a href="" class=custom_btn>find out more</a></div>
</div>
<div class="div2">
<div class="image"><img src="" class="image1" alt=""></div>
<div class=content>
<div class=title>Title</div>
<div class=text><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy</div>
</div>
<div class=button><a href="" class=custom_btn>find out more</a></div>
</div>
<div class="div2">
<div class="image"><img src="" class="image1" alt=""></div>
<div class=content>
<div class=title>Title</div>
<div class=text><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</div>
</div>
<div class=button><a href="" class=custom_btn>find out more</a></div>
</div>
</div>
Did you mean something like that? :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
.div1{
width:90%;
margin:2.5em auto;
}
.div2{
vertical-align:top;
width:32%;
margin:0 0 2em .5%;
display:inline-block;
position: relative;
height: 100%;
}
.image {
background-color:#0d0d0d
}
.image1{
float:left;
width:100%;
border:1px solid #d7d7d7;
margin-bottom: .8em
}
.title{
color:#55068f;
font:20px robotoregular;
text-align:center;
padding:3em 0 0
}
.text{
width:85%;
margin:1em auto 0;
text-align:center;
padding-bottom:34px;
font:16px robotolight;
height:auto;color:#313030;
line-height:1.4em
}
.button a {
background-color: #fff;
}
.button a,.button a:hover{
text-decoration:none;margin:0 auto
}
.button a{
font:19px robotolight;
color:#55068f;
text-align:center;
border:thin solid #55068f;
padding:.8em 2em;
width:40%;
}
.button a:hover{
color:#0d0d0d;
border:thin solid #FFD83A;
background-color:#FFD83A
}
.button{
text-align:center;
}
.content {
position: relative;
overflow-y: auto;
display: inline;
}
.div1 {
position: absolute;
top: 20px;
bottom: 20px;
left: 0;
right: 0;
}
.div2 {
height: 100%;
}
.div2-wrap {
display: block;
height: 90%;
overflow-x: hidden;
overflow-y: auto;
}
.div2 .image {
height: 40%;
}
.div2 .content {
height: 50%;
}
.div2 .button {
height: 10%;
padding: 10px 0;
}
.div2 .button a {
display: inline-block;
margin-top: -6px;
}
#main {
position: absolute;
top: 100%;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2">
<div class="div2-wrap">
<div class="image"><img src="" class="image1" alt=""></div>
<div class=content>
<div class=title>Title</div>
<div class=text><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 1500sLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500sLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500sLorem 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</p></div>
</div>
</div>
<div class=button><a href="" class=custom_btn>find out more</a></div>
</div>
<div class="div2">
<div class="div2-wrap">
<div class="image"><img src="" class="image1" alt=""></div>
<div class=content>
<div class=title>Title</div>
<div class=text><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy</p></div>
</div>
</div>
<div class=button><a href="" class=custom_btn>find out more</a></div>
</div>
<div class="div2">
<div class="div2-wrap">
<div class="image"><img src="" class="image1" alt=""></div>
<div class=content>
<div class=title>Title</div>
<div class=text><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</p></div>
</div>
</div>
<div class=button><a href="" class=custom_btn>find out more</a></div>
</div>
</div>
<div id="main">
<p>Put your content here</p>
</div>
</body>
</html>
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 have kinda complex situation here (at least complex for me). Attached a fiddle to show how I was trying to accomplish this.
I wanted to position the speech bubble in the center of the black line of the yellow image. (shown in fiddle).
Also, when I go down to smaller devices the text flows beneath the speech bubble. (you can re-size the window and see)
All of these must be shown at a 100 vh height meaning, users need not scroll to see the bubble as well as image.
Fiddle Link to show what I was doing
<div class="container" id="about_container">
<div class="row" id="row_about_1">
<div class="col-lg-2 col-md-2 col-xs-2 col-sm-2"></div>
<div class="col-lg-8 col-md-8 col-xs-8 col-sm-8 bubble">
<div class="abt_txtcontainer">
<p class="abt_maintext">Heading</p>
<p class="abt_subtxt">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
</p>
<p class="abt_maintext">Heading</p>
<p class="abt_subtxt">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
</p>
<p class="abt_maintext">Heading</p>
<p class="abt_subtxt">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
</p>
</div>
</div>
<div class="col-lg-2 col-md-2 col-xs-2 col-sm-2"></div>
</div>
<div class="row" id="row_about_2">
<div class="col-lg-2"></div>
<div class="col-lg-8">
<img src="http://i.imgur.com/5T5N5Vn.png" class="about_bg img-responsive">
</div>
<div class="col-lg-2"></div>
</div>
</div>
Try this code:
.bubble {
position: relative;
z-index: 1;
/*width: 80%;*/
height: auto;
/* margin-left:12.5%;*/
padding: 5%;
background: #2e3c6f;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
color:darkgrey;
}
.bubble:after {
content: '';
position: absolute;
border-style: solid;
border-width: 32px 21px 0;
border-color: #2e3c6f transparent;
display: block;
width: 0;
z-index: 1;
margin-left: -10.5px;
bottom: -32px;
left: 50%;
}
.about_bg {
width: 100%;
height: auto;
}
#about_container {
height: 100vh;
margin-top: 2.5%;
}
#row_about_1 {
height: 80vh;
}
#row_about_2 {
height: 20vh;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container" id="about_container">
<div class="row" id="row_about_1">
<div class="col-lg-2 col-md-2 col-xs-2 col-sm-2"></div>
<div class="col-lg-8 col-md-8 col-xs-8 col-sm-8 bubble">
<div class="abt_txtcontainer">
<p class="abt_maintext">Heading</p>
<p class="abt_subtxt">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
</p>
<p class="abt_maintext">Heading</p>
<p class="abt_subtxt">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
</p>
<p class="abt_maintext">Heading</p>
<p class="abt_subtxt">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
</p>
</div>
</div>
<div class="col-lg-2 col-md-2 col-xs-2 col-sm-2"></div>
</div>
<div class="row" id="row_about_2">
<div class="col-lg-2"></div>
<div class="col-lg-8">
<img src="http://i.imgur.com/5T5N5Vn.png" class="about_bg img-responsive">
</div>
<div class="col-lg-2"></div>
</div>
</div>
Solution:
1) To set bubble arrow in center:
--> Added position absolute and left value 50%, then added margin-left 10.5% (it's the half width of arrow)
2) Overlapping content:
--> Set bubble height auto (which was 80% previously), now when you'll resize browser it'll not get disturbed.
You probably wanted more fluid solution but with media queries you can adjust image size and position bubble from bottom on larger screens. Just add one more step, eg. on screens > 1200px.
To avoid overflowing I would keep min-height of container...
.about-container {
height: 100vh;
min-height: 580px;
}
.about-container .wrap {
position: relative;
height: 100%;
}
.bubble {
background: #2e3c6f;
color: #fff;
position: absolute !important;
bottom: 150px;
left: 0;
padding: 30px;
border-radius: 15px;
z-index: 1;
}
.bubble:after {
position: absolute;
content: '';
top: 100%;
left: 50%;
height: 0;
width: 0;
border: solid transparent;
border-top-color: #2e3c6f;
border-width: 30px;
margin-left: -30px;
}
p:last-child {
margin-bottom: 0;
}
.about-img {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: 0 auto;
max-width: 320px;
height: auto;
}
<html>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<body>
<div class="container about-container">
<div class="wrap">
<div class="col-xs-12 col-md-8 col-md-offset-2 bubble">
<p>Heading</p>
<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 </p>
<p>Heading</p>
<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</p>
<p>Heading</p>
<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 </p>
</div>
<img src="http://i.imgur.com/5T5N5Vn.png" class="about-img">
</div>
</div>
</body>
</html>
I don't want to use !important or write new rule for every case which can handle with helper classes. For example I want to do it;
HTML
<body id="sameId">
<div class="wrapper">
<div class="article text-center text-bold">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
<div class="article">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
<div class="article">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
<div class="article">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
<div class="article">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
<div class="article">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
</div>
</body>
CSS
/* Helper Classes */
#sameId .text-center {
text-align:center;
}
#sameId .text-bold {
font-weight: bold;
}
/* Article Styles */
.wrapper .article {
padding: 10px;
margin-bottom: 20px;
border: 1px solid #ddd;
text-align:left;
font-weight: normal;
}
Does causes a problem in the future using same id on body tags of all pages for greater css specificity?
https://jsbin.com/tamaxetuse/1/edit?html,css,output
If you are using helper classes like that you can just as well use !important in them or write the style directly in the HTML tag. They are just a substitute for inline styles, so you haven't really separated the content from the styling.
CSS rules should preferably reflect what it is that you want to convey rather than the exact apperance. Example:
<body>
<div class="wrapper">
<div class="article first-article">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
</div>
</body>
CSS:
/* Article Styles */
.wrapper .article {
padding: 5px;
border: 1px solid #ddd;
text-align:left;
font-weight: normal;
}
.wrapper .article.first-article {
text-align:center;
font-weight: bold;
}
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