how do I position it at the center vertically?
<div class="ui-grid-b">
<div class="ui-block-a">Block A</div>
<div class="ui-block-b">Block B</div>
<div class="ui-block-c">Block C</div>
</div>
Use the vertical-align property.
div[class|=ui-grid] {
background: red;
text-align: center;
padding: 30px; }
div[class|=ui-block] {
background: blue;
font: 10px Verdana;
color: #fff;
padding: 10px;
vertical-align: middle;
display: inline-block; }
.ui-block-a { height: 100px; }
.ui-block-b { height: 50px; }
.ui-block-c { height: 200px; }
div[class|=ui-grid] and div[class|=ui-block] are using the attribute selector.
Preview: http://jsfiddle.net/Wexcode/LzuYR/
Related
Hello i need to have a css circle and on right a text, inline.
I use this code
<div class="circlearancione">Disponibile</div>
.circlearancione{
background-color: red;
border-color: white;
border-radius: 50%;
border-width: 5px;
height: 25px;
width: 25px;
}
But using this my text not have any space between circle and text. I try to use margin and padding but nothing change.
Also try to use
<div class="circlearancione"></div><p>Disponibile</p>
.circlearancione, p { display: inline; }
But with this not display the circle.
What's wrong?
Thanks
You can use :before pseudo-element for circle and Flexbox for vertical alignment.
.circlearancione {
display: flex;
align-items: center;
}
div:before {
content: '';
background-color: red;
border-color: white;
border-radius: 50%;
border-width: 5px;
height: 25px;
width: 25px;
}
<div class="circlearancione">Disponibile</div>
You can also put your text in span and add it some margin-left.
.circlearancione {
background-color: red;
border-color: white;
border-radius: 50%;
border-width: 5px;
height: 25px;
width: 25px;
line-height: 25px;
}
span {
margin-left: 30px;
}
<div class="circlearancione"><span>Disponibile</span></div>
You could use simple flex to achieve it. It promotes fluid, responsive, scalable and readable structure.
HTML
<div class="container">
<div class="circlearancione"></div>
<p>Disponibile1</p>
</div>
<div class="container">
<div class="circlearancione"></div>
<p>Disponibile2</p>
</div>
<div class="container">
<div class="circlearancione"></div>
<p>Disponibile3</p>
</div>
CSS
.container {
display: flex;
align-items: center;
justify-content: center;
}
p { margin:0; }
.container {
display: flex;
align-items: center;
justify-content: center;
}
.circlearancione{
background-color: red;
border-color: white;
border-radius: 50%;
border-width: 5px;
height: 25px;
width: 25px;
}
p { margin:0; }
<div class="container">
<div class="circlearancione"></div>
<p>Disponibile1</p>
</div>
<div class="container">
<div class="circlearancione"></div>
<p>Disponibile2</p>
</div>
<div class="container">
<div class="circlearancione"></div>
<p>Disponibile3</p>
</div>
I can imagine something like this if you would like to avoid using flex.
.circlearancione {
display: inline-block;
vertical-align: middle;
margin: 0 5px 0 0;
background-color: red;
border-color: white;
border-radius: 50%;
border-width: 5px;
height: 25px;
width: 25px;
}
<div id="container">
<p>
<span class="circlearancione"></span>Disponibile
</p>
</div>
My suggestion would be to place a span within your div that will act like the circle
<div class="circlearancione"><span></span> Disponibile</div>
Here is a fiddle: https://jsfiddle.net/v5LLp7uf/
Three small divs, stacked upon each other, with a big three-small-divs-high div on their right side. How do I do this? Does Bootstrap have anything prepared for it?
You don't need to use any framework, you can do this with Flexbox.
.content {
display: flex;
}
.left {
display: flex;
flex-direction: column;
flex: 1;
}
.box {
padding-bottom: 50px;
}
.right {
flex: 3;
background: #22B14C;
}
.box:nth-child(1) {background: #ED1C24;}
.box:nth-child(2) {background: #00A2E8;}
.box:nth-child(3) {background: #FFAEC9;}
<div class="content">
<div class="left">
<div class="box">Small DIv</div>
<div class="box">Small DIv</div>
<div class="box">Small DIv</div>
</div>
<div class="right">Big div</div>
</div>
This should do it:
#left, #right {
float: left;
font-weight: bold;
font-family: Calibri, sans-serif;
font-size: 20px;
}
#left .small {
display: block;
width: 200px;
height: 55px;
padding: 12px;
box-sizing: border-box;
}
#right {
display: block;
width: 400px;
height: 165px;
padding: 20px;
box-sizing: border-box;
font-size: 60px;
}
<div id="left">
<div class="small" style="color: #22B14C; background-color: #ED1C24">Small div</div>
<div class="small" style="color: #FFAEC9; background-color: #00A2E8">Small div</div>
<div class="small" style="color: #ED1C24; background-color: #FFAEC9">Small div</div>
</div>
<div id="right" style="color: #0099DB; background-color: #22B14C">Big div</div>
If you want that it has a width of 100%, use
#right {
/* ... */
width: calc(100% - 200px);
}
I'm having trouble with creating a nested divs like in the attached image.
Image
I would love if some one can show me how.
.demo-container {
padding: 30px;
border: 1px solid #e2e4e7;
background-color: #f5f7f8;
text-align: left;
display: inline-block;
vertical-align: top;
}
.header {
display: block;
padding: 15px 25px 0;
overflow: hidden;
}
<div id="warp">
<div class="header">
New Alerts
</div>
<div class="demo-container">
</div>
</div>
You need to set height and width to your parent #wrap , see full snippet below:
snippet
* {
box-sizing: border-box
}
#wrap {
height: 200px;
width: 200px;
text-align: center;
}
.header {
display: block;
padding: 15px 25px;
background: blue;
color: white;
}
.demo-container {
width: 100%;
padding: 30px;
border: 1px solid #e2e4e7;
background-color: #f5f7f8;
display: inline-block;
vertical-align: middle;
color:black;
}
<div id="wrap">
<div class="header">
New Alerts
</div>
<div class="demo-container">
X Alerts
</div>
</div>
How to make the inside divs fit to the contents in the below html
I tried with display:inline-block but it moves the 2nd div to the bottom.
<div class="ms-table">
<div class="tableCol-75">
</div>
<div class="tableCol-25">
</div>
</div>
There you go:
.ms-table {
width: 80%;
}
.tableCol-70 {
float: left;
width: 70%;
border: 1px solid black;
margin-right: 10px;
}
.tableCol-25 {
float: left;
width: 25%;
border: 1px solid blue;
}
<div class="ms-table">
<div class="tableCol-70">
My name is abc and I live in ams.
</div>
<div class="tableCol-25">
I love junk food even though it is unhealthy
</div>
</div>
use display: table
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.ms-table{
display: table;
width: 100%;
height: 100px;
}
.table-cell{
display: table-cell;
vertical-align: top;
padding: 15px;
}
.tableCol-75{
width: 75%;
background: #ccc;
}
.tableCol-25{
width: 25%;
background: #000;
color: #fff;
}
<div class="ms-table">
<div class="table-cell tableCol-75">75%</div>
<div class="table-cell tableCol-25">25%</div>
</div>
use display: inline-block;
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.ms-table{
width: 100%;
min-height: 100px;
}
.table-cell{
display: inline-block;
vertical-align: top;
padding: 15px;
}
.tableCol-75{
width: 75%;
background: #ccc;
}
.tableCol-25{
width: 25%;
background: #000;
color: #fff;
}
<div class="ms-table">
<div class="table-cell tableCol-75">75%</div><!--
--><div class="table-cell tableCol-25">25%</div>
</div>
I'm trying to align several DIVS, Images and text and I can't figure this out..
Here's what I'm trying to achieve:
Heres' my HTML
<div class="section5">
<div class="outer">
<div class="container1">
<img src="icon.png" width="85">
<div class="title1">Text</div>
<div class="subtitle1">Text</div>
</div>
<div class="container2">
<img src="iphone.png" width="375">
<div class="subtitle2">Text</div>
</div>
</div>
</div>
Here is my CSS:
.section5{ height: 525px; background-color: #5e6172; text-align: center; position: relative;}
.outer{ width: 80%; background-color: #45da45; height: 100%; margin: 0 auto; position: relative;}
.title1{color: #ffffff; font-size: 2.6em; font-family: h35; }
.subtitle1{color: #ffffff; font-size: 1.5em; font-family: h35; margin-top: 0.25em; }
.subtitle2{color: #ffffff; font-size: 1.5em; font-family: h35; margin-top: 0.25em; }
.container1{display: block; background-color: #ccc; }
.container2{display: block; background-color: #fffc1e; }
Here is the JSFIDDLE:
http://jsfiddle.net/mib92/hogwohf8/
My current problems:
1) My text at the bottom needs to be on the right side of the image.. center like in my example image.
2) the bottom of my bottom picture must be align to the bottom of container2 AND the bottom of section5
3) While doing this, the container 1 must remain in the vertical middle of the remaining space of the section5.
Thank you
I hops it's help you.
.section5 {
height: 525px;
background-color: #5e6172;
text-align: center;
position: relative;
}
.outer {
width: 80%;
background-color: #45da45;
height: 100%;
margin: 0 auto;
position: relative;
}
.title1 {
color: #ffffff;
font-size: 2.6em;
font-family: h35;
}
.subtitle1 {
color: #ffffff;
font-size: 1.5em;
font-family: h35;
margin-top: 0.25em;
}
.subtitle2 {
color: #ffffff;
font-size: 1.5em;
font-family: h35;
margin-top: 0.25em;
}
.container1 {
display: block;
background-color: #ccc;
}
.container2 {
display: block;
background-color: #fffc1e;
}
.right-sied {
display: inline-block;
vertical-align: top;
width: 41%;
}
.left-sied {
display: inline-block;
width: 49%;
}
.left-sied img {
max-width: 100%;
}
<div class="section5">
<div class="outer">
<div class="container1">
<img src="icon.png" width="85">
<div class="title1">Text</div>
<div class="subtitle1">Text</div>
</div>
<div class="container2">
<div class="left-sied">
<img src="iphone.png" width="375">
</div>
<div class="right-sied">
<div class="subtitle2">Text</div>
</div>
</div>
</div>
</div>
Live Demo
check this:
.section5 {
height: 525px;
background-color: #5e6172;
text-align: center;
position: relative;
}
.outer {
width: 80%;
background-color: #45da45;
height: 100%;
margin: 0 auto;
position: relative;
}
.title1 {
color: #ffffff;
font-size: 2.6em;
font-family: h35;
}
.subtitle1 {
color: #ffffff;
font-size: 1.5em;
font-family: h35;
margin-top: 0.25em;
}
.subtitle2 {
color: #ffffff;
font-size: 1.5em;
font-family: h35;
margin-top: 0.25em;
}
.container1 {
display: block;
background-color: #ccc;
}
.container2 {
display: block;
background-color: #fffc1e;
}
.container1 .wrapper {
display: inline-block;
float: right;
}
.container2 img {
margin: 0 auto;
}
<div class="section5">
<div class="outer">
<div class="container1">
<img src="http://images.all-free-download.com/images/graphiclarge/daisy_pollen_flower_220533.jpg" width="85">
<div class="wrapper">
<div class="title1">Text</div>
<div class="subtitle1">Text</div>
</div>
</div>
<div class="container2">
<div class="subtitle2">Text</div>
<img src="http://images.all-free-download.com/images/graphiclarge/daisy_pollen_flower_220533.jpg" width="375">
</div>
</div>
</div>