I am trying to create a headline and align one text to the left and another to the right and I would like to know if there is another way apart from line-height to achieve that?
.popular {
margin-left: 15px;
float: left;
}
.popular-day {
margin-right: 15px;
float: right
}
.menu-headline {
height: 100px;
outline: 1px solid black;
width: 500px;
text-align: middle;
}
<div class='menu-headline'>
<p class='popular'>Popular</p>
<p class='popular-day'>Today</p>
</div>
It can be done easily with flexbox.
.menu-headline {
outline: 1px solid black;
width: 500px;
height: 100px;
padding: 0 15px;
box-sizing: border-box;
display: flex;
justify-content: space-between;
align-items: center;
}
<div class='menu-headline'>
<p class='popular'>Popular</p>
<p class='popular-day'>Today</p>
</div>
Or using CSS table to support older IE.
.menu-headline {
outline: 1px solid black;
width: 500px;
height: 100px;
display: table;
}
.menu-headline > p {
display: table-cell;
vertical-align: middle;
padding: 0 15px;
}
.popular-day {
text-align: right;
}
<div class='menu-headline'>
<p class='popular'>Popular</p>
<p class='popular-day'>Today</p>
</div>
Related
here is how my screen should look like:
the orange button should be on the right of the "dashboard-detail-body" and have margins to the top, left, and bottom ("dashboard-container")
this is what I tried:
<div class="dashboard-detail-body">
<div style="float: right; margin-right: 10px; margin-top: 15px;">
{{ui-5/button label="click me"}}
</div>
<div class="dashboard-container">
but I do not get the desired behavior - no margin bottom (the orange button is overlapping with the bottom div)
margin-bottom, did not solve it, how can I get the desired behavior?
The issue is with the float: right; style. This makes the element overlap.
You can solve this issue by using flex-box, with the following code:
.dashboard-detail-body{
display: flex;
flex-direction:column;
}
.align-right{
align-self: flex-end;
}
<div class="dashboard-detail-body">
<div class="align-right">
I am right
</div>
<div class="dashboard-container">
<p>a<p>
<p>b<p>
<p>c<p>
</div>
</div>
Though it was difficult to understand and recreate your problem from the available data, I assume that you want to align a button center-right inside the container. You can use flexbox to align elements inside a parent.
.container {
height: 200px;
border: solid 1px #333;
display: flex;
justify-content: right;
align-items: center;
}
button.orange {
border: none;
outline: none;
height: 1.5rem;
/* optional basic styling */
background: orange;
color: #fff;
}
<div class="container">
<button class="orange">Click Me</button>
</div>
You can try with css grid:
.dashboard-detail-body{
display: grid;
grid-template-columns: 1fr;
justify-items: center;
border: 1px solid grey;
border-radius: 2em;
}
.right{
justify-self: end;
margin: 1em 3em 1em 1em;
background-color: orange;
padding: .5em;
border-radius: .5em;
}
.dashboard-container {
display: flex;
justify-content: center;
align-items: start;
border: 1px dashed grey;
border-radius: 1.5em;
margin-bottom: 2em;
width: 95%;
height: 200px;
}
.dashboard-container > p {
padding: 1.5em 2em;
margin: 1em;
border: 1px solid grey;
border-radius: .5em;
}
<div class="dashboard-detail-body">
<div class="right">
click me
</div>
<div class="dashboard-container">
<p></p>
<p></p>
<p></p>
</div>
</div>
As you are shrinking your div with float right it frees space on the left. The clear property doesn't work.
So the solution I came up with is to keep the div full & use a button
.dashboard-detail-body {
background: #eeeeee;
border: 3px solid #bbbbbb;
border-radius: 20px;
height: 80vh;
width: 80%;
min-height: 40rem;
min-width: 45rem;
margin: auto;
}
.btn-area {
height: 5rem;
width: 100%;
/* border: 1px solid red; */
}
.btn {
background: #ff9900;
padding: 10px 15px;
border-radius: 10px;
border: 2px solid #9c7842;
/* clear: left; */
/* display: inline-block; */
float: right;
margin-right: 25px;
margin-top: 25px;
}
.dashboard-container {
border: 3px solid #bbbbbb;
margin: auto;
width: 75%;
height: 75%;
border-radius: 20px;
display: flex;
justify-content: center;
/* align-items: center; */
}
.box {
border: 3px solid #bbbbbb;
width: 6.5rem;
height: 6.5rem;
border-radius: 20px;
float: left;
margin: 1rem;
}
<div class="dashboard-detail-body">
<div class="btn-area">
<button class="btn">Click Me</button>
</div>
<div class="dashboard-container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
I'm having a bit of difficulty creating a rectangle that looks like this. I'm a novice, any help would be great!
This is what I'm trying to recreate:
I know how to make the rectangle, and I'm assuming you would split the rectangle into two sections, where one would use "table" to create the rows for Name, Diagnosis etc.
#box {
margin-top: 1%;
height: 20px;
width: 562px;
border: 1px solid black;
padding: 100px;
}
.container {
display: table;
width: 100%;
}
.left-half {
position: relative;
left: 0px;
}
.right-half {
position: relative;
right: 0px;
}
Solution
Flex grid <3 they are amazing
I have provided you three examples. Rows, columns and an additional example to show more properties of the flex box.
justify-content and align-items are amazing tools to align things quickly.
Example:
/*ExamplE box*/
.example {
float: left;
width: 200px;
height: 100px;
border: 1px solid black;
display: flex;
flex-direction: row; /*Direction of flex*/
justify-content:center; /*horizontally aligns them to center*/
align-items: center; /*Vertically aligns them to center*/
}
.example__children {
width: 5px;
height: 5px;
margin: 0 5px;
border: 1px solid black;
}
/*Column box*/
.column {
float: left;
width: 200px;
height: 100px;
border: 1px solid black;
display: flex;
flex-direction: column;
}
.column__children {
width: 100%;
height: 25%;
border: 1px solid black;
}
/*Row box*/
.row {
float: left;
width: 200px;
height: 100px;
border: 1px solid black;
display: flex;
flex-direction: row;
}
.row__children {
width: 25%;
height: 100%;
border: 1px solid black;
}
<div class="example">
<div class="example__children"></div>
<div class="example__children"></div>
<div class="example__children"></div>
<div class="example__children"></div>
</div>
<div class="column">
<div class="column__children"></div>
<div class="column__children"></div>
<div class="column__children"></div>
<div class="column__children"></div>
</div>
<div class="row">
<div class="row__children"></div>
<div class="row__children"></div>
<div class="row__children"></div>
<div class="row__children"></div>
</div>
I have a small div with fixed width and height, inside i have text, that could be probably wrapped and icon
All i need is to keep icon as close as possible to text, but if text is wrapped it will have extra space inside it
Example at JsFiddle
HTML
<div class="wrapper">
<div class="title">
Total elements
</div>
<div class="icon"></div>
</div>
Css
wrapper {
display: flex;
align-items: center;
justify-content: flex-start;
height: 50px;
width: 100px;
}
.title {
border: 1px solid green;
}
.icon {
border: 1px solid red;
width: 8px;
height: 8px;
}
You can use CSS Grid system:
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
grid-column-gap: 0em;
height: 50px;
width: 100px;
}
SOLUTION 1:
Well. To answer your question, you can straight ahead apply width to the .title.
.wrapper {
display: flex;
align-items: center;
justify-content: flex-start;
height: 50px;
width: 100px;
}
.title {
border: 1px solid green;
width: 58px;
}
.icon {
border: 1px solid red;
width: 8px;
height: 8px;
}
<div class="wrapper">
<div class="title">
Total elements
</div>
<div class="icon"></div>
</div>
SOLUTION 2:
But I would suggest that you use float instead of flex model with the below solution
.wrapper {
height: 50px;
font-size: 0px;
}
.title {
border: 1px solid green;
height: 50px;
line-height: 50px;
}
.icon {
border: 1px solid red;
width: 8px;
height: 8px;
}
.title, .icon {
display: inline-block;
vertical-align: middle;
font-size: 16px;
}
<div class="wrapper">
<div class="title">
Total elements
</div>
<div class="icon"></div>
</div>
<div class="wrapper">
<div class="title">
Total elements
</div>
<div class="icon"></div>
</div>
<style type="text/css">
.wrapper
{
}
.title {
border: 1px solid green;
display: inline-block;
max-width: 60px;
vertical-align: middle;
}
.icon
{
border: 1px solid red;
width: 8px;
height: 8px;
display: inline-block;
}
</style>
So it looks like this:
this is the example code of a message:
.allMsg {
width: 100%;
}
.self {
border-radius: 1rem;
background-color: #28a745;
text-align: right;
padding-left: 5px;
padding-right: 5px;
margin-left: 5px;
margin-right: 5px;
}
.friend {
text-align: left;
}
#chatWith {
text-align: center;
font-family: sans-serif;
font-size: 40px;
padding-bottom: 15px;
border-bottom: 1px solid #eee;
}
<div class='allMsg'>
<p class='self chatMsg'>Hello</p>
</div>
How can i make the border as big as the text inside ... I thought the padding was going to work but unfortunately it didn't so please help me.
It's possible if you wrap your messages inside another element. So let's say all messages have a full-width element, but friends messages will aligned to the left and have a blue background, while yours will aligned to the right and have a green background. If you don't want to change your markup so much, the easiest is to wrap your messages inside a span, than you doesn't need to change anything else in your html.
.allMsg {
width: 100%;
}
.self span, .friend span {
border-radius: 1rem;
padding-left: 5px;
padding-right: 5px;
margin-left: 5px;
margin-right: 5px;
}
.self span {
background-color: #28a745;
}
.friend span {
background-color: #2845a7;
}
.self {
text-align: right;
}
.friend {
text-align: left;
}
<div class='allMsg'>
<p class='chatMsg friend'>
<span>hello</span>
</p>
<p class='chatMsg self'>
<span>hy</span>
</p>
<p class='chatMsg friend'>
<span>how are you friend?</span>
</p>
<p class='chatMsg self'>
<span>i'm fine thanks</span>
</p>
</div>
You could use flexbox on the container:
.allMsg {
width: 100%;
display: flex;
flex-flow: column nowrap;
align-items: flex-end;
}
Example:
.allMsg {
width: 100%;
display: flex;
flex-flow: column nowrap;
align-items: flex-end;
}
.self {
border-radius: 1rem;
background-color: #28a745;
text-align: right;
padding-left: 5px;
padding-right: 5px;
margin-left: 5px;
margin-right: 5px;
}
.friend {
text-align: left;
}
#chatWith {
text-align: center;
font-family: sans-serif;
font-size: 40px;
padding-bottom: 15px;
border-bottom: 1px solid #eee;
}
<div class='allMsg'>
<p class='self chatMsg'>Hello</p>
<p class='self chatMsg'>This is a test</p>
</div>
See Fiddle
I have an image and two sets of text (one is a "label" and one is a "ranking").
<div class="contentsInfo">
<img src="http://lorempixel.com/90/30" />
<span>Here is some info</span>
<span>20</span>
</div>
I would like to align each to be centered vertically, the label to show up next to the image, and for the ranking data to be right aligned in the container.
However, it is not aligning in the middle, and the info and ranking "columns" are being switched (the ranking shows up in the middle, and the label to the right side).
Here is my css:
.contentsInfo
{
font-size: 0.80em;
border-bottom: 1px grey dotted;
vertical-align: middle;
display: table;
width: 100%;
}
.contentsInfo>span
{
float: right;
margin-left: 5px;
vertical-align: middle;
display: table-cell;
}
.contentsInfo span
{
font-size: 1.1em;
}
.contentsInfo img
{
height: 30px;
vertical-align: middle;
margin-right: 2px 5px 2px 0px;
padding: 2px 0px;
}
Wrap your contents in elements and do the following:
HTML:
<div class="contentsInfo">
<div>
<img src="http://lorempixel.com/90/30" />
<span>Here is some info</span>
</div>
<div>
<span>20</span>
</div>
</div>
CSS:
body,
html {
padding: 0px;
margin: 0px;
}
.contentsInfo {
font-size: 0.80em;
border-bottom: 1px grey dotted;
vertical-align: middle;
display: table;
width: 100%;
}
.contentsInfo>div {
margin-left: 5px;
vertical-align: middle;
display: table-cell;
}
.contentsInfo > div:first-child {
width: 100%;
}
.contentsInfo > div:last-child {
white-space: nowrap;
}
.contentsInfo span {
font-size: 1.1em;
}
.contentsInfo img {
height: 30px;
vertical-align: middle;
margin-right: 2px 5px 2px 0px;
padding: 2px 0px;
}
Working Fiddle
You can do like following way using display:flex. I have added on class ranking to align it right side.
*{
margin:0;
}
.contentsInfo
{
font-size: 0.80em;
border-bottom: 1px grey dotted;
display: flex;
align-items: center;
}
.contentsInfo>span
{
margin-left: 5px;
display: flex;
flex: 1 1 auto;
margin-right: 5px;
}
.ranking{
justify-content: flex-end;
}
.contentsInfo span
{
font-size: 1.1em;
}
.contentsInfo img
{
height: 30px;
padding: 2px 0px;
}
<div class="contentsInfo">
<img src="http://lorempixel.com/90/30" />
<span>Here is some info</span>
<span class="ranking">20</span>
</div>
Fiddle