I want to remove this space to make <span>-s closer, but there is no any margin or padding that could add more space between them.
<!-- HTML -->
<div class="service-container" id="logo-title-service-container">
<span class="logo-text" id="logo-title">company name</span><br>
<span class="logo-text" id="logo-subtitle">This is a subtitle</span>
</div>
Sass
// Sass
#logo-title-service-container
text-align: left
padding-left: 10px
#logo-title
font-size: 18px
#logo-subtitle
padding-top: -5px
font-size: 12px
How can I remove the space between them?
You should remove the 'br' element first.
then make the display of title and subtitle block or as i did here make the parent display flex and flex-direction to column to make it work.
#logo-service-container {
width: 100%;
text-align: center;
padding-top: 15px;
display: flex;
align-items: center;
justify-content: center;
}
#logo-main {
width: 26px;
height: 26px;
}
#logo-title-service-container {
display: flex;
flex-direction: column;
text-align: left;
padding-left: 10px;
}
#logo-title {
font-size: 18px;
}
#logo-subtitle {
font-size: 12px;
}
<div class="sidebar" id="left-sidebar">
<div class="service-container" id="logo-service-container">
<img id="logo-main" src="resources/images/icons/logo.svg" alt="logo">
<div class="service-container" id="logo-title-service-container">
<span class="logo-text" id="logo-title">company name</span>
<span class="logo-text" id="logo-subtitle">This is a subtitle</span>
</div>
</div>
</div>
You should try to avoid <br>
replace the span with div
<div class="sidebar" id="left-sidebar">
<div class="service-container" id="logo-service-container">
<img id="logo-main" src="resources/images/icons/logo.svg" alt="logo">
<div class="service-container" id="logo-title-service-container">
<div class="logo-text" id="logo-title">company name</div>
<div class="logo-text" id="logo-subtitle">This is a subtitle</div>
</div>
</div>
</div>
SASS:
#logo-service-container
width: 100%
text-align: center
padding-top: 15px
display: flex
align-items: center
justify-content: center
#logo-main
$size: 26px
width: $size
height: $size
#logo-title-service-container
text-align: left
padding-left: 10px
#logo-title
font-size: 18px
#logo-subtitle
padding-top: -5px
font-size: 12px
Related
My site looks like this:
DESKTOP:
MOBILE:
However, I need the text to be inline with the middle of the corresponding image (both items centered, so that the subtext isn't off-centered).
My HTML:
<div class="col-lg-3>
<div class="container--wrap">
<div class="inward-text">
<br>
<img src="green-up.png" class="center" style="vertical-align: middle;">
<br>
<span style="color: #9BDDB4; font-family: robotobold; font-size: 30px; vertical-align: middle;" "="">4.51%</span>
<br>
<span style="color: #ffffff; font-family: robotolight; font-weight: lighter; font-size: 15px">from yesterday</span>
<img src="red-up.png" class="center" style="padding-top: 30px; vertical-align: middle;">
<br>
<br>
<br>
<br>
<div id="txtdown">
<span style="color: #EE939C; font-family: robotobold; font-size: 30px; vertical-align: middle;">1.80%</span>
<br>
<span style="color: #ffffff; font-family: robotolight; font-weight: lighter; font-size: 15px">from yesterday</span>
</div>
<img src="flag-ic.png" class="center" style="padding-top: 30px; vertical-align: middle;">
<br>
<br>
<br>
<div id="txtdown">
<span style="color: #AEAEAE; font-family: robotobold; font-size: 30px; vertical-align: middle;">text</span>
<br>
<span style="color: #ffffff; font-family: robotolight; font-weight: lighter; font-size: 15px">subtext</span>
</div>
</div>
</div>
</div>
Relevant CSS:
.container--wrap {
background-color: #000000;
border-radius: 15px;
margin: 5px;
overflow: hidden;
}
.col-lg-3 {
flex: 0 0 25%;
max-width: 25%;
}
.col {
flex-basis: 0;
flex-grow: 1;
max-width: 100%;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 135px;
}
.inward-text span{
display: inline;
margin-left: 10px;
}
.inward-text img{
margin-left: 80px;
float: left;
}
#txtdown{
margin-top: 10px;
}
How do I do what I want to be doing?
EDIT:
I apologise in advance for the extremely messy <br>s that there are!
br tags it is not the best approach, I try to simplify your solution, block with your image and text should be like there:
<div class="items">
<div class="item red">
<img/>
<div class="item__text">
<span class="percent"></span>
<span class="description"></span>
</div>
</div>
<div class="item green">
<img/>
<div class="item__text">
<span class="percent"></span>
<span class="description"></span>
</div>
</div>
<div class="item grey">
<img/>
<div class="item__text">
<span class="percent"></span>
<span class="description"></span>
</div>
</div>
</div>
CSS
.items {
display: flex;
flex-direction: column;
}
.item {
display: flex;
align-items: center;
}
.item__text {
display: flex;
flex-direction: column;
}
And don't use be, use margin or padding, it is a more flexible and reliable approach.
Html:
<div class="container--wrap">
<div class="inward-text">
<div class="flex">
<img src="green-up.png" class="center" style="vertical-align: middle;">
<div id="txtdown">
<span style="color: #9BDDB4; font-size: 30px; vertical-align: middle;">4.51%</span>
<span style="color: #ffffff; font-weight: lighter; font-size: 15px">from yesterday</span>
</div>
</div>
<div class="flex">
<img src="green-up.png" class="center" style="padding-top: 30px; vertical-align: middle;">
<div id="txtdown">
<span style="color: #EE939C; font-size: 30px; vertical-align: middle;">1.80%</span>
<span style="color: #ffffff; font-weight: lighter; font-size: 15px">from yesterday</span>
</div>
</div>
<div class="flex">
<img src="green-up.png" class="center" style="padding-top: 30px; vertical-align: middle;">
<div id="txtdown">
<span style="color: #AEAEAE; font-size: 30px; vertical-align: middle;">text</span>
<span style="color: #ffffff; font-weight: lighter; font-size: 15px">subtext</span>
</div>
</div>
</div>
</div>
Css:
.container--wrap {
background-color: #000000;
border-radius: 15px;
margin: 5px;
overflow: hidden;
}
.flex {
display: flex;
}
.col-lg-3 {
flex: 0 0 25%;
max-width: 25%;
}
.col {
flex-basis: 0;
flex-grow: 1;
max-width: 100%;
}
.inward-text span {
display: inline;
margin-left: 10px;
}
#txtdown {
margin-top: 10px;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
}
Step 1
Remove all inline styles from each element and place them in CSS, as classes, along these lines:
.percent {
color: #EE939C;
font-family: robotobold;
font-size: 30px;
vertical-align: middle;
}
.detail {
color: #ffffff;
font-family: robotolight;
font-weight: lighter;
font-size: 15px;
}
Step 2
Remove all <br/>s
Step 3
Wrap each of the items as the following markup
<div class="fancy-item"> <!-- your group -->
<img ...>
<div> <!-- flexbox sub-group -->
<span class="percent">1.80%</span>
<span class="detail">from yesterday</span>
</div>
</div>
Add the rest of your CSS:
.fancy-item {
display: flex;
align-items: center;
}
Step 4
Add some bottom margin to .percent or top margin to .detail if you want to set them slightly apart.
You're done!
Note: You don't have to use my class names, use whatever makes sense in your context.
Another note: Steps 1-3 are the most important. They allow you to change all the items at once, if you don't like a particular detail, without having to go through each of them and do the modification. DRY is one of the most important principles in programming.
This question already has answers here:
CSS Float: Floating an image to the left of the text
(7 answers)
Align image to left of text on same line - Twitter Bootstrap3
(6 answers)
Wrap text around an image on bootstrap 3
(6 answers)
Closed 3 years ago.
I'm designing people cards and I need to positionate the image on the left side and the text on the right side but I'm having issues doing it.
.row {
display: flex;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}
.col-lg-3 {
position: relative;
width: 100%;
padding-right: 15px;
padding-left: 15px;
}
.media {
margin: 20px 0;
padding: 10px;
vertical-align: middle;
display: inline-block;
width: 100%;
overflow-wrap: break-word;
word-wrap: break-word;
}
<div class="row">
<div class="col-lg-3">
<div class="media">
<div id="left_div">
<img src="/web/image/hr.employee/7/image">
</div>
<div id="right_div">
<span class="label label-default">Marc Demo
<hr style="margin: 0em; border-width: 2px;">
</span>
<span class="label label-default"> HIPOACUSICOS
<hr style="margin: 0em; border-width: 2px;">
</span>
<span class="label label-default">mark.brown23#example.com
<hr style="margin: 0em; border-width: 2px; display: none;">
</span>
</div>
</div>
</div>
I'm trying to use position, width and another properties on "left_div" and "right_div" but I'm not able to format it.
Any suggestion?
Edit: Using display: flex and align-items: center this is the result of it:
Maybe the problem are the inherited styles of other parent divs?
Thanks for reading!
Use display: flex on .media, then use display: block on span elements
You could also avoid to use a presentational tag (<hr>) and use a border-bottom.
Note that if the horizontal space is not enough due to a narrow container you need to wrap the content as in my second example.
.media {
display: flex;
flex-flow: row wrap;
align-items: center; /* optional */
margin: 20px 0;
padding: 10px;
width: 100%;
background: #e8e8e8; }
.media > div {
padding: 10px; }
.media img {
vertical-align: middle;
max-width: 100%;
width: 200px; }
#left_div {
text-align: center;
flex: 1 0 25%; }
#right_div {
flex: 3 0 60%; }
.media span {
display: block;
padding: 5px 0;
word-break: break-all;
word-break: break-word;
border-bottom: 1px #ccc solid; }
<div class="media">
<div id="left_div">
<img src="https://i.stack.imgur.com/UJ3pb.jpg">
</div>
<div id="right_div">
<span class="label label-default">Marc Demo</span>
<span class="label label-default"> HIPOACUSICOS </span>
<span class="label label-default">mark.brown23#example.com </span>
</div>
</div>
<!-- example with narrow parent -->
<div style="width: 200px;">
<div class="media">
<div id="left_div">
<img src="https://i.stack.imgur.com/UJ3pb.jpg">
</div>
<div id="right_div">
<span class="label label-default">Marc Demo</span>
<span class="label label-default"> HIPOACUSICOS </span>
<span class="label label-default">mark.brown23#example.com </span>
</div>
</div>
</div>
Easiest way to do this is to use flexbox.
Make the parent, .media, a flex container, and align-items: center replacing vertical-align: middle
EDIT
I've edited my answer to show 2 "profile cards" side by side. In doing so, I've changed left_div and right_div into classes instead of id, and gave left_div a 40% width.
.row {
display: flex;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}
.col-lg-3 {
position: relative;
width: 100%;
padding-right: 15px;
padding-left: 15px;
display: flex;
}
.media {
margin: 20px 0;
padding: 10px;
display: flex;
align-items: center;
width: 100%;
overflow-wrap: break-word;
word-wrap: break-word;
background-color: #ddd;
margin-right: 15px;
}
.left_div {
width: 40%;
margin-right: 15px;
}
.right_div {
width: 60%;
}
img {
width: 100%;
height: auto;
}
<div class="row">
<div class="col-lg-3">
<div class="media">
<div class="left_div">
<img src="https://i.stack.imgur.com/UJ3pb.jpg">
</div>
<div class="right_div">
<span class="label label-default">Marc Demo
<hr style="margin: 0em; border-width: 2px;">
</span>
<span class="label label-default"> HIPOACUSICOS
<hr style="margin: 0em; border-width: 2px;">
</span>
<span class="label label-default">mark.brown23#example.com
<hr style="margin: 0em; border-width: 2px; display: none;">
</span>
</div>
</div>
<div class="media">
<div class="left_div">
<img src="https://i.stack.imgur.com/UJ3pb.jpg">
</div>
<div class="right_div">
<span class="label label-default">Some one
<hr style="margin: 0em; border-width: 2px;">
</span>
<span class="label label-default"> Barbar
<hr style="margin: 0em; border-width: 2px;">
</span>
<span class="label label-default">fubar#example.com
<hr style="margin: 0em; border-width: 2px; display: none;">
</span>
</div>
</div>
</div>
</div>
You could use flexbox for doing this stuff. Also, I would recommend using classes instead if id's because of css specificity
.row {
display: flex;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}
.col-lg-3 {
position: relative;
width: 100%;
padding-right: 15px;
padding-left: 15px;
}
.media {
margin: 20px 0;
padding: 10px;
display: flex;
}
.media > div{
display: flex;
justify-content: center;
flex-direction: column;
}
.media .right_div{
padding: 10px;
}
<div class="row">
<div class="col-lg-3">
<div class="media">
<div class="left_div">
<img src="https://placehold.it/200x200">
</div>
<div class="right_div">
<span class="label label-default">Marc Demo
<hr style="margin: 0em; border-width: 2px;">
</span>
<span class="label label-default"> HIPOACUSICOS
<hr style="margin: 0em; border-width: 2px;">
</span>
<span class="label label-default">mark.brown23#example.com
<hr style="margin: 0em; border-width: 2px; display: none;">
</span>
</div>
</div>
</div>
You could try a few things here - difficult to get the exact styles right without the design, but you could simply add "display: flex;" to the .media rules.
.row {
display: flex;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}
.col-lg-3 {
position: relative;
width: 100%;
padding-right: 15px;
padding-left: 15px;
}
.media {
margin: 20px 0;
padding: 10px;
vertical-align: middle;
display: inline-block;
width: 100%;
overflow-wrap: break-word;
word-wrap: break-word;
display: flex;
flex-flow: row nowrap;
}
/* You can customise the flex items here to adjust the spacing/styles etc. */
.media .left_div {
flex: 1;
}
.media .right_div {
flex: 1;
}
<div class="row">
<div class="col-lg-3">
<div class="media">
<div class="left_div">
<img src="/web/image/hr.employee/7/image">
</div>
<div class="right_div">
<span class="label label-default">Marc Demo
<hr style="margin: 0em; border-width: 2px;">
</span>
<span class="label label-default"> HIPOACUSICOS
<hr style="margin: 0em; border-width: 2px;">
</span>
<span class="label label-default">mark.brown23#example.com
<hr style="margin: 0em; border-width: 2px; display: none;">
</span>
</div>
</div>
</div>
I've also changed your HTML to use classes instead of IDs for left_div and right_div, as really an ID should not be used more than once on a page.
You can use display: flex to .media like this:
.media {
display: flex;
align-items: center;
margin: 20px 0;
padding: 10px;
vertical-align: middle;
display: inline-block;
width: 100%;
overflow-wrap: break-word;
word-wrap: break-word;
}
Also as I can see data getting out of container. You can use overflow-x: auto; or changing col-lg-3 to some larger classes
Add flex to media class as below
.media {
display: flex;
}
I would like to create a right aligned navbar. Each link item should contain an image and a text. When having text only this code works fine
#navbar {
height: 60px;
display: grid;
justify-content: end;
padding: 20px;
background: red;
align-items: center;
}
a {
text-decoration: none;
margin: 0 10px;
color: white;
background: black;
}
<div id="navbar">
<div>
Home
About
Projects
Contact
Imprint
</div>
</div>
Now I added images and texts to the link item and built a wrapper around these elements.
#navbar {
height: 60px;
display: grid;
justify-items: end;
padding: 20px;
align-items: center;
background: red;
}
#navbarLinkContainer {
margin: 0 60px;
}
.navbarItemContainer {
text-align: center;
text-decoration: none;
margin: 0 10px;
}
.navbarItemImg {
width: 64px;
height: 64px;
}
<div id="navbar">
<div id="navbarLinkContainer">
<a class="navbarItemContainer" href="/">
<div>
<img class="navbarItemImg" src="https://discordapp.com/assets/19654c38399b0e75c351d6fc960fe0ca.svg">
<div class="navbarItemTitle">Home</div>
</div>
</a>
<a class="navbarItemContainer" href="/about">
<div>
<img class="navbarItemImg" src="https://discordapp.com/assets/19654c38399b0e75c351d6fc960fe0ca.svg">
<div class="navbarItemTitle">About</div>
</div>
</a>
<a class="navbarItemContainer" href="/projects">
<div>
<img class="navbarItemImg" src="https://discordapp.com/assets/19654c38399b0e75c351d6fc960fe0ca.svg">
<div class="navbarItemTitle">Projects</div>
</div>
</a>
</div>
</div>
Unfortunately the CSS breaks now. How can I fix it so that each link item is aligned to the right, centered vertically and is placed along the navbar?
I achieved it using flexbox
https://jsfiddle.net/q48tyuac/
but maybe there is a better solution using the grid attribute. Because when you lower the screen size these elements are fixed and I would like them to break to the next row if there is no space left.
use flex-wrap:wrap;
#navbar {
/* height: 60px; */
display: flex;
justify-content: flex-end;
padding: 20px;
flex-wrap:wrap;
align-items: center;
background: red;
/* margin: 0 60px; */
}
https://jsfiddle.net/6p03s5cm/
if you dont want to use flexbox with grid you can target #navbarLinkContainer and do it with columns
#navbar {
display: grid;
justify-items: end;
padding: 20px;
align-items: center;
background: red;
}
#navbarLinkContainer {
display:grid;
grid-template-columns:repeat(3 , 1fr) ;
}
.navbarItemContainer {
text-align: center;
text-decoration: none;
margin: 0 10px;
}
.navbarItemImg {
width: 64px;
height: 64px;
}
<div id="navbar">
<div id="navbarLinkContainer">
<a class="navbarItemContainer" href="/">
<div>
<img class="navbarItemImg" src="https://discordapp.com/assets/19654c38399b0e75c351d6fc960fe0ca.svg">
<div class="navbarItemTitle">Home</div>
</div>
</a>
<a class="navbarItemContainer" href="/about">
<div>
<img class="navbarItemImg" src="https://discordapp.com/assets/19654c38399b0e75c351d6fc960fe0ca.svg">
<div class="navbarItemTitle">About</div>
</div>
</a>
<a class="navbarItemContainer" href="/projects">
<div>
<img class="navbarItemImg" src="https://discordapp.com/assets/19654c38399b0e75c351d6fc960fe0ca.svg">
<div class="navbarItemTitle">Projects</div>
</div>
</a>
</div>
</div>
I've got three div's going here. One's a container then the other 2 are in place for some buttons! But it just doesn't look right. I'm not quite sure how to fix it
.button {
display: inline-block;
padding: 20px 30px;
font-size: 12px;
cursor: pointed;
text-align: center;
text-decoration: none;
outline: none;
color: #fff;
background-color: #AB0002;
border: none;
border-radius: 15px;
}
.divButton {
height: 100%;
width: 100%;
background-color: #e4e4e4;
display: inline-block;
padding-bottom: 5px;
}
HTML:
<div class="divButton">
<p style="text-align: center; padding-top: 15px; color: black;">TEXT!</p>
<!--2 buttons "centered"-->
<div style="float: left; padding-left: 325px;">
<p style="padding-left: 72px;">Centered text above button</p>
<button class="button">TEXT</button>
<button class="button">TEXT</button>
</div>
<!--add spacing to move away from 2 buttons-->
<div style="float: left; padding-left: 125px;">
<p style="padding-left: 40px;">TEXT</p>
<button class="button" style="float: right;">TEXT</button>
</div>
</div>
jsfiddle: https://jsfiddle.net/3ar1L0zy/1/
And what i'm trying to achieve in paint form!
I would move away from using floats - css has moved on sufficiently so you shouldn't need to use them anymore.
Use flex instead:
.button {
display: inline-block;
padding: 20px 30px;
font-size: 12px;
cursor: pointed;
text-align: center;
text-decoration: none;
outline: none;
color: #fff;
background-color: #AB0002;
border: none;
border-radius: 15px;
}
.divButton {
width: 100%; /* you don't really need this - divs are block elements which are 100% by default */
background-color: #e4e4e4;
padding: 0 20px 5px 20px;
box-sizing: border-box; /* as you have set the width, you need this to stop the div being 100% + 40px wide */
display:flex; /* this will align items in a row by default */
flex-wrap:wrap; /* this allows the content to wrap to multiple rows */
justify-content:space-between; /* this will push any content to either side of the row */
}
.divButton > p {
width:100%; /* make this take up full row */
}
.divButton > div {
text-align:center; /* use this to centre text - not padding */
}
<div class="divButton">
<p style="text-align: center; padding-top: 15px; color: black;">TEXT!</p>
<!--2 buttons "centered"-->
<div>
<p>Centered text above button</p>
<button class="button">TEXT</button>
<button class="button">TEXT</button>
</div>
<!--add spacing to move away from 2 buttons-->
<div>
<p>TEXT</p>
<button class="button">TEXT</button>
</div>
</div>
One other tip I would give you is try not to use inline styles - they become very hard to maintain and make it harder to debug too (and cause a lot larger files as you have to repeat code for styles instead of just using a class that can be used multiple times but programmed once)
Instead of use float: left on both div, you can use float right on the right one and remove the padding-left you set:
<div class="divButton">
<p style="text-align: center; padding-top: 15px; color: black;">TEXT!</p>
<!--2 buttons "centered"-->
<div style="float: left;">
<p style="padding-left: 72px;">TEXT</p>
<button class="button">TEXT</button>
<button class="button">TEXT</button>
</div>
<!--add spacing to move away from 2 buttons-->
<div style="float: right;">
<p style="padding-left: 40px;">TEXT</p>
<button class="button" style="float: right;">TEXT</button>
</div>
</div>
https://jsfiddle.net/3ar1L0zy/13/
you can achieve this too by using flexbox too. (better solution in my opinon)
HTML code:
<div class="divButton">
<h3 style="text-align: center; padding-top: 15px; color: black;">TEXT!</h3>
<!--2 buttons "centered"-->
<div class="divText">
<p style="padding-left: 72px;">TEXT</p>
<p style="padding-left: 40px;">TEXT</p>
</div>
<!--add spacing to move away from 2 buttons-->
<div>
<div class="divButtons">
<div>
<button class="button">TEXT</button>
<button class="button">TEXT</button>
</div>
<button class="button">TEXT</button>
</div>
</div>
</div>
CSS code:
.button {
display: inline-block;
padding: 20px 30px;
font-size: 12px;
cursor: pointed;
text-align: center;
text-decoration: none;
outline: none;
color: #fff;
background-color: #AB0002;
border: none;
border-radius: 15px;
}
.button:hover {
background-color: #880002;
}
.divButton {
height: 100%;
width: 100%;
background-color: #e4e4e4;
display: inline-block;
padding-bottom: 5px;
}
.divText {
display: flex;
justify-content: space-around;
}
.divButtons {
display: flex;
justify-content: space-around;
}
<div class="divButton" style="text-align: center;">
<p style="text-align: center; padding-top: 15px; color: black;">TEXT!</p>
<div style="display: inline-block;">
<!--add spacing to move away from 2 buttons-->
<div style="float: right; display: inline-block; padding-left: 125px;">
<p style="text-align: center;">TEXT</p>
<button class="button" style="float: right;">TEXT</button>
</div>
<!--2 buttons "centered"-->
<div style="display: inline-block;">
<p style="text-align: center;">TEXT</p>
<button class="button">TEXT</button>
<button class="button">TEXT</button>
</div>
</div>
</div>
https://jsfiddle.net/3ar1L0zy/85/
I would recommend flexbox
.parent{
background: tomato;
width: 400px;
padding: 30px;
display: flex;
flex-direction: column;
}
.header{
background: yellow;
text-align: center
}
.body{
background: green;
width: 100%;
display: flex;
}
.body-item{
background: pink;
width: 50%;
text-align: center;
padding: 10px;
}
.blue{
background: blue; /* to make it easier to see */
}
.buttons{
display: flex;
flex-wrap: wrap; /* wrap items onto multiple lines if needed, from top to bottom*/
justify-content: space-evenly; /* items are distributed so that the spacing between any two items (and the space to the edges) is equal */
}
<div class="parent">
<h3 class="header">HEADER TEXT</h3>
<section class="body">
<div class="body-item">
<div class="text">Text</div>
<div class="buttons">
<button>Button</button>
<button>Button</button>
</div>
</div>
<div class="body-item blue">
<div class="text">Text</div>
<div class="buttons">
<button>Button</button>
</div>
</div>
</section>
</div>
I have one div containing 3 divs.
original
HTML code
.state {
background-color: rgba(233, 234, 237, 0.9);
height: 7vh;
width: 80%;
border-radius: 14px;
margin: 10px 0 15px 80px;
display: flex;
align-items: stretch;
}
.state-main {
text-align: center;
padding-top: 10px;
font-weight: 900;
font-size: 14px;
}
.options {
text-align: right;
margin-bottom: 10px;
}
.owner-image {
border-top-left-radius: 14px;
border-bottom-left-radius: 14px;
}
<div class="state">
<div class="owner">
<img class="owner-image" src="img/uk.jpg">
</div>
<div class="state-main">
<p class="state-name">PENNSYLVANIA</p>
</div>
<div class="options">
<p id="time"></p>
<button>SEND TROOPS</button>
<button>ATTACK</button>
</div>
</div>
Use flexbox (browser support).
.state {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 80px;
background-color: lightgray;
}
.state,
.btns button {
text-transform: uppercase;
}
<div class="state">
<img src="http://placehold.it/150x80/fc0">
<p>
Pennsylvania
</p>
<div class="btns">
<button>Send Troops</button>
<button>Attack</button>
</div>
</div>
**For IE9 and older you'll need to provide a fallback. Whether or not you need to do this depends on target audience.
.State is the div that contains all 3. .state-main is yellow div and should go at the center. .options is green div should go far right. .owner-image is the red div, and should stay at the same place.
Using flex to put the layout into place.
.state {
display: flex;
justify-content: space-between;
}
.state-mail {
text-align: center;
}
<div class="state">
<div class="owner-image">
<img src="http://placehold.it/100x50" />
</div>
<div class="state-main">PENNSYLVANIA</div>
<div class="options"><button>SEND TROOPS</button><button>ATTACK</button></div>
</div>