I want possibly the simplest CSS code for aligning 2 lines of text with 1 single icon on the left side. I am attaching the sample here: https://prnt.sc/1udg41j
Please help with the minimal code if possible.
Make sure the image is within the same parent as the text and then to have the icon be on the left side. I believe you'll need to type:
example {
float: left;
}
It would be much easier if you included the code. :P
.main {
display: flex;
}
.iconbox {
display: flex;
align-items: center;
background-color: #f5f5f5;
}
.icon {
margin-right: 10px;
border: 1px solid red;
font-size: 42px;
height: 50px;
width: 50px;
display: grid;
place-content: center;
}
h3 {
margin: 0;
}
p {
margin: 5px 0 0;
}
<div class="main">
<div class="iconbox">
<span class="icon">⅀</span>
<div class="detail">
<h3>heading here</h3>
<p>discription here..</p>
</div>
</div>
<div class="iconbox">
<span class="icon">⅀</span>
<div class="detail">
<h3>heading here</h3>
<p>discription here..</p>
</div>
</div>
<div class="iconbox">
<span class="icon">⅀</span>
<div class="detail">
<h3>heading here</h3>
<p>discription here..</p>
</div>
</div>
</div>
Related
I have mat dialog box in Angular project and I want to make 1 row at the top and 3 row at the bottom just like the picture below but some reason I can't make it work. Also I don't want horizontal scroll bar and trying to hide it by playing with the width but I'm not sure why it's still there. Any suggestion
HTML
<div mat-dialog-content class="dialog-container">
<div class="column">
<div class="header">Tops</div>
</div>
<div class="parent">
<div class="left">
<div class="sub-header">Left</div>
<div style="background-color: darkblue;">
<div></div>
</div>
</div>
<div class="center">
<div class="sub-header">Center</div>
</div>
<div class="right">
<div class="sub-header">Right</div>
</div>
</div>
</div>
CSS
.dialog-container{
width: 1000px;
height:1000px;
overflow-x:hidden;
}
.header{
position: relative;
font-size: 20px;
text-align: center;
font-family: 'Raleway';
}
.button{
margin-top: 15px;
align-items: center;
}
.clickable {
cursor: pointer;
}
.parent {
display: flex;
overflow: hidden;
}
.column{
display: flex;
flex-direction: column;
background-color: blue;
}
.left {
width: 200px;
background-color: green;
}
.right {
width: 300px ;
background-color: blue;
}
.center{
width: 300px;
background-color: red;
}
.header{
font-size: 30px;
font-family: "Raleway-ExtraLight";
padding: 30px;
}
.sub-header{
font-size: 20px;
margin-top: 25px;
font-weight: bold;
}
Right now it look like this
The final design I want to achieve
I'm not sure how many columns or rows will be needed to achieve it like the final design but I playing around for now. Any suggestion will be really helpful.
You could use mat-grid. You just have to define your row and cols and that's it.
You will have 4 cols and 4rows. Your buttons at the bottom will go in the mat-dialog-actions div made for this.
Here is how you could do with mat-grid-list : Demo on StackBlitz
If the demo is nto working, here the code so you can try it :
html:
<mat-grid-list cols="18" rowHeight="1:3">
<mat-grid-tile [colspan]="3">Map Insights</mat-grid-tile>
<mat-grid-tile [colspan]="7">
<input type="text" placeholder="blablabla" />
</mat-grid-tile>
<mat-grid-tile></mat-grid-tile>
<mat-grid-tile [colspan]="7"><i>Blablablabla your text in italic</i></mat-grid-tile>
<mat-grid-tile [rowspan]="5" [colspan]="3">Your side bar</mat-grid-tile>
<mat-grid-tile [rowspan]="5" [colspan]="7"></mat-grid-tile>
<mat-grid-tile [rowspan]="5">=></mat-grid-tile>
<mat-grid-tile [rowspan]="5" [colspan]="7"></mat-grid-tile>
</mat-grid-list>
css:
mat-grid-tile {
background: lightblue;
}
Css is just here to show the blocks ;)
I am working on a simple tool that display stats.
We want to display 2 panels, of the same height width small boxed inside, all of the same height.
My result is very close to what we want to produce, but the boxes has weird padding.
<div class="col-md-6 greybox">
<div class="row">
<div class="col-md-12">
<div class="col-md-12">
<h2>Title of the box</h2>
</div>
</div>
</div>
<div class="col-md-12 flex">
<div class="row flex">
<div class="col-md-6">
<div class="statbox">
<div class="absolute-center">
<h3>Revelant</h3>
<p>lorem</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="statbox">
<div class="absolute-center">
<h3>Revelant data</h3>
<p>Lorem ipsum</p>
</div>
</div>
</div>
</div>
</div>
</div>
The full script is availlable at http://codepen.io/joe_desmeules/pen/LRBKEp
We are using Bootstrap 3.7.
We are using Scss.
Im not interested using Jquery to fix the issue (we use Angular2)
The data will be dynamic. I can't use fixed height to fix the issue.
The provided codepen is a prototype, with placeholder color, i promise the result will have prettier colors :).
The weird padding is probably caused by the title of the box, but i dont know how to fix it.
Removing the title, and edit the CSS of the .greybox fix the issue
We need to keep the title in the final result.
Thank you for helping me, im out of ideas!
(Sorry, english isn't my first language)
I have update your css(scss), it dont have any padding or white space which u were pointing in ur image, see codepen here
h2{
margin: 0;
}
html,
body {
padding: 10px;
.greybox {
background-color: #c7c7c7;
padding-bottom: 20px;
margin: 0 10px 300px;
border-radius: 10px;
}
.statbox {
background-color: #f1f1f1;
padding: 10px;
border-radius: 10px;
height: 100%;
width: 100%;
text-align: center;
display: table;
bottom: 0px;
h3 {
font-weight: bold;
color: #1155cc;
margin: 0;
}
}
.flex {
display: flex;
//flex-direction: row;
//justify-content: space-around;
height: 100%;
width: 100%;
margin: 0;
}
.absolute-center {
display: table-cell;
vertical-align: top;
text-align: center;
height: 100%;
padding: 0;
margin: 0;
}
}
I am using angular-material and materializecss. I'm not really strong with css but i tried to play with it and not much of results ...
I am trying to inline the avatar with the text so far i tried to use span with class to try style the text together with img but no success..
Best result i got so far is , text after avatar but slightly below avatar.
my HTML and custom css.
.gallery{
margin-bottom: 10px;
}
.responsive-img{
width: 100%;
}
.img-info{
text-align: center;
background: #b3e5fc;
color: black;
width: 100%;
margin-bottom: 10px;
padding: 10px 0;
}
.circle{
width: 60;
margin: 10px 5%;
}
.black-text{
text-align: center;
}
.circle .black-text{
display: inline;
}
<div class="row gallery">
<div class="col l3 col m4 col s12" ng-repeat="image in images">
<md-card class="z-depth-3">
<!--INSTAGRAM PHOTOS-->
<a>
<img class="responsive-img" ng-src="{{image.images.standard_resolution.url}}" alt="">
</a>
<!--USER AND AVATAR-->
<div class="img-info">
<img class="circle" ng-src="{{image.user.profile_picture}}">{{image.user.username}}
</div>
</md-card>
</div>
</div>
Use this:
.img-info img.circle{
vertical-align: middle;
}
And next time, share rendered HTML, the html you was shared is not useful.
snippet:
.img-info img.circle{
vertical-align: middle;
}
.gallery{
margin-bottom: 10px;
}
.responsive-img{
width: 100%;
}
.img-info{
text-align: center;
background: #b3e5fc;
color: black;
width: 100%;
margin-bottom: 10px;
padding: 10px 0;
}
.circle{
width: 60;
margin: 10px 5%;
}
.black-text{
text-align: center;
}
.circle .black-text{
display: inline;
}
<div class="row gallery">
<div class="col l3 col m4 col s12" ng-repeat="image in images">
<md-card class="z-depth-3">
<!--INSTAGRAM PHOTOS-->
<a>
<img class="responsive-img" ng-src="{{image.images.standard_resolution.url}}" alt="">
</a>
<!--USER AND AVATAR-->
<div class="img-info">
<img class="circle" src="http://dummyimage.com/50x50/000655/fff"> The text
</div>
</md-card>
</div>
</div>
I'd like to display four elements side by side. I'm using display: table and display: table-cell to accomplish this:
#container {
width: 960px;
background-color: orange;
height: 400px;
}
#table {
display: table;
table-layout: fixed;
border-spacing: 10px;
width: 100%;
}
div.item {
display: table-cell;
height: 150px;
background-color: blue;
}
<div id="container">
<div id="table">
<div class="item">
Text 1
</div>
<div class="item">
Text 2
</div>
<div class="item">
Text 3
</div>
<div class="item">
Text 4
</div>
</div>
</div>
How can I make the rightmost and leftmost cells flush with the container div's edge and maintain equal spacing between the inner cells?
Thank you!
An easy way would be to use border on cells instead of border-spacing. Then you could cancel out border on the first of last cell. Also, keep the colour same as that of your container.
div.item {
display: table-cell;
border: 10px solid orange; /* Same colour as of the container */
border-left: none; /* reset left border to keep uniform */
}
div.item:last-child { border-right: none; } /* remove from last one */
Example Snippet:
#container {
width: 960px;
background-color: orange;
height: 400px;
}
#table {
display: table;
table-layout: fixed;
width: 100%;
}
div.item {
display: table-cell;
height: 150px;
background-color: blue;
border: 10px solid orange;
border-left: none;
}
div.item:last-child { border-right: none; }
<div id="container">
<div id="table">
<div class="item">
Text 1
</div>
<div class="item">
Text 2
</div>
<div class="item">
Text 3
</div>
<div class="item">
Text 4
</div>
</div>
</div>
You can remove the table div and make container display: flex with space-between justification.
<div id="container">
<div class="item">
Text 1
</div>
<div class="item">
Text 2
</div>
<div class="item">
Text 3
</div>
<div class="item">
Text 4
</div>
</div>
#container {
display: flex;
justify-content: space-between;
}
.item {
background-color: red;
width: 24%;
}
https://jsfiddle.net/kyy7qgLz/2/
I know this is a rather simple question, but I can't figure it out for the life of me. I have two links which I've applied a background image to. Here's what it currently looks like (apologies for the shadow, just a rough sketch of a button):
However, I want those two buttons to be side by side. I can't really figure out what needs to be done with the alignment.
Here's the HTML
<div id="dB"}>
Download
</div>
<div id="gB">
Gallery
</div>
Here's the CSS
#buyButton {
background: url("assets/buy.png") 0 0 no-repeat;
display:block;
height:80px;
width:232px;
text-indent:-9999px;
}
#buyButton:hover{
width: 232px;
height: 80px;
background-position: -232px 0;
}
#buyButton:active {
width: 232px;
height: 80px;
background-position: -464px 0;
}
#galleryButton {
background: url("images/galleryButton.png") 0 0 no-repeat;
display:block;
height:80px;
width:230px;
text-indent:-9999px;
}
#galleryButton:hover{
width: 230px;
height: 80px;
background-position: -230px 0;
}
#galleryButton:active {
width: 230px;
height: 80px;
background-position: -460px 0;
}
Beware float: left… 🤔
…there are many ways to align elements side-by-side.
Below are the most common ways to achieve two elements side-by-side…
Demo: View/edit all the below examples on Codepen
Basic styles for all examples below…
Some basic css styles for parent and child elements in these examples:
.parent {
background: mediumpurple;
padding: 1rem;
}
.child {
border: 1px solid indigo;
padding: 1rem;
}
Using the float solution my have unintended affect on other elements. (Hint: You may need to use a clearfix.)
html
<div class='parent'>
<div class='child float-left-child'>A</div>
<div class='child float-left-child'>B</div>
</div>
css
.float-left-child {
float: left;
}
html
<div class='parent'>
<div class='child inline-block-child'>A</div>
<div class='child inline-block-child'>B</div>
</div>
css
.inline-block-child {
display: inline-block;
}
Note: the space between these two child elements can be removed, by removing the space between the div tags:
html
<div class='parent'>
<div class='child inline-block-child'>A</div><div class='child inline-block-child'>B</div>
</div>
css
.inline-block-child {
display: inline-block;
}
html
<div class='parent flex-parent'>
<div class='child flex-child'>A</div>
<div class='child flex-child'>B</div>
</div>
css
.flex-parent {
display: flex;
}
.flex-child {
flex: 1;
}
html
<div class='parent inline-flex-parent'>
<div class='child'>A</div>
<div class='child'>B</div>
</div>
css
.inline-flex-parent {
display: inline-flex;
}
html
<div class='parent grid-parent'>
<div class='child'>A</div>
<div class='child'>B</div>
</div>
css
.grid-parent {
display: grid;
grid-template-columns: 1fr 1fr
}
Apply float:left; to both of your divs should make them stand side by side.
keep it simple
<div align="center">
<div style="display: inline-block"> <img src="img1.png"> </div>
<div style="display: inline-block"> <img src="img2.png"> </div>
</div>
.section {
display: flex;
}
.element-left {
width: 94%;
}
.element-right {
flex-grow: 1;
}
<div class="section">
<div id="dB" class="element-left" }>
Download
</div>
<div id="gB" class="element-right">
Gallery
</div>
</div>
or
.section {
display: flex;
flex-wrap: wrap;
}
.element-left {
flex: 2;
}
.element-right {
width: 100px;
}
<div class="section">
<div id="dB" class="element-left" }>
Download
</div>
<div id="gB" class="element-right">
Gallery
</div>
</div>