I am developing a chat system UI, I faced problems with aligning items left and right
I want to display my message on the right and someone else's messages on the left.
Current code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#container {
margin: 5% auto;
width: 40%;
padding: 10px;
margin-bottom: 40px;
border: 1px solid red;
}
.chat {
border: 1px ridge #34495e;
}
.msg-box {
background: green;
width: 50%;
padding: 10px;
}
</style>
</head>
<body>
<div id="container">
<div class="chat">
<p class="border msg-box msg-my">Lorem ipsum, dolor sit amet consectetur, adipisicing elit. Vitae, accusan</p>
<p class="border msg-box">Lorem ipsum, dolor sit amet consectetur, adipisicing elit. Vitae, accusan</p>
</div>
</div>
</body>
</html>
NOTE need just alignment left and right, not styling elements.
Example:
Perhaps this will get you started:
https://codepen.io/riza-khan/pen/dyXjwoW
<div class="chat-container">
<div class="me">Hi! How are you?</div>
<div class="you">Hello! Great, and yourself?</div>
<div class="me">Pretty good! How's the weather on your end?</div>
<div class="you">Getting chilly, winter is almost here :)</div>
<div class="me">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Modi eos nemo totam illum consequuntur hic exercitationem laudantium ab doloribus debitis.</div>
<div class="you">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Modi eos nemo totam illum consequuntur hic exercitationem laudantium ab doloribus debitis.</div>
</div>
.chat-container {
display: flex;
flex-direction: column;
.me,
.you {
margin-top: 1.5rem;
padding: 0.5rem;
border-radius: 0.5rem;
}
.me {
margin-left: auto;
border: solid 1px blue;
max-width: 55%;
}
.you {
margin-right: auto;
border: solid 1px red;
max-width: 55%;
}
}
.chat{
display:flex;
flex-direction:column;
background: #f0f0f0;
width: 400px;
}
.chat_bubble_container{
display:flex;
width: 400px;
}
.chat_bubble_container.incoming{
justify-content: flex-start;
}
.chat_bubble_container.outgoing{
justify-content: flex-end;
}
.chat_bubble_container .chat_bubble{
display:flex;
padding: 4px;
border-radius: 5px;
margin: 5px;
}
.chat_bubble_container.incoming .chat_bubble{
background: #d1d1d1;
}
.chat_bubble_container.outgoing .chat_bubble{
background: #429bd7;
color: white;
}
<div class="chat">
<div class="chat_bubble_container incoming">
<div class="chat_bubble">Hi</div>
</div>
<div class="chat_bubble_container outgoing">
<div class="chat_bubble">Hi</div>
</div>
<div class="chat_bubble_container incoming">
<div class="chat_bubble">Lorem ipsum</div>
</div>
<div class="chat_bubble_container outgoing">
<div class="chat_bubble">Lorem ipsum</div>
</div>
</div>
This was solution :/
.msg-my {
margin-left: auto;
}
Related
I'm making 2 cards in CSS and I want the 2nd one to lay below the 1st one. In order to locate the first card in the middle I created a "card-outer" div, but when I click "inspect element" I see that the height of the outer is more than 900px, and therefore, the 2nd card is +900px lower than the 1st card.
Do you guys have any idea of how can I fix this issue?
It looks like this, and I want only a 50px separation between both:
.card-outer {
display: flex;
justify-content: center;
min-height: 100vh;
}
.card {
width: 500px;
height: 250px;
display: flex;
overflow: hidden;
background: rgb(16, 33, 72);
box-shadow: 0 5px 10px #031e23;
border-radius: 30px;
color: white;
font-family: 'Dosis';
margin-top: 50px;
}
.card .img-card {
background: url(parque.png);
width: 40%;
height: 100%;
background-size: cover;
background-position: 60% 0%;
}
.card .content {
width: 60%;
height: 100%;
display: grid;
grid-template-rows: 50px 150px 50px;
padding: 10px 15px;
}
<div class="card-outer">
<div class="card">
<div class="img-card"></div>
<div class="content">
<div class="titulo">
<h3>Parque Metropolitano</h3>
</div>
<div class="text">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi consectetur, accusamus repellat architecto veritatis quis vel harum molestiae tempore ea illo ut sapiente magnam voluptate.
</p>
</div>
<div class="btn-container">
<button>Sitio web</button>
</div>
</div>
</div>
</div>
Assuming the .card-outer is the wrapper for the layout, use the gap property on your .card-outer to make your 50px separate and use justify and align to get the cards where you want them within the wrapper.
If .card-outer isn't a wrapper, create one using the same technique.
.card-outer {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100vh;
gap: 50px; /*this guy right here */
}
.card {
width: 500px;
height: 250px;
display: flex;
overflow: hidden;
background: rgb(16, 33, 72);
box-shadow: 0 5px 10px #031e23;
border-radius: 30px;
color: white;
font-family: 'Dosis';
margin-top: 50px;
}
.card .img-card {
background: url(parque.png);
width: 40%;
height: 100%;
background-size: cover;
background-position: 60% 0%;
}
.card .content {
width: 60%;
height: 100%;
display: grid;
grid-template-rows: 50px 150px 50px;
padding: 10px 15px;
}
<div class="card-outer">
<div class="card">
<div class="img-card"></div>
<div class="content">
<div class="titulo">
<h3>Parque Metropolitano</h3>
</div>
<div class="text">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi consectetur, accusamus repellat architecto veritatis quis vel harum molestiae tempore ea illo ut sapiente magnam voluptate.
</p>
</div>
<div class="btn-container">
<button>Sitio web</button>
</div>
</div>
</div>
<div class="card">
<div class="img-card"></div>
<div class="content">
<div class="titulo">
<h3>Parque Metropolitano</h3>
</div>
<div class="text">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi consectetur, accusamus repellat architecto veritatis quis vel harum molestiae tempore ea illo ut sapiente magnam voluptate.
</p>
</div>
<div class="btn-container">
<button>Sitio web</button>
</div>
</div>
</div>
</div>
Can someone please help me?!
I'm trying to code a PSD file to HTML and CSS, but I'm struggling with one of the sections. Here's an image of what I want to do:
Click Here
The problem is I don't know how to put the image in the timeline line. I tried to add the image in the ::after psuedo, but I don't think this is the right way of doing that.
This is my HTML Code :
<section class="about">
<div class="wrapper">
<h3>About Us</h3>
<p>Lorem ipsum dolor sit amet consectetur.</p>
<div class="container left">
<div class="content">
<h5>JULY 2010<br> Our Humble Beginnings</h5>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rerum officia labore fugit nihil nulla laboriosam praesentium harum ut, odio ea facere, recusandae reprehenderit repellat.</p>
</div>
</div>
<div class="container right">
<div class="content">
<h5>January 2011<br> Facing Startups Battles</h5>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rerum officia labore fugit nihil nulla laboriosam praesentium harum ut, odio ea facere, recusandae reprehenderit repellat.</p>
</div>
</div>
</div>
</section>
This is my CSS code:
.about .wrapper{
padding: 80px 10%;
text-align: center;
position: relative;
}
.about .wrapper::after{
content: '';
position: absolute;
top: 200px;
bottom: 0;
width: 6px;
background: red;
}
.about h5{
line-height: 1.5;
font-size: 1em;
padding-bottom: .5em;
}
.about .container{
position: relative;
width: 50%;
top: 60px;
margin: 0 0 60px 0;
}
.about .container::after{
content: 'How Can I Add an Image Here in this circle?';
position: absolute;
width: 200px;
height: 200px;
border-radius: 50%;
top: 20px;
right: -104px;
background-color: blue; /* Just because there is no image */
background-image: url(assets/img/about-1.png);
background-repeat: no-repeat;
background-size: cover;
z-index: 2;
}
.left{
text-align: right;
}
.right{
text-align: right;
}
.content{
padding: 30px 0px 80px 0px;
}
.left .content{
padding-right: 140px;
}
.right .content{
padding-left: 140px
}
.right{
text-align: left;
left: 50%;
}
.right:after {
left: -104px;
}
I think this is called a timeline, there is a lot of tutorials talking about how to do something like this, but I don't know how to make the images in the timeline line. Can you please help me do this?
Thanks
To build this, you could use css grid layout (guide: https://css-tricks.com/snippets/css/complete-guide-grid/)
Treat each of the content+image as a row in the layout. And each row as a container for a grid.
You can visually break every row down to 3 columns. One column for left-side content, the second one for the image and the third one for right-side content.
Example css grid for a layout like this:
.grid-container {
display: grid;
grid-template-columns: 1fr 10em 1fr;
grid-template-rows: 1fr;
grid-template-areas: "content-left image content-right";
text-align: center;
}
.content-left { grid-area: content-left; background: lightblue; }
.image { grid-area: image; background: lightgreen; }
.content-right { grid-area: content-right; background: lightblue; }
<div class="grid-container">
<div class="content-left">Left content</div>
<div class="image">Image</div>
<div class="content-right">Right content</div>
</div>
(grid generated with: https://grid.layoutit.com/)
To alternate between content on the left and on the right, you can use css even/odd selectors (How can I style even and odd elements?) to set which grid area is used for the element.
Example:
I've built an example of a timeline layout for this answer which you can find at https://codepen.io/hendrysadrak/pen/VwLEraz
Try this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="main.css" />
<title></title>
</head>
<body>
<section class="about">
<div class="wrapper">
<div>
<h3>About Us</h3>
<p>Lorem ipsum dolor sit amet consectetur.</p>
</div>
<div id="container">
<div class="row">
<div id="col1" class="col right">
<h5>JULY 2010<br> Our Humble Beginnings</h5>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rerum officia labore fugit nihil nulla laboriosam praesentium harum ut, odio ea facere, recusandae reprehenderit repellat.</p>
</div>
<div id="col2" class="col"><img class="img" src="assets/img/about-1.png"/></div>
</div>
<div class="row2" >
<div id="col3" class="col"><img class="img" src="assets/img/about-1.png"/></div>
<div id="col4" class="col left">
<h5>JULY 2010<br> Our Humble Beginnings</h5>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rerum officia labore fugit nihil nulla laboriosam praesentium harum ut, odio ea facere, recusandae reprehenderit repellat.</p>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
in main.css file:
.about .wrapper{
padding: 80px 10%;
text-align: center;
}
.about h5{
line-height: 1.5;
font-size: 1em;
padding-bottom: .5em;
}
.row {
width: 59%;
margin-right: 41%;
display: flex;
}
.row2 {
width: 59%;
display: flex;
margin-left: 41%;
}
.col {
flex:1;
}
.col.left {
text-align: left;
}
.col.right {
text-align: right;
}
#col2 {
flex-basis: 30%;
}
#col1 {
flex-basis: 70%;
}
#col3 {
flex-basis: 30%;
}
#col4 {
flex-basis: 70%;
}
.img {
margin: 10% 5%;
width: 90%;
border-radius: 50%;
}
#container {
background-image: linear-gradient(lightgrey,lightgrey);
background-size: 2px 100%;
background-repeat: no-repeat;
background-position: center center;
}
put this in assets/img/about-1.png
I am trying to create a horizontally scrolling parent div with 4 other child divs inside it. after attempting this I've got stuck on a problem, the parent div gives me a scroll bar that is too big to go through all 4 of the smaller child divs. then it gives me a second scroll bar at the bottom of the page allowing me to scroll over fully but doing this moves the entire page not just the parent div.
see code here https://jsfiddle.net/callum2321/8jq4bmxk/
slider {
top: 250px;
width: 400%;
overflow-x: scroll;
-webkit-overflow-scrolling: normal;
white-space: nowrap;
max-height: 80%;
}
box {
display: inline-block;
white-space: nowrap;
margin: 3% 3%;
width: 20%;
height: 450px;
border: 1px solid white;
}
.box:hover {
box-shadow: 4px 4px 14px 14px darkred;
border-radius: 2px;
}
.col-1 {max-width: 100%; max-height: 45%; background-color:
purple;}
.col-2 {width: 100%; height: 55%; background-color: purple;}
#boxA-pic {
max-height: 40%;
max-width: 100%;
object-fit: cover;
}
#boxA-info {
overflow-y: scroll;
}
#boxA-info h1 {
text-align: center;
color: white;
}
#boxA-info p {
white-space: normal;
}
#boxB-pic {
max-height: 40%;
max-width: 100%;
object-fit: fill;
}
#boxB-info {
overflow-y: scroll;
}
#boxB-info h1 {
text-align: center;
color: white;
}
#boxB-info p {
white-space: normal;
}
#boxC-pic img{
max-height: 40%;
max-width: 100%;
object-fit: fill;
}
#boxC-info {
overflow-y: scroll;
}
#boxC-info h1 {
text-align: center;
color: white;
}
#boxC-info p {
white-space: normal;
}
#boxD-pic img {
max-height: 40%;
max-width: 100%;
object-fit: fill;
}
#boxD-info {
overflow-y: scroll;
}
#boxD-info h1 {
text-align: center;
color: white;
}
#boxD-info p {
white-space: normal;
Yes it is more or less easy to code with flexbox:
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
flex-wrap: nowrap;
background-color: DodgerBlue;
}
.flex-container > div {
background-color: #f1f1f1;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>Flexible Boxes</h1>
<div class="flex-container" style="overflow: auto;">
<div>AAAAA</div>
<div>BBBBB</div>
<div>CCCCC</div>
<div>DDDDD</div>
<div>EEEEE</div>
<div>FFFFF</div>
<div>GGGGG</div>
<div>HHHHH</div>
</div>
</body>
</html>
I've created this super simple approach here:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<style>
.scroll {
overflow-x: auto;
}
.scroll__container {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.scroll__box {
min-width: 90%;
margin-right: 2%;
margin-bottom: 0;
}
</style>
<section class="scroll">
<div class="scroll__container">
<div class="scroll__box">
<h2>Lorem ipsum dolor sit amet.</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Numquam aliquam possimus laudantium delectus similique velit facere temporibus, nisi praesentium veniam!</p>
</div>
<div class="scroll__box">
<h2>Lorem ipsum dolor sit amet.</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Numquam aliquam possimus laudantium delectus similique velit facere temporibus, nisi praesentium veniam!</p>
</div>
<div class="scroll__box">
<h2>Lorem ipsum dolor sit amet.</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Numquam aliquam possimus laudantium delectus similique velit facere temporibus, nisi praesentium veniam!</p>
</div>
<div class="scroll__box">
<h2>Lorem ipsum dolor sit amet.</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Numquam aliquam possimus laudantium delectus similique velit facere temporibus, nisi praesentium veniam!</p>
</div>
</div>
</section>
</body>
</html>
[Codepen reference](https://codepen.io/proochster/pen/RzgPNQ?editors=1100)
Currently experimenting with HTML and CSS and am struggling with this issue.
I'm messing around with a responsive website, and somehow can't make my navigation bar exceed the max-width of my navbar exceed the max-width of my content.
What I'd like it to look like https://imgur.com/a/KAk9mOi
I do really hope anyone can help me.
TIA.
<nav class="navbar">
<ul class="nav-items">
<li class="nav-item nav-item--active">Home</li>
<li class="nav-item">Contact</li>
</ul>
</nav>
.main {
}
.navbar {
padding: 20px;
background-color: #1C2826;
max-width: 100%;
}
.nav-items {
display: flex;
justify-content: center;
}
.nav-items > li {
flex: 1;
text-align: center;
}
.nav-item:not(:last-of-type) {
margin-right: 20px;
}
.nav-item--active {
/* after */
}
.content {
padding: 8px;
}
.login-card {
border: 1px solid #999;
margin-bottom: 20px;
padding: 12px;
border-radius: 4px;
}
.login {
display: flex;
flex-direction: column;
}
.login-button {
background-color: #D64550;
padding: 4px;
border: none;
color: #ffffff;
font-size: 20px;
}
.login-input {
margin-bottom: 8px;
border: none;
border-bottom: 1px solid #999;
padding-top: 4px;
padding-bottom: 4px;
}
.footer {
padding: 8px;
}
.inline-block {
display: inline-block;
}
/* Alt over 460px */
#media only screen and (min-width: 460px) {
.main{
max-width: 600px;
}
.navigation-items{
flex-wrap: wrap;
}
.login-button {
font-size: inherit;
}
}
https://jsfiddle.net/m0u79e8s/
I hope this is useful
* {
padding: 0px;
margin: 0px;
}
.main {
}
.navbar {
padding: 20px;
background-color: #1C2826;
width: 100%;
}
.nav-items {
display: flex;
justify-content: center;
}
.nav-items > li {
flex: 1;
text-align: center;
}
.nav-item:not(:last-of-type) {
margin-right: 20px;
}
.nav-item--active {
/* after */
}
.content {
padding: 8px;
}
.login-card {
border: 1px solid #999;
margin-bottom: 20px;
padding: 12px;
border-radius: 4px;
}
.login {
display: flex;
flex-direction: column;
}
.login-button {
background-color: #D64550;
padding: 4px;
border: none;
color: #ffffff;
font-size: 20px;
}
.login-input {
margin-bottom: 8px;
border: none;
border-bottom: 1px solid #999;
padding-top: 4px;
padding-bottom: 4px;
}
.footer {
padding: 8px;
}
.inline-block {
display: inline-block;
}
/* Alt over 460px */
#media only screen and (min-width: 460px) {
.main {
display: flex;
flex-direction: column;
align-items: center;
}
.content {
max-width: 460px;
}
.navigation-items{
flex-wrap: wrap;
}
.login-button {
font-size: inherit;
}
}
<!doctype html>
<html>
<head>
<title>Responsive time</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Raleway:400,600,700" rel="stylesheet">
<link rel="stylesheet" href="./reset.css">
<link rel="stylesheet" href="./generic.css">
<link rel="stylesheet" href="./styles.css">
</head>
<html>
<body>
<main class="main">
<!-- Navigation elements -->
<nav class="navbar">
<ul class="nav-items">
<li class="nav-item nav-item--active">Home</li>
<li class="nav-item">Contact</li>
</ul>
</nav>
<!-- Section -->
<section class="content">
<h1 class="test">Time to get responsive</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore deleniti, quia provident!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis quas alias reiciendis velit, dolor eos temporibus culpa ex modi itaque nostrum natus doloribus sed maiores, a obcaecati quia sequi quisquam corrupti perspiciatis sit quam, qui expedita. Nemo sed dolor earum voluptate quod reiciendis rem laborum atque ex nulla sapiente ea ullam assumenda, fugiat quae incidunt dicta, cupiditate repellendus possimus aliquid! Ad veniam vero alias, rem quod atque dolores saepe possimus, tempora, eaque magnam culpa animi repellendus ratione dolorem harum quo.</p>
<!-- Form -->
<div class="login-card">
<form class="login" action="#" method="get">
<input class="login-input" type="email" placeholder="Indtast email">
<input class="login-input" type="password" placeholder="Indtast kodeord">
<button class="login-button">Send</button>
</form>
</div>
<picture>
<source media="(max-width:459px)" srcset="img/cow.jpg">
<source media="(min-width:460px)" srcset="img/dog.jpg">
<img src="/img/cow.jpg" alt="animals">
</picture>
</section>
<footer class="footer">
<div class="footer-content">
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit quas beatae voluptate.</p>
Some other link
</div>
<div class="footer-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi!</p>
<img class="logo-image" src="/rubbish" alt="">
</div>
</footer>
</main>
</body>
</html>
</html>
I want to add an addition div to info-img. If I changed to <div class="box-img"><div class="info-img"></div>......</div>,the image is gone. What happened to this situaiton? How to I modify CSS code to show the image correctly? __
* {
box-sizing: border-box;
}
#home-info {
height: 300px;
}
#home-info .info-img {
float: left;
width: 50%;
background: url('https://images.pexels.com/photos/573552/pexels-photo-573552.jpeg') no-repeat center center/cover;
height: 100%;
}
#home-info .info-content {
float:right;
width: 50%;
height: 100%;
text-align: center;
padding: 50px 30px;
}
#home-info .info-content p {
padding-bottom: 30px;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<section id="home-info">
<!-- <div class="box-img"> -->
<div class="info-img"></div>
<div class="info-content">
<h2>The History of Our Hotel</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis saepe minima dolorum. Voluptatibus, recusandae. Alias nobis dolorem fugit iusto quis.</p>
</div>
<!-- </div> -->
</section>
</body>
</html>
You missed the closing in your css and the info-img div contains empty. You have to add any image or text to visible the div. I have updated the code. Hope this solution will be helpful.
#home-info {
height: 400px;
width:800px;
}
#home-info .info-img img {
max-width: 100%;
width: 100%;
}
#home-info .box-img {
display: flex;
}
#home-info .info-img {
width: 50%;
background: #ccc;
min-height: 100%;
}
#home-info .info-content {
width: 50%;
height: 100%;
text-align: center;
padding: 50px 30px;
}
#home-info .info-content p {
padding-bottom: 30px;
}
<section id="home-info">
<div class="box-img">
<div class="info-img">
<img src="https://via.placeholder.com/200">
</div>
<div class="info-content">
<h2>The History of Our Hotel</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis saepe minima dolorum. Voluptatibus, recusandae. Alias nobis dolorem fugit iusto quis.</p>
</div>
</div>
</section>
You can check below code snippet , As some closing bracket is missing in your css code.Hope below code will help you !
#home-info {
height: 400px;
width:800px;
}
#home-info .box-data{
width:100%;
float:left;
}
#home-info .info-img {
float: left;
width: 50%;
background: #ccc;
}
#home-info .info-img img{
width:100%;
height:auto;
}
#home-info .info-content {
float:right;
width: 50%;
height: 100%;
text-align: center;
padding: 50px 30px;
box-sizing:border-box;
}
#home-info .info-content p {
padding-bottom: 30px;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<section id="home-info">
<div class="box-data">
<div class="info-img">
<img alt="image" height="auto" width="100%" src="https://images.unsplash.com/photo-1531361171768-37170e369163?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1875&q=80"/>
</div>
<div class="info-content">
<h2>The History of Our Hotel</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis saepe minima dolorum. Voluptatibus, recusandae. Alias nobis dolorem fugit iusto quis.</p>
</div>
</div>
</section>
</body>
</html>
Finally I solved the problem by changing the code.
#home-info .box-img {
height: 300px;
}
* {
box-sizing: border-box;
}
#home-info .box-img {
height: 300px;
}
#home-info .info-img {
float: left;
width: 50%;
background: url('https://images.pexels.com/photos/573552/pexels-photo-573552.jpeg') no-repeat center center/cover;
height: 100%;
}
#home-info .info-content {
float:right;
width: 50%;
height: 100%;
text-align: center;
padding: 50px 30px;
}
#home-info .info-content p {
padding-bottom: 30px;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<section id="home-info">
<div class="box-img">
<div class="info-img"></div>
<div class="info-content">
<h2>The History of Our Hotel</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis saepe minima dolorum. Voluptatibus, recusandae. Alias nobis dolorem fugit iusto quis.</p>
</div>
</div>
</section>
</body>
</html>