Develop Reference

CSS/HTML how to show only the first two lines of a flexbox

For a project I need to create a search bar. The search results need to be displayed in a grid. The items should be next to each other and two rows high. If there are more results I need to show a button +32 to display all the results.
The problem I am facing is that I have no idea how to accomplish this. I have used flexbox and flex-wrap in order to get new items to be shown in the next line when they don't fit on the previous one. But I don't know how to only display the first two lines.
.container{
display: flex;
flex-wrap: wrap;
background-color: blue;
max-width: 15rem;
gap: 1rem;
}
.item{
background-color: red;
padding: 0 0.2rem;
}
<div class="container">
<div class="item">
<p>Hello</p>
</div>
<div class="item">
<p>Helllooo</p>
</div>
<div class="item">
<p>Hel</p>
</div>
<div class="item">
<p>Hello</p>
</div>
<div class="item">
<p>Test</p>
</div>
<div class="item">
<p>For</p>
</div>
<div class="item">
<p>Hello</p>
</div>
<div class="item">
<p>Hello</p>
</div>
<div class="item">
<p>Helllooo</p>
</div>
<div class="item">
<p>Hel</p>
</div>
<div class="item">
<p>Hello</p>
</div>
</div>

Here is a quick solution, although it doesn't calculate the length yet.
items = ["Helooo","Testing","Holaaaa","Hiiii","Hello","Greetings fine sir","Welcome","Bonjour","Oi you there"];
let limit = 5; // You will need to calculate this somehow
function display(limit){
document.getElementById("searchContainer").innerHTML = "";
for (let item of items.slice(0,limit)){
document.getElementById("searchContainer").innerHTML += `<div class=item>${item}</div>`;
}
if (items.length > limit){
document.getElementById("searchContainer").innerHTML += `<div class=item onclick="display(${items.length})">+${items.length-limit}</div>`;
}
}
display(limit);
.container{
display: flex;
flex-wrap: wrap;
background-color: whitesmoke;
max-width: 15rem;
gap: 1rem;
}
.item{
background-color: rgb(100,100,200);
padding: 0 0.2rem;
border-radius: 2px;
}
<div class=container id=searchContainer>
</div>

Not able to put divs side by side on Firefox but works on Chrome

With the following markup, I'm able to put two div side by side, as seen on image 1, but only on Chrome. Image 2 shows how Firefox processes the HTML. Is this a known issue I missed? How do I fix this?
<div style="background-color: #ffcc33;">
<div class="entry-content" style="float: left;">
<h3>Full Article: Link</h3>
<div id="summary_headline">
<h3>Summary</h3>
</div>
<?php
the_field('generated_summary');
wp_link_pages( array(
'before' => '<div class="page-links">' . esc_html__( 'Pages:', 'inbox' ),
'after' => '</div>',
) );
?>
<p class="read-more"><?php echo esc_html('Read More', 'inbox'); ?></p>
</div>
<div style="float: left; background-color: #eee;">
<div id="wordmap_display" style="background-color: #a0a0a0;" >
<h3>Word Map</h3>
<div id="wordmap_chart"></div>
</div>
<div id="sa_results_display" style="background-color: #f5baff;">
<h3>Sentiment Analysis Results</h3>
<canvas id="sa_chart"></canvas>
</div>
<div style="clear: both;"></div>
</div>
</div>
CSS
.page .post-content .entry-content, .single-post .post-content .entry-content {
height: auto;
overflow: hidden;
background: #42ffec;
width: 60%;
}
.post-content .entry-content {
height: 60vh;
overflow: hidden;
position: relative;
text-align: justify;
}
div {
display: block;
}
EDIT: Got it to work. I set my outer most div to overflow: hidden and from my second inner div, removed float:left, and added overflow:hidden

Use display: flex property. It is supported in major browsers.
.main-container {
background-color: #ffcc33;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.more-details {
float: left;
background-color: #eee;
}
<div class="main-container">
<div class="entry-content" style="float: left;">
<h3>Full Article: Link</h3>
<div id="summary_headline">
<h3>Summary</h3>
</div>
Dynamic markup from PHP
<p class="read-more">Read More</p>
</div>
<div style="more-details">
<div id="wordmap_display" style="background-color: #a0a0a0;" >
<h3>Word Map</h3>
<div id="wordmap_chart"></div>
</div>
<div id="sa_results_display" style="background-color: #f5baff;">
<h3>Sentiment Analysis Results</h3>
<canvas id="sa_chart"></canvas>
</div>
<div style="clear: both;"></div>
</div>
</div>

How to align images in card with dynamic title?

I will have several different cards with dynamic titles coming from the backend. What I need is to align pictures in a same line, no matter how long the title is, it should be aligned based on the longest title. Here is the picture bellow what I need, and here is the JSfiddle link to the code so far.
This is how it should look like
.wrapper {
width: 100%;
display: flex;
}
.card{
text-align: center;
width: 33%;
background: pink;
margin-right: 10px;
padding: 20px 5px;
}
.image {
margin-top: 20px;
}
<div class="wrapper">
<div class="card">
<div class="head">
<div class="title">
Hello
</div>
<div class="image">
<img src="https://www.freepnglogos.com/uploads/netflix-red-logo-circle-png-14.png" />
</div>
</div>
</div>
<div class="card">
<div class="head">
<div class="title">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div class="image">
<img src="https://www.freepnglogos.com/uploads/netflix-red-logo-circle-png-14.png" />
</div>
</div>
</div>
</div>

You need to incorporate flexbox into the children and then force the image to always be at the bottom of the column.
Note...this only works when there are two children...aligning multiple children is not fully supported see Align child elements of different blocks
.wrapper {
width: 100%;
display: flex;
}
.card {
text-align: center;
width: 33%;
background: pink;
margin-right: 10px;
padding: 20px 5px;
display: flex;
flex-direction: column;
}
.title {
flex: 1;
}
.image {
margin-top: auto;
}
.head {
display: flex;
flex: 1;
flex-direction: column;
}
<div class="wrapper">
<div class="card">
<div class="head">
<div class="title">
Hello
</div>
<div class="image">
<img src="https://www.freepnglogos.com/uploads/netflix-red-logo-circle-png-14.png" />
</div>
</div>
</div>
<div class="card">
<div class="head">
<div class="title">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div class="image">
<img src="https://www.freepnglogos.com/uploads/netflix-red-logo-circle-png-14.png" />
</div>
</div>
</div>
</div>

putting 2 images side by side with no space and centered

I am trying to get 2 images that are side by side centered on the page and I am completely lost. I've included align="center" in div and it does nothing and I have tried positioning absolute and it kicks that image to center but other is still margined left. I have included my code below for you to see. I'm sure it's fairly easy and my brain is just stuck clocking today. Any help would be much appreciated. Thanks
<div>
<div class="item">
<contentful-image url="#Model.EventImages[0].File.Url" #*width="300" height="300" *# style="float:left; width: 30%; margin-bottom: 0.5em; position: absolute " />
</div>
<div class="item">
<contentful-image url="#Model.EventImages[1].File.Url" #*width="300" height="300"*# style="float:left; width: 30%; margin-bottom: 0.5em";/>
</div>
</div>

You can try these two examples and see if any solves your problem, though presented with the img element.
If you want the body element to be the parent, you can do something like this:
* {margin:0;padding:0;box-sizing:border-box}
html, body {width:100vw;height:100vh}
body {
display: flex;
justify-content: center;
align-items: center;
}
/* Add this if you want to place them horizontally. */
/*
div {
display: flex;
}
*/
img {
display: block;
}
<div>
<div class="item">
<img src="http://via.placeholder.com/300x300" alt="img1">
</div>
<div class="item">
<img src="http://via.placeholder.com/300x300" alt="img2">
</div>
</div>
And if you want the div to be the parent, like this:
* {margin:0;padding:0;box-sizing:border-box}
html, body {width:100vw;height:100vh}
.parent {
display: flex;
justify-content: center;
align-items: center;
/* flex-direction: column; */ /* Add this if you want to place them vertically. */
width: 100vw;
height: 100vh;
}
img {
display: block;
}
<div class="parent">
<div class="item">
<img src="http://via.placeholder.com/300x300" alt="img1">
</div>
<div class="item">
<img src="http://via.placeholder.com/300x300" alt="img2">
</div>
</div>
Where the .parent takes full width & height of the viewport.

Use CSS class instead of inline CSS your CSS goes as follows:
CSS for image tag:
.myImg {
display: inline-block;
margin-left: auto;
margin-right: auto;
height: 30px;
}
CSS for the div you have to contain the image:
.image-container{
display: inline-block;
}
Now the CSS to centre your image:
#image{
text-align:center;
}
Finally how to use it in html:
<div id="images">
<div class="image-container">
<img class="myImg" alt="No image" src="your_image_url"/>
</div>
<div class="image-container">
<img class="myImg" alt="No image" src="your_image_url"/>
</div>
</div>​
<html>
<head>
<style>
.myImg {
display: inline-block;
margin-left: auto;
margin-right: auto;
height: 30px;
}
.image-container{
display: inline-block
}
#images{
text-align:center;
}
</style>
</head>
<body>
<div id="images">
<div class="image-container">
<img class="myImg" alt="No image" src="http://shlesha.co.in/images/demo/logo/logo-blue-white-trans-249x80.png"/>
</div>
<div class="image-container">
<img class="myImg" alt="No image" src="http://shlesha.co.in/images/demo/logo/logo-blue-white-trans-249x80.png"/>
</div>
</div>​
</body>
</html>
Here "display: inline-block" helps you to display two or more images to be displayed side by side and margin as auto helps you to automatically adjust your margin irrespective of the screen size
I hope this solves your need for any further query comment below.

try using flex-box, it's pretty straight forward. Set display:flex for the parent, then you can align the children with align-items: center.
html like:
<div class="parent">
<div class="item">
<contentful-image url="" />
</div>
<div class="item">
<contentful-image url="" />
</div>
</div>
and css like:
.parent {
display: flex;
align-items: center;
}

Try creating parent and child div like this:
.parent-container {
display: flex;
-webkit-flex-wrap: nowrap;
}
.child-container{
padding: 10px;
}
<div class="parent-container">
<div class="child-container">
<img alt="First Image" src=""/>
</div>
<div class="child-container">
<img alt="Second Image" src="" />
</div>
</div>

Make divs on same row the same height - Dynamic Content

I am working on an application that generates dynamic content and displays them on floating divs. Each div takes 49% width of the page. The problem I'm running into is that the height of the divs vary depending on the content.
What I'm looking to do is make the divs on the same row the same height. Any suggestions?
.item {
background: #c4c4c4;
width: 49%;
border: 1px solid black;
float: left;
}
<div id="container">
<div class="item">
Test
</div>
<div class="item">
Hello.
Sample <br>
Content <br>
</div>
<div class="item">
Test<br>
Sample Content
</div>
<div class="item">
Test
</div>
</div>

Using CSS3 flexbox to make the #container adapt flexible box layout.
Default value of flex-wrap is nowrap so it aligns in a single row. Use flex-wrap: wrap to create multiple rows based on item's width.
Current browser support for Flexbox is pretty good: Can I use Flexbox?
#container {
display: flex;
flex-wrap: wrap; /* Wrap after the items fill the row */
/* Safari specific rules */
display: -webkit-flex;
-webkit-flex-wrap: wrap;
}
.item {
background: #c4c4c4;
border: 1px solid black;
width: 49%;
}
<div id="container">
<div class="item">
Test
</div>
<div class="item">
Hello. Sample
<br>Content
<br>
</div>
<div class="item">
Test
<br>Sample Content
</div>
<div class="item">
Test
</div>
</div>

Use display: table on the containing div, and display: block on your "table cell" divs.

Another answer involves using the display: table property in CSS. It is similar to table scaffolding, but allows much more flexibility with CSS and has more browser support than flexbox.
HTML:
<div id="container">
<div class="row">
<div class="item">
Test
</div>
<div class="item">
Hello.
Sample <br>
Content <br>
</div>
</div>
<div class="row">
<div class="item">
Test<br>
Sample Content
</div>
<div class="item">
Test
</div>
</div>
</div>
CSS:
#container {
width: 100%;
display: table;
}
.row {
display: table-row;
}
.item {
background: #c4c4c4;
width: 49%;
box-sizing: border-box;
border: 1px solid black;
display: table-cell;
}
Fiddle:
http://jsfiddle.net/q5jyfuy6/

You can add like height:40px; in your .item class to make height of the divs independent of the content.
.item {
background: #c4c4c4;
width: 49%;
border: 1px solid black;
float: left;
height:40px;
}