I can't get this to work :( I'm just trying to float the image slightly outside the box (half in, half out) above the name but in the center. What am I doing wrong here?
body {
margin-top: 100px;
}
.box_info {
display: inline-block;
padding: 20px;
min-width: 300px;
background-color: #DDD;
border-radius: 4px;
text-align: center;
}
.box_info_name {
display: block;
font-size: 24px;
}
.box_info_logo {
max-width: 100%;
height: auto;
position: absolute;
text-align: center;
}
.box_info_name_inside {}
<div class="box_info">
<div class="box_info_name">
<img src="http://placehold.it/150x150" class="box_info_logo">
<div class="box_info_name_inside">Name</div>
</div>
</div>
Here is a fiddle: https://jsfiddle.net/ffxyc6d0/1/
try This One :
body{
margin-top:100px;
}
.box_info{
display: inline-block;
padding: 20px;
min-width: 300px;
background-color: #DDD;
border-radius: 4px;
text-align:center;
}
.box_info_name{
display: block;
font-size: 24px;
}
.box_info_logo{
width: 150px;
height: 150px;
position: relative;
bottom: 50px;
text-align:center;
}
.box_info_name_inside{
}
<body>
<div class="box_info">
<div class="box_info_name">
<img src="http://placehold.it/150x150" class="box_info_logo">
<div class="box_info_name_inside">Name</div>
</div>
</div>
</body>
If the image is fixed size (not going to change dynamically) you can position it with a negative margin of half the images height, e.g. margin-top: -85px; (Take an extra -10px off as well as the half image height since there's 20px of padding on the parent container)
Example below:
body {
margin-top: 100px;
}
.box_info {
display: inline-block;
padding: 20px;
min-width: 300px;
background-color: #DDD;
border-radius: 4px;
text-align: center;
}
.box_info_name {
display: block;
font-size: 24px;
}
.box_info_logo {
display: inline-block;
margin-top: -85px;
max-width: 100%;
height: auto;
text-align: center;
}
<div class="box_info">
<div class="box_info_name">
<img src="http://placehold.it/150x150" class="box_info_logo">
<div class="box_info_name_inside">Name</div>
</div>
</div>
You can do it with flexbox as well :)
body{
margin-top:100px;
}
.box_info{
background: #ccc;
}
.box_info_name{
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
font-size: 24px;
}
.box_info_logo{
position: relative;
margin-top: -75px;
}
<div class="box_info">
<div class="box_info_name">
<img src="http://placehold.it/150x150/fff" class="box_info_logo">
<div class="box_info_name_inside">Name</div>
</div>
</div>
I like to give 'outside the box' answers to questions like this, without using javascript having to change all the margins gets to be a little annoying. So I've tackled it another way. Rather than moving everything around the page why not just make part of the background transparent.
.box_info {
display: inline-block;
padding: 20px;
min-width: 300px;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 95px, #DDD 95px);
border-radius: 4px;
text-align: center;
}
.box_info_name {
display: block;
font-size: 24px;
}
.box_info_logo {
text-align: center;
}
.box_info_name_inside {}
<div class="box_info">
<div class="box_info_name">
<img src="http://placehold.it/150" class="box_info_logo">
<div class="box_info_name_inside">Name</div>
</div>
</div>
<div class="box_info">
<div class="box_info_name">
<img width="150px" src="https://lh4.googleusercontent.com/-1rv6qW3mpvA/AAAAAAAAAAI/AAAAAAAAS3M/xq0SSZzrgVg/photo.jpg" class="box_info_logo">
<div class="box_info_name_inside">Andrew Bone</div>
</div>
</div>
I've used background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 95px, #DDD 95px); to say anything after 95px should be #DDD and before that needs to be transparent.
95px is height of the image (150px) divided by 2 (75px) plus the padding of the outer box (20px).
Which is great if the image size stays the same, if you plan on it changing then we might need to look at adding a little javascript.
linear-gradient is not supported in IE6 but is in modern IE as well as Edge, Chrome, and firefox.
I hope you find this helpful.
I'm not sure if I'm understanding your question correctly, but maybe this is waht you wan't.
I've simply removed the position: absolute from your .box_info_logo class.
Like this:
body{
margin-top:100px;
}
.box_info{
display: inline-block;
padding: 20px;
min-width: 300px;
background-color: #DDD;
border-radius: 4px;
text-align:center;
}
.box_info_name{
display: block;
font-size: 24px;
}
.box_info_logo{
max-width: 100%;
height: auto;
text-align:center;
}
.box_info_name_inside{
}
<div class="box_info">
<div class="box_info_name">
<img src="http://placehold.it/150x150" class="box_info_logo">
<div class="box_info_name_inside">Name</div>
</div>
</div>
To keep .box_info the same size as that in your jsfiddle example, you can add position: relative to this class whilst keeping .box_info_logo as position: absolute.
body {
margin-top: 150px;
}
.box_info {
display: inline-block;
padding: 20px;
min-width: 300px;
background-color: #DDD;
border-radius: 4px;
text-align: center;
position: relative;
}
.box_info_name {
display: block;
font-size: 24px;
}
.box_info_logo {
max-width: 100%;
height: auto;
position: absolute;
text-align: center;
left: 0;
right: 0;
margin: auto;
bottom: 50px;
}
.box_info_name_inside {}
<div class="box_info">
<div class="box_info_name">
<img src="http://placehold.it/150x150" class="box_info_logo">
<div class="box_info_name_inside">Name</div>
</div>
</div>
Related
This is challenging for me to position the share div like in the picture above. well, I tried the position absolute with bottom and left it's so frustrating adjusting the px but the output is always either stacked on top or bottom. how can I achieve that similar output in the picture?
:root {
--VeryDarkGrayishBlue: hsl(217, 19%, 35%);
--DesaturatedDarkBlue: hsl(214, 17%, 51%);
--GrayishBlue: hsl(212, 23%, 69%);
--LightGrayishBlue: hsl(210, 46%, 95%);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Manrope", sans-serif;
}
body {
background-color: var(--GrayishBlue);
display: flex;
flex-direction: column;
min-height: 100vh;
padding: 20px;
}
.container {
display: grid;
grid-template-columns: 2fr 3fr;
max-width: 1150px;
max-height: 390px;
margin: auto;
background-color: white;
overflow: hidden;
border-radius: 0.8em;
}
.img-box {}
.img-box img {
width: 100%;
height: 100%;
object-fit: cover;
}
.text-box {
padding: 8%;
}
.text {
padding-bottom: 30px;
}
.title {
color: var(--VeryDarkGrayishBlue);
padding-bottom: 10px;
}
.subtitle {
color: var(--GrayishBlue);
font-size: 1.1em;
}
.writer img {
width: 50px;
height: 50px;
border-radius: 50%;
}
.footer {
display: flex;
flex-direction: row;
align-items: center;
}
.name {
margin-left: 12px;
}
.name h4 {
color: var(--VeryDarkGrayishBlue);
}
.name p {
color: var(--GrayishBlue);
}
.share {
margin-left: auto;
}
.share-icon button {
border: none;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: var(--LightGrayishBlue);
cursor: pointer;
}
.share-option {
width: 250px;
height: 40px;
background: var(--VeryDarkGrayishBlue);
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
color: white;
position: absolute;
bottom: ;
}
<main class="container">
<div class="img-box">
<img src="/images/drawers.jpg" alt="" />
</div>
<div class="text-box">
<div class="text">
<h1 class="title">
Shift the overall look and feel by adding these wonderful touches to furniture in your home
</h1>
<p class="subtitle">
Ever been in a room and felt like something was missing? Perhaps it felt slightly bare and uninviting. I’ve got some simple tips to help you make any room feel complete.
</p>
</div>
<div class="footer">
<div class="writer">
<img src="/images/avatar-michelle.jpg" alt="" />
</div>
<div class="name">
<h4>Michelle Appleton</h4>
<p>28 Jun 2020</p>
</div>
<div class="share">
<div class="share-icon">
<button><img src="/images/icon-share.svg" alt=""></button>
</div>
<div class="share-option hidden">
<span>Share</span>
<a href="#"> <img src="/images/icon-facebook.svg" alt=""> <a/>
<a href="#"> <img src="/images/icon-pinterest.svg" alt=""> <a/>
<a href="#"> <img src="/images/icon-twitter.svg" alt=""> <a/>
</div>
</div>
</div>
</div>
</main>
I have made some changes in the code and made the popup visible with absolute.
:root {
--VeryDarkGrayishBlue: hsl(217, 19%, 35%);
--DesaturatedDarkBlue: hsl(214, 17%, 51%);
--GrayishBlue: hsl(212, 23%, 69%);
--LightGrayishBlue: hsl(210, 46%, 95%);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Manrope", sans-serif;
}
body {
background-color: var(--GrayishBlue);
display: flex;
flex-direction: column;
min-height: 100vh;
padding: 20px;
}
.container {
display: grid;
grid-template-columns: 2fr 3fr;
max-width: 1150px;
max-height: 390px;
margin: auto;
background-color: white;
border-radius: 0.8em;
}
.container:after {
display: block;
content: '';
clear: both;
}
.img-box {}
.img-box img {
width: 100%;
height: 100%;
object-fit: cover;
}
.text-box {
padding: 8%;
}
.text {
padding-bottom: 30px;
}
.title {
color: var(--VeryDarkGrayishBlue);
padding-bottom: 10px;
}
.subtitle {
color: var(--GrayishBlue);
font-size: 1.1em;
}
.writer img {
width: 50px;
height: 50px;
border-radius: 50%;
}
.footer {
display: flex;
flex-direction: row;
align-items: center;
}
.name {
margin-left: 12px;
}
.name h4 {
color: var(--VeryDarkGrayishBlue);
}
.name p {
color: var(--GrayishBlue);
}
.share {
margin-left: auto;
position: relative;
padding: 20px 0 0;
}
.share-icon button {
border: none;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: var(--LightGrayishBlue);
cursor: pointer;
}
.share-option {
width: 250px;
height: 40px;
background: var(--VeryDarkGrayishBlue);
border-radius: 10px;
color: white;
position: absolute;
bottom: 100%;
right: 50%;
transform: translatex(50%);
visibility: hidden;
opacity: 0;
transition: visibility 0s, opacity 0.5s linear;
}
.share-option:after {
top: 100%;
left: 50%;
border: solid transparent;
content: "";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(136, 183, 213, 0);
border-top-color: var(--VeryDarkGrayishBlue);
border-width: 10px;
margin-left: -10px;
}
.share:hover .share-option {
visibility: visible;
opacity: 1;
}
<main class="container">
<div class="img-box">
<img src="/images/drawers.jpg" alt="" />
</div>
<div class="text-box">
<div class="text">
<h1 class="title">
Shift the overall look and feel by adding these wonderful touches to furniture in your home
</h1>
<p class="subtitle">
Ever been in a room and felt like something was missing? Perhaps it felt slightly bare and uninviting. I’ve got some simple tips to help you make any room feel complete.
</p>
</div>
<div class="footer">
<div class="writer">
<img src="/images/avatar-michelle.jpg" alt="" />
</div>
<div class="name">
<h4>Michelle Appleton</h4>
<p>28 Jun 2020</p>
</div>
<div class="share">
<div class="share-icon">
<button><img src="/images/icon-share.svg" alt=""></button>
</div>
<div class="share-option hidden">
<span>Share</span>
<a href="#"> <img src="/images/icon-facebook.svg" alt=""> <a/>
<a href="#"> <img src="/images/icon-pinterest.svg" alt=""> <a/>
<a href="#"> <img src="/images/icon-twitter.svg" alt=""> <a/>
</div>
</div>
</div>
</div>
</main>
I think without javascript you won't be able to do it.
You could include your share-option (position absolute) inside share-icon (position relative). This way option would be positioned relative to the button.
<div class="share">
<div class="share-icon">
<button>
<img src="/images/icon-share.svg" alt="">
</button>
<div class="share-option hidden">
<span>Share</span>
<img src="/images/icon-facebook.svg" alt="">
<img src="/images/icon-pinterest.svg" alt="">
<img src="/images/icon-twitter.svg" alt="">
</div>
</div>
</div>
and css
.share-icon {
position: relative;
}
.share-icon button {
border: none;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: var(--LightGrayishBlue);
cursor: pointer;
}
.share-option {
width: 250px;
height: 40px;
background: var(--VeryDarkGrayishBlue);
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
color: white;
position: absolute;
top: -40px;
z-index: 100;
}
Now the problem is options are in the boundary of the relative, so it doesn't extend on the right!
I suppose this container is responsive, meaning size can change. So I think the only way would be to put the option in the body (display none), when a click (or hover) happens on the button, you take the position of the button and position options on top of it with display flex
I want to add text at bottom right corner inside card element. The text which I want to enter is Innings and Average. I have created flex-box but text such as innings and average is not getting displayed in bottom right corner.
Code:
.playercard1 {
display: flex;
align-items: flex-start;
height: 120px;
width: 500px;
margin-top: 30px;
margin-left: 30px;
}
.item {
padding-left: 10px;
}
.info {
margin-top: 25px;
}
<div class="playercard1">
<img class="profilepic" src="./profile.jpg">
<div class="item">
<div class="info">
<h6>Naman Kohli, Team Name, Right-Hand bat</h6>
<h2 className="cardtitle1">150</h2>
<p>Innings:5</p>
<p>Average:40.67</p>
</div>
</div>
</div>
In my screenshot you can see the innings and average is not getting displayed at bottom right corner. Check screenshot below:
What I am trying to achieve see in below screenshot I want to display innings and average at bottom right corner like the one in below screenshot.
Here is my solution, its not perfect, but it will give you a starting point
.playercard1 {
display: flex;
align-items: flex-start;
height: auto;
width: 500px;
margin-top: 30px;
margin-left: 30px;
border: 1px solid black;
padding: 10px;
}
.item {
padding-left: 10px;
flex:1;
}
.info {
margin-top: 25px;
}
.flex{
display:flex;
justify-content:space-between;
}
.cardtitle1{
font-size:24px;
}
<div class="playercard1">
<img class="profilepic" src="https://placehold.it/100x100">
<div class="item">
<div class="info">
<div>Naman Kohli, Team Name, Right-Hand bat</div>
<div class="flex">
<div class="cardtitle1">150</div>
<div>
<div>Innings:5</div>
<div>Average:40.67</div>
</div>
</div>
</div>
</div>
</div>
With position:absolute
.playercard1 {
display: flex;
align-items: flex-start;
height: auto;
width: 500px;
margin-top: 30px;
margin-left: 30px;
border: 1px solid black;
padding: 10px;
position: relative;
}
.item {
padding-left: 10px;
flex: 1;
}
.info {
margin-top: 25px;
}
.flex {
display: flex;
justify-content: space-between;
}
.cardtitle1 {
font-size: 30px;
margin-top:25px;
}
.absolute {
position: absolute;
bottom: 10px;
right: 15px;
}
<div class="playercard1">
<img class="profilepic" src="https://placehold.it/80x80">
<div class="absolute">
<div>Innings:5</div>
<div>Average:40.67</div>
</div>
<div class="item">
<div>Naman Kohli, Team Name, Right-Hand bat</div>
<div class="cardtitle1">150</div>
</div>
</div>
.playerCard{
display: flex;
align-items: flex-start;
height: 120px;
width: 500px;
margin-top: 30px;
margin-left: 30px;
box-shadow: 0 1px 2px rgba(0,0,0,0.4);
padding: 15px;
}
.playerCard .player_profile_pic{
display: inline-block;
vertical-align: top;
border-radius:50px;
}
.playerCard .player_profile_pic img{
border-radius: 100%;
width: 100px;
height: 100px;
}
.playerCard .player_details_div{
display: inline-block;
vertical-align: top;
margin-top: 10px;
margin-left: 15px;
width: calc(100% - 30px);
}
.player_details_div .player_name_det{
font-size: 16px;
}
.player_details_div .rank_ings_main_div{
width: 100%;
}
.rank_ings_main_div .number_div{
font-size: 30px;
text-align: left ;
float: left;;
}
.rank_ings_main_div .avg_ings_div{
float: right;
text-align: right;
}
.avg_ings_div p{
margin: 5px 0;
}
<div class="playerCard">
<div class="player_profile_pic">
<img src="https://i.stack.imgur.com/l60Hf.png" alt="">
</div>
<div class="player_details_div">
<div class="player_name_det">
Naman Kohli , Team Name, Right Hand Bat
</div>
<div class="rank_ings_main_div">
<div class="number_div">150</div>
<div class="avg_ings_div">
<p>Innings : 3</p>
<p>Average : 50.00</p>
</div>
</div>
</div>
</div>
I guess you need something like this.
Hope this helps.
Okay so the desired outcome of this is to have the images on the left and the text sit to the right of the images, screenshot below:
.contact_bar {
width: 100%;
height: 50px;
background: #2c3e50;
color: #ffffff;
border-bottom: solid 2px #c9c9c9;
}
.contact_bar_container {
width: 1050px;
height: 50px;
position: relative;
margin-left: auto;
margin-right: auto;
}
.contact_bar_text {
width: 100%;
}
.contact_bar_call {
background-image: url(/images/call.png);
height: 32px;
width: 32px;
float: left;
margin-top: 8px;
float: left;
margin-right: 100px;
}
.contact_bar_email {
background-image: url(/images/email.png);
height: 32px;
width: 32px;
float: left;
margin-top: 8px;
}
<div class="contact_bar">
<div class="contact_bar_container">
<div class="contact_bar_call">
<div class="contact_bar_text">
Call here
</div>
</div>
<div class="contact_bar_email">
<div class="contact_bar_text">
Email here
</div>
</div>
</div>
</div>
I want the image to be left of the text and automatically understand when the first line of text (phone number) is finished it will then have the email image with a 5px margin and then the email image and address.
Here a solution using img html tag instead of background-image. I edited a bit your html code.
So you just have use a <img src="###" />tag instead of the <div class="contact_image"></div>
.contact_bar {
width: 100%;
height: 50px;
background: #2c3e50;
color: #ffffff;
border-bottom: solid 2px #c9c9c9;
}
.contact_bar_container {
width: 1050px;
height: 50px;
position: relative;
margin-left: auto;
margin-right: auto;
display: flex;
align-items: center;
}
.contact_bar_content{
display: flex;
align-items: center;
padding: 0 15px;
}
.contact_image{
height: 15px;
width: 15px;
background-color: red;
margin-right: 5px;
}
<div class="contact_bar">
<div class="contact_bar_container">
<div class="contact_bar_content">
<div class="contact_image">
</div>
<div class="contact_bar_text">
Call here
</div>
</div>
<div class="contact_bar_content">
<div class="contact_image">
</div>
<div class="contact_bar_text">
Email here
</div>
</div>
</div>
</div>
I'm experiencing an issue with my text where I don't see it at all, or it doesn't act as though I would think it would in a flexbox. I have three images in the flexbox right now, but I would like to place small 'captions' under each of them(not in the p element, the purple, but I would like to place it on the white, which is right under the purple box(the p element). I thought that by adding a child element, that element would at least line up vertically with the element above it but I guess I'm wrong. Can anyone help? Another piece of info is that really my images are 250 pixels, but I wanted to accommodate for a snippet so I made it 50 pixels, but that's probably irrelevant.
#footer {
display: flex;
height: 130px;
width: 100%;
background-color: #862d59;
clear: both;
}
#footer, #wrapper:after{
height: 130px;
}
.wrap {
margin: 0 auto;
width: 100%;
display: flex;
align-items: center;
flex-wrap: nowrap;
}
.sub {
padding: 12px;
width: 32%;
height: 100px;
color: white;
border-right: solid white 1px;
}
.sub:last-child {
border: 0px;
}
html {
height: 100%;
}
body {
height: 100%;
margin:0;
font-family: courier;
font-size: 22px;
color: white;
}
#wrapper {
position: relative;
margin-left: auto;
margin-right: auto;
width: 85%;
min-height: 100%;
margin-top: -130px;
}
#inner {
position:absolute;
display:flex;
flex-wrap: wrap;
height: 600px;
top:50%;
align-items: center;
justify-content: space-between;
margin-top: -300px;
align-content: center;
width: 100%;
}
#inner p {
background-color: #26004d;
padding: 60px;
border-radius: 9px;
}
#inner img {
border-radius: 8px;
}
<div id="wrapper">
<div id="inner">
<p><img src="cat1.jpeg" alt="Picture of a cat" width="50" height="50"></p>
<p><img src="dog1.jpg" alt="Picture of a cat" width="50" height="50"></p>
<p><img src="park.jpg" alt="Picture of a cat" width="50" height="50"></p>
</div>
</div>
<div id="footer">
<div class="wrap">
<div class="sub"></div>
<div class="sub"></div>
<div class="sub"></div>
</div>
</div>
Without additional info / image, here's the solution I was able to come up with. If you want to keep each image / caption grouped together, wrap them in another parent div. Then just add the caption below that, which is a block element and should flow below the image, as intended. Snippet below.
#footer {
display: flex;
height: 130px;
width: 100%;
background-color: #862d59;
clear: both;
}
#footer, #wrapper:after{
height: 130px;
}
.wrap {
margin: 0 auto;
width: 100%;
display: flex;
align-items: center;
flex-wrap: nowrap;
}
.sub {
padding: 12px;
width: 32%;
height: 100px;
color: white;
border-right: solid white 1px;
}
.sub:last-child {
border: 0px;
}
html {
height: 100%;
}
body {
height: 100%;
margin:0;
font-family: courier;
font-size: 22px;
color: white;
}
#wrapper {
position: relative;
margin-left: auto;
margin-right: auto;
width: 85%;
min-height: 100%;
}
#inner {
position:absolute;
display:flex;
flex-wrap: wrap;
height: 600px;
top:50%;
align-items: center;
justify-content: space-between;
margin-top: -300px;
align-content: center;
width: 100%;
}
#inner p {
background-color: #26004d;
padding: 60px;
border-radius: 9px;
}
#inner p.caption {
color: #000;
background-color: transparent;
border-radius: 0;
}
#inner img {
display: block;
border-radius: 8px;
}
<div id="wrapper">
<div id="inner">
<div class="image-wrapper">
<p>
<img src="http://placehold.it/100x100" alt="Picture of a cat">
</p>
<p class="caption">Caption</p>
</div>
<div class="image-wrapper">
<p>
<img src="http://placehold.it/100x100" alt="Picture of a cat">
</p>
<p class="caption">Caption</p>
</div>
<div class="image-wrapper">
<p>
<img src="http://placehold.it/100x100" alt="Picture of a cat">
</p>
<p class="caption">Caption</p>
</div>
</div>
</div>
<div id="footer">
<div class="wrap">
<div class="sub"></div>
<div class="sub"></div>
<div class="sub"></div>
</div>
</div>
Let me know if you have any questions, or if this doesn't satisfy your description.
How can I synchronize the height of an image with the height of a text area, depending on the screen size? I do not want to use the left border of the text area because I want a visual separation between the left bar and the text. I do not want the width of the bar to be adjusted simultaneously, because it is only a visual separator in the page; the bar should be just as long as the text on its right side.
NB: the bar is not restricted to an image; it can be anything as long as the result is a colored vertical bar with the correct height.
html {
height: 100%;
margin: 0;
padding: 0;
}
body {
background-color: #fff8dc;
color: grey;
font-family: Arial;
font-size: 1em;
position: relative;
min-height: 100%;
}
.common {
background-color: #fff8dc;
float: left;
width: 25%;
height: 100vh;
text-align: center;
padding: 0 40px 10px 40px;
}
.detail {
background-color: #fff8dc;
float: left;
margin: 0 20px 0 0;
overflow: auto;
height: 100%
}
.text {
margin: 0px 40px 0px 40px;
background-color: #ffffff;
padding: 10px 20px 10px 20px;
}
<div class="common">
<p>blabla</p>
</div>
<div>
<div class="detail">
<img src="widgets/spacer.gif" alt="vertical bar" width="30px" height="400px" style="background-color: #E3B90A;">
</div>
<div class="text">
<h1>BLABLA</h1>
<p>blablabla</p>
<p>blablabla</p>
<p>blablabla</p>
</div>
</div>
You can do it this way:
HTML:
<div class="common">
<p>blabla</p>
</div>
<div class="container">
<div class="detail">
<img src="widgets/spacer.gif" alt="vertical bar">
</div>
<div class="text">
<h1>BLABLA</h1>
<p>blablabla</p>
<p>blablabla</p>
<p>blablabla</p>
</div>
</div>
CSS:
html {
height: 100%;
margin: 0;
padding: 0;
}
body {
background-color: #fff8dc;
color: grey;
font-family: Arial;
font-size: 1em;
position: relative;
min-height: 100%;
}
.container{
display: flex;
flex-direction: row;
}
.common {
background-color: #fff8dc;
float: left;
width: 25%;
height: 100vh;
text-align: center;
padding: 0 40px 10px 40px;
}
.detail {
background-color: #E3B90A;
width: 30px;
height: auto;
}
.detail img{
width: 100%;
height: auto;
}
.text {
width: 100%;
background-color: #ffffff;
padding: 10px 20px 10px 20px;
}
Fiddle: https://jsfiddle.net/debraj/s84yxh8L/