Div element not displaying in line with other 2 div elements present despite having the necessary space for it.
I am attempting to display a web page with 3 separate paragraphs divided into div elements, but the one on the right is seemingly stuck to the bottom of the page unless I remove the center div.
Here is the html:
<div class="Reviews">
<img src="review.jpg" alt="Needledrop Review" class="Review"> Sample Text Sample
</div>
<div class="Sales">
<img src="redcarpet.jpg" alt="JID on the Red Carpet" class="RedCarpet"> Sample Text </div>
<div class="Impact">
<img src="dreamville.jpg" alt="JID with Dreamville members" class="Dream"> Sample
</div>
Here is the CSS for each div element:
div.Reviews {
float: left;
border: 1px solid black;
font-size: 1.207em;
width: 400px;
height: 770px;
text-align: justify;
color: white
}
img.Review {
vertical-align: text-top;
width: 100%;
}
Number 2:
div.Sales {
display: block;
margin-left: auto;
margin-right: auto;
border: 1px solid black;
font-size: 1.207em;
width: 400px;
height: 770px;
text-align: justify;
color: white
}
img.RedCarpet {
vertical-align: text-bottom;
width: 100%;
}
Number 3:
div.Impact {
float: right;
font-size: 1.207em;
border: 1px solid black;
padding: 10px;
width: 255px;
height: 737px;
text-align: justify;
color: white
}
img.Dream {
vertical-align: text-top;
width: 100%;
}
Any help would be appreciated, thank you!
.container {
display: flex;
}
div.Reviews {
float: left;
border: 1px solid black;
font-size: 1.207em;
width: 400px;
height: 770px;
text-align: justify;
color: white
}
img.Review {
vertical-align: text-top;
width: 100%;
}
div.Sales {
display: block;
margin-left: auto;
margin-right: auto;
border: 1px solid black;
font-size: 1.207em;
width: 400px;
height: 770px;
text-align: justify;
color: white
}
img.RedCarpet {
vertical-align: text-bottom;
width: 100%;
}
div.Impact {
float: right;
font-size: 1.207em;
border: 1px solid black;
padding: 10px;
width: 255px;
height: 737px;
text-align: justify;
color: white
}
img.Dream {
vertical-align: text-top;
width: 100%;
}
<div class="container">
<div class="Reviews">
<img src="https://www.typinks.com/images/character-sketch-of-friar-laurence-in-romeo-and-juliet.webp" alt="Needledrop Review" class="Review"> Sample Text Sample
</div>
<div class="Sales">
<img src="https://www.typinks.com/images/role-of-fate-in-romeo-and-juliet.webp" alt="JID on the Red Carpet" class="RedCarpet"> Sample Text </div>
<div class="Impact">
<img src="https://www.typinks.com/images/along-with-the-raptors.webp" alt="JID with Dreamville members" class="Dream"> Sample
</div>
</div>
add a parent div with display:flex to align in horizontal
Related
I work with dynamicaly created boxes, and i have issues that text are not fiting inside box.
EX:
My code:
HTML:
<div class="box" id="box98" style="width: 110px; height: 43px;">
<div class="machine-icon" id="machine98" style="background-color: green;">
<img src="https://via.placeholder.com/150/">
</div>
<div class="title-box">SOME WERY BIG DATA 1345135131421124</div>
<div class="desc-box">SUB DATAqfqwfqwf</div>
</div>
CSS:
.box {
background-color: #ccc;
margin: 10px;
border-radius: 10px;
text-align: center;
font-size: 10px;
}
.machine-icon {
vertical-align: middle;
float: left;
width: 40px;
height: 40px;
background-color: #808080;
border-radius: 20px;
margin: 2px;
}
.machine-icon > img {
margin-top: 25%;
width: 20px;
height: 20px;
}
.title-box {
color: #000;
font-size: 10px;
overflow: hidden;
font-weight: 600;
}
.desc-box {
color: #000;
}
So my idea was to not showing all text, just end, for example:
I try to use display: flex and justify-content: end; idea was, to add for title and sub title z-index: 1 and for image z-index: 2, and for box overflow: hidden;
But it's not working for me.
This could be done this way using white-space: nowrap; and direction: rtl;
.box {
background-color: #ccc;
margin: 10px;
border-radius: 10px;
text-align: center;
font-size: 10px;
}
.machine-icon {
vertical-align: middle;
float: left;
width: 40px;
height: 40px;
background-color: #808080;
border-radius: 20px;
margin: 2px;
}
.machine-icon>img {
margin-top: 25%;
width: 20px;
height: 20px;
}
.title-box {
color: #000;
font-size: 10px;
overflow: hidden;
font-weight: 600;
direction: rtl;
white-space: nowrap;
}
.desc-box {
color: #000;
}
<div class="box" id="box98" style="width: 110px; height: 43px;">
<div class="machine-icon" id="machine98" style="background-color: green;">
<img src="https://via.placeholder.com/150/">
</div>
<div class="title-box">SOME WERY BIG DATA 1345135131421124</div>
<div class="desc-box">SUB DATAqfqwfqwf</div>
</div>
Remove Height from your in the .box element.
the height should be Auto:
<div class="box" id="box98" style="width: 110px; **height: auto;**">
<div class="machine-icon" id="machine98" style="background-color: green;">
<img src="https://via.placeholder.com/150/">
</div>
<div class="title-box">SOME WERY BIG DATA 1345135131421124</div>
<div class="desc-box">SUB DATAqfqwfqwf</div>
</div>
I'm not sure what to do, I've tried using position, but it just aligns to the middle of the page, not the div.
I'm trying to align it vertically in the middle.
.img1 {
float: right;
width: 20%;
margin-right: 200px;
display: inline-block;
vertical-align: middle;
}
.img1 {
border-radius: 50%;
border: 5px solid white
}
.container {
width: 100%;
height: 500px;
background-color: black;
display: inline-block;
}
<div class="container">
<img class="img1" src="https://via.placeholder.com/500.jpg">
</div>
Wrap it in a flexbox container
.img1 {
float: right;
width: 20%;
margin-right: 200px;
display: inline-block;
vertical-align: middle;
}
.img1 {
border-radius: 50%;
border: 5px solid white
}
.container {
width: 100%;
height: 500px;
display:flex;
align-items:center;
background-color: black;
}
<div class="container">
<img class="img1" src="https://via.placeholder.com/500.jpg">
</div>
How to make this div starts after the picture.
It starts from the beginning of the container.
I have added /float: left;/ in profile image.
enter image description here
HTML and CSS Code:
.profile{
border: 1px solid #ddd;
padding: 22px;
min-height: 150px;
}
.profile img{
max-width: 150px;
width: 100%;
float: left;
}
.profile #details{
margin-left: 50px;
}
<section class="profile">
<img src="https://www.sonypark360.net/wp-content/uploads/2017/08/profile-pictures.png" alt="profile">
<div id="details">
<h1>Name</h1>
<h2>Age</h2>
<h3>City, Country</h3>
</div>
</section>
This code should work for you
.my-profiles {
border: 1px solid #b2cbe3;
padding: 22px;
font-family: arial;
display: inline-block;
}
.my-profiles img{
max-width: 100px;
width: 100%;
border-radius: 50%;
float: left;
}
.my-profiles .details {
overflow-x: hidden;
padding-top: 10px;
padding-left: 8px;
display: inline-block;
}
.my-profiles .details * {
margin: 0px;
font-size: 22px;
font-weight: 200;
}
<div class="my-profiles">
<img src="https://cdn.pixabay.com/photo/2016/08/08/09/17/avatar-1577909_960_720.png">
<div class="details">
<h2>Name</h2>
<h2>Age</h2>
<h2>City, Country</h2>
</div>
</div>
I've trouble finding a good solution fo a relativly simple responsive layout problem.
It's a product item component which should look like in this example.
It brings some sort of equal-height-requirement with it (on desktop img to other content and on mobile img to product-info).
As stand alone it woudnt be a problem but i struggle with finding a good practice for two different viewports without duplicate content/markup.
Main Problem is the wrapping/flow-behaviour. Usually i would place a wrapper arround info and detail, but because of the mobile version this isn't possible.
Can maybe give me someone a good hint how to solve my problem?
Would be much appreciated
Thx and greetings, eldaDev
.product-item {
display: flex;
flex-wrap: wrap;
border: 1px solid #333;
}
.product-item__image {
width: 25%;
background-color: #ccc;
}
.product-item__info {
width: 75%;
background-color: green;
}
.product-item__detail {
width: 100%;
background-color: blue;
}
<!-- Markup example mobile version alike -->
<div class="product-item">
<div class="product-item__image">img</div>
<div class="product-item__info">info content</div>
<div class="product-item__detail">detail content</div>
</div>
.product-item {
}
.product-item__image img{width:100%}
.product-item__image {
float: left;
width: 20%;
height: 400px;
background: #ffd9d9;
}
.product-item__info {
float: left;
width: 80%;
background: #f1f1f1;
text-align: center;
padding: 80px 0;
}
.product-item__detail {
float: left;
width: 80%;
background: #bfbfbf;
text-align: center;
padding: 80px 0;
}
#media (max-width: 767px) {
.product-item__image {
float: left;
width:20%;
}
.product-item__info {
float: right;
width: 70%;
background: #f1f1f1;
text-align: center;
padding: 120px 0;
}
.product-item__detail {
float: none;
width: 100% !important;
background: #bfbfbf;
text-align: center;
padding: 80px 0;
clear: both;
}
}
<div class="product-item">
<div class="product-item__image">img</div>
<div class="product-item__info">info content</div>
<div class="product-item__detail">detail content</div>
</div>
Try this: It is working for me. float and #media() used to make it responsive. If not work, then let me know. Its my pleasure to help others :)
*{
font-family: arial;
color: #aaa;
font-weight: normal;
}
.wrapper{
border: solid 1px #363636;
width: 500px;
height: 200px;
padding: 10px;
}
.image{
float: left;
height: 100px;
width: 20%;
border: solid 1px #363636;
}
.images > img{
height: 90%;
}
.product_info{
float: left;
margin-left: 2%;
border: solid 1px #363636;
width: 77%;
height: 100px;
text-align: center;
}
.product_detail{
float: left;
margin-top: 2%;
border: solid 1px #363636;
width: 99%;
text-align: center;
height: 85px;
}
#media(max-width: 767px;){
.image{
float: left;
height: 200px;
width: 20%;
border: solid 1px #363636;
}
.product_detail{
float: right;
margin-top: 2%;
margin-left: 22%;
border: solid 1px #363636;
width: 77%;
text-align: center;
height: 85px;
}
}
<center>Desktop</center>
<div class="wrapper">
<div class="image">
<img src="https://i.stack.imgur.com/D8dBds.png" alt="IMG">
</div>
<div class="product_info">
<h1>Product Info</h1>
</div>
<div class="product_detail">
<h1>Product Detail</h1>
</div>
</div>
<div class="outside" style="width: 500px; height: 20px; border: 1px solid red;">
<img src="" style="width: 10px; height: 20px; margin: 0; padding: 0; display: inline-block;">
<div id="here" style="display: inline-block; height: 15px; border: 1px solid blue; font-size: 7px;">11</div>
</div>
I found bottom line of img and #here do not in a line, if I add any text to #here, who can tell me why.
And how to make the #here and img verticall center in the outside (img and #here in the same line )
vertical-align is what you are looking for.
.outside > * {
vertical-align: middle;
}
<div class="outside" style="width: 500px; height: 20px; border: 1px solid red;">
<img src="http://www.fillmurray.com/20/10" style="width: 10px; height: 20px; margin: 0; padding: 0; display: inline-block;">
<div id="here" style="display: inline-block; height: 15px; border: 1px solid blue; font-size: 7px;">11</div>
</div>
Do you want it in the horizontal center?
#ImageCtr {
width: 10px;
height: 20px;
}
#outer {
width: 500px;
height: 20px;
background-color: #FF0000;
display: flex;
align-items: center;
justify-content: center;
}
<div id="outer">
<div id="ImageCtr"><img src="http://i.imgur.com/vCVDBHB.png">
</div>
</div>