I am using bootstrap and I am attempting to make a Cell that is 100% height and width of its host container.
The title is 30% of that space and the value is 70%. There are upper and lower limits of the value that take up 20% each leaving 60% of the space for the actual value.
HTML:
<div class="container-fluid parameterContainer">
<div class="row paramHead">
<span class="virtAlignFix"></span>
<div class="centerText">
SPO2 (%)
</div>
</div>
<div class="row paramValWrapper">
<div class="row paramLimit">
<span class="virtAlignFix"></span>
<div class="centerText">
200
</div>
</div>
<div class="row paramValue">
<span class="virtAlignFix"></span>
<div class="centerText">
80
</div>
</div>
<div class="row paramLimit">
<span class="virtAlignFix"></span>
<div class="centerText">
40
</div>
</div>
</div>
CSS:
html {
height: 100%;
width: 100%;
}
body {
height: 100%;
width: 100%;
}
.virtAlignFix {
line-height: 100%;
}
.parameterContainer {
height: 100%;
width: 100%;
}
.paramValWrapper {
height: 70%;
width: 100%;
}
.paramLimit {
height: 20%;
width: 100%;
text-align:center
}
.paramHead {
height: 30%;
width: 100%;
text-align:center
}
.paramValue {
height: 80%;
width: 100%;
text-align:center
}
.centerText {
vertical-align:middle;
display:inline-block;
}
Fiddle of my attempt:
http://jsfiddle.net/WCBjN/1173/
EDIT: added height % to body and page.
Making text central is fairly trivial, the easiest approach is as follows. You can check out the jsFiddle too: https://jsfiddle.net/jL9bs0j7/
.text-container {
height:200px;
width:400px;
border: 1px solid #000;
text-align: center;
}
.text-container span {
display: block;
position: relative;
top: 50%;
transform: translateY(-50%);
}
<div class="text-container">
<span>Hello World</span>
</div>
Related
I am trying to create three separate rounded images on the same line. I managed to get two in the correct position but I can't get the last one to move up into the correct line.
.wrap {
width: 100%;
}
.image-left {
content: url(https://s16.postimg.org/qm1wc2syd/alexandru_stavrica_166342.png);
height: 250px;
float: left;
padding-left: 10%;
}
.image-centre {
content: url(https://s23.postimg.org/57nxodezv/jorg_angeli_128760.png);
height: 250px;
margin-left: auto;
margin-right: auto;
}
.image-right {
content: url(https://s3.postimg.org/ejuuxd6n7/jay_wennington_2250_min.png);
height: 250px;
float: right;
padding-right: 10%;
}
<div class="wrap">
<div class="image-left"></div>
<div class="image-centre"></div>
<div class="image-right"></div>
</div>
There's probably a better way to do this, but here's one that works: https://jsfiddle.net/5ybLh6vy/
<div class="wrap">
<div class="image-left">
<img src="https://s16.postimg.org/qm1wc2syd/alexandru_stavrica_166342.png">
</div>
<div class="image-centre">
<img src="https://s23.postimg.org/57nxodezv/jorg_angeli_128760.png">
</div>
<div class="image-right">
<img src="https://s3.postimg.org/ejuuxd6n7/jay_wennington_2250_min.png">
</div>
</div>
.wrap {
width: 100%;
display: table;
}
.wrap img {
box-sizing: border-box;
width: 100%;
padding: 5px;
}
.image-left, .image-centre, .image-right {
display: table-cell;
width: 33%;
}
How about using the image tag and wrapping them around a div like this?
.wrap {
width: 100%;
}
.image-wrapper{
width: 33%;
display: inline-block;
text-align: center;
}
.image-wrapper>img{
height:250px;
}
<div class="wrap">
<div class="image-wrapper">
<img src='https://s16.postimg.org/qm1wc2syd/alexandru_stavrica_166342.png'>
</div>
<div class="image-wrapper">
<img src='https://s23.postimg.org/57nxodezv/jorg_angeli_128760.png'>
</div>
<div class="image-wrapper">
<img src='https://s3.postimg.org/ejuuxd6n7/jay_wennington_2250_min.png'>
</div>
</div>
Float all three of the divs right, make them width: 33.33% and box-sizing: border-box.
This will make three evenly spaced images floated inline.
If you want them all in a neat row you'll have to add float:left; to all of them and or to the .wrap class but you would have to add display:inline; to each image which I think is the best solution. Problem is if the the viewport isn't wide enough it will push to the next line.
.wrap {
width: 100%;
float: left;
}
.image-left {
content:url(https://s16.postimg.org/qm1wc2syd/alexandru_stavrica_166342.png);
height: auto;
max-width: 25%;
padding-left: 10%;
display:inline;
}
.image-centre {
content: url(https://s23.postimg.org/57nxodezv/jorg_angeli_128760.png);
max-width: 25%;
height:auto;
display:inline;
}
.image-right {
content:url(https://s3.postimg.org/ejuuxd6n7/jay_wennington_2250_min.png);
height: auto;
max-width: 25%;
display:inline;
padding-right: 10%;
}
<div class="wrap">
<div class="image-left"></div>
<div class="image-centre"></div>
<div class="image-right"></div>
</div>
You could assign float: left; for all of your images, and then set correct margins.
JsFiddle Demo
I have 2 divs in a container (actually I tagged the first as h1) and I'd like the 2nd div to take the remaining space of it's parent div. Doing height:100% makes it use 100% of its parent height causing it to be larger then the parent because of the other div. In the demo you can see the blue pass the grey.
How do I tell it to use the remaining height? The HTML may change but try not to go crazy
HTML:
<div class="outer_box">
<div class="container">
<h1>Title</h1>
<div class="box">Box</div>
</div>
<div class="container">
<h1>Title</h1>
<div class="box2">Box</div>
</div>
</div>
CSS:
.outer_box {
height: 500px;
}
.container {
width: 30%;
height: 100%;
background-color: grey;
float:left
}
.box {
background-color: blue;
height: 100%;
}
.box2 {
background-color: green;
}
You could do the CSS table layout, and set the box to height:100% to push the title to its minimal height.
http://jsfiddle.net/0w7pqeo6/3/
.outer_box {
height: 300px;
}
.container {
width: 30%;
height: 100%;
background-color: grey;
float: left;
display: table;
}
.container h1, .container > div {
display: table-row;
}
.box {
background-color: blue;
height: 100%;
}
.box2 {
background-color: green;
height: 100%;
}
<div class="outer_box">
<div class="container">
<h1>Title</h1>
<div class="box">Box</div>
</div>
<div class="container">
<h1>Title</h1>
<div class="box2">Box</div>
</div>
</div>
http://jsfiddle.net/utsavoza/9v0dfv39/
HTML part
Title
<div class="box">Box</div>
</div>
<div class="container">
<h1>Title</h1>
<div class="box2">Box</div>
</div>
CSS
.outer_box {
height: 500px;
}
.container {
width: 30%;
height: 100%;
background-color: grey;
float:left
}
.box {
background-color: blue;
height: 84%;
}
.box2 {
background-color: green;
height: 84%;
}
Use height 84% instead of 100%. you can see it in the above link..
What i want is to make this divisions using Bootstrap and AngularJS
What i don't know how to do is to make the divisions, i was thinking to split the container in 3 columns of 4. Also want to know if can i split the container in two columns of 6 and overlap another div to make the SECTOR 3?
This is what i said before, but this doesn't give me what i want.
<div class="container" contenteditable="false">
<div class="col-md-6 text-center">
<button class="btn btn-default">Button</button>
</div>
<div class="col-md-6 text-center">
<button class="btn btn-default">Button</button>
</div>
</div>
EDIT 1
Also would like to know how to get this responsiveness when loading the site on a smartphone.
Plunker
HTML:
<div class="container">
<div class="content">
<div class="content-body">
<div class="section1 pull-left">section 1</div>
<div class="section2 pull-right">section 2</div>
<div class="section3">section 3</div>
</div>
</div>
</div>
CSS:
/* Reset */
html, body { height: 100%; margin: 0; padding: 0; }
.container {
display: table;
width: 100%;
height: 100%;
}
.content {
display: table-row;
height: 100%;
}
.content-body {
display: table-cell;
}
.section1 {
width: 50%;
background: red;
height: 100%;
display:block;
}
.section2 {
width: 50%;
height: 50%;
height: 100%;
display: block;
background: blue;
}
.section3 {
position: absolute;
left: 0;
right: 0;
bottom: 0;
margin: 0 auto;
height: 50%;
width: 50%;
background: yellow;
}
For responsive style changes you need to add a media query:
#media (max-width: 768px) {
.section3, .section2, .section1 {
display:block;
position: relative;
}
.section3 {
height: 10%;
width: 100%
}
.section2 {
height:60%;
width: 100%
}
.section1 {
height: 30%;
width: 100%
}
}
Probably a fairly basic solution to this, but I can't seem to figure it out... have set up a jsfiddle to demonstrate:
http://jsfiddle.net/AxKq8/1/
HTML
<div class="wrapper">
<div id="box-1" class="box">
</div>
<div id="box-2" class="box">
</div>
<div id="box-3" class="box">
</div>
</div>
CSS
.wrapper{
width: 100%;
}
.box {
width: 50%;
}
#box-1 {
height: 200px;
background-color: blue;
}
#box-2 {
height: 100px;
background-color: red;
}
#box-3 {
height: 300px;
float:right;
background-color: green;
position: relative;
top:0px;
right:0px;
}
I have 3 divs. What I'd like to do is have the top of the green div align with the top of the blue div.
As you can see I tried floating the first two divs left, and the third div right. That didn't work, so tried a relative positioning. Also tried using clear aswell, but it's eluding me!
Any suggestions on how to make this work?
Thanks!
Jon
Positioned the third div absolute with top:0
#box-3 {
height: 300px;
float:right;
background-color: green;
position: absolute;
top:0px;
right:0px;
}
Working CODE:JSFIDDLE
You can put the blue and red box in a container, and then a green box in another container. Float the two containers rather than the boxes.
http://jsfiddle.net/AxKq8/9/
HTML
<div class="wrapper">
<div class="container">
<div id="box-1" class="box">
</div>
<div id="box-2" class="box">
</div>
</div>
<div class="container">
<div id="box-3" class="box">
</div>
</div>
</div>
CSS
.wrapper{
width: 100%;
}
.container {
float: left;
width: 50%
}
#box-1 {
height: 200px;
background-color: blue;
}
#box-2 {
height: 100px;
background-color: red;
}
#box-3 {
height: 300px;
background-color: green;
}
Give this a try: JSFiddle
HTML:
<div class="wrapper">
<div class="box-group box">
<div id="box-1" class="box2"></div>
<div id="box-2" class="box2"></div>
</div>
<div class="box-group box">
<div id="box-3" class="box2"></div>
</div>
</div>
CSS:
.wrapper{ width: 100%; }
.box { width: 50%; }
.box2 { width: 100%; }
.box-group { float: left; }
#box-1 { height: 200px; background-color: blue; }
#box-2 { height: 100px; background-color: red; }
#box-3 { height: 300px; background-color: green; }
I created columns with the .box-group class, I grouped the first two items into the first column div so the stacking and floating will appear properly.
I am trying to achieve the following layout through HTML and css:
In this layout you have a red upper div, which is 100% the window width and has the height of it's containing elements
Beneath that you have a green div, containing menu items next to each other, which is 100% the window width as well and has a height that makes it fill the rest of the window.
Next to the green div there is a yellow div which momentarily has a width of 0%.
When clicking an item in the green div makes the green div shift right with the width being the width of the widest menu item and the height that makes it fill the rest of the window.
The yellow div then opens next to the green div and it's width covers the rest of the window. Same for the height, this should make it fill the rest of the window. It contains an iframe that displays the clicked menu item and should cover the yellow div entirely.
I have no problem getting the first layout, however when switching to the 2nd I can't seem to get the green and yellow divs' height right.
Here's what I've got:
<div id="Dashboard_CAClientDIV">
Red div
</div>
<div id="Dashboard_MenuDIV">
Green div
<div class="Dashboard_Tile">
Item 1
</div>
<div class="Dashboard_Tile">
Item 2
</div>
<div class="Dashboard_Tile">
Item 3
</div>
<div class="Dashboard_Tile">
Item 4
</div>
<div class="Dashboard_Tile">
Item 5
</div>
</div>
<div id="Dashboard_FrameDIV">
<iframe id="Yellow Div" src="" width="100%" height="100%">
</div>
Going to the 2nd layout adds "_Exp" to Dashboard_MenuDIV and Dashboard_FrameDIV, here's the css I've got:
html, body, #frmDashboard {
/* any div up to fullscreen-cont must have this
in this case html and body */
height:100%;
min-height:100%;
max-height: 100%;
}
body, div {
/*overflow: hidden;*/
margin: 0px;
}
.Dashboard_Tile {
display:inline-block;
}
#Dashboard_MenuDIV_Exp, #Dashboard_FrameDIV_Exp {
min-height: 100%;
height: 100%;
max-height: 100%;
display: inline-block;
}
#Dashboard_MenuDIV_Exp .Dashboard_Tile {
min-width: 100%;
width: 100%;
max-width: 100%;
margin-top: 1px;
}
#Dashboard_CAClientDIV {
min-width:100%;
width:100%;
max-width:100%;
}
#Dashboard_MenuDIV {
min-width:100%;
width:100%;
max-width:100%;
}
#Dashboard_MenuDIV_Exp {
min-width:20%;
width:20%;
max-width:20%;
float: left;
}
#Dashboard_FrameDIV {
min-width:0%;
width:0%;
max-width:0%;
}
#Dashboard_FrameDIV_Exp {
min-width:75%;
width:75%;
max-width:75%;
float: left;
}
Thanks in advance
Use the new CSS3 flex layout: http://css-tricks.com/snippets/css/a-guide-to-flexbox/:
Working fiddle: http://jsfiddle.net/5UXR9/2/
HTML:
<div id="Dashboard_CAClientDIV">Red div</div>
<div id="Dashboard_Wrapper_MenuDIV_and__FrameDIV">
<div id="Dashboard_MenuDIV">
Green div
<div class="Dashboard_Tile small">Item 1</div>
<div class="Dashboard_Tile small">Item 2</div>
<div class="Dashboard_Tile very-large">Item 3</div>
<div class="Dashboard_Tile small">Item 4</div>
<div class="Dashboard_Tile large">Item 5</div>
</div>
<div id="Dashboard_FrameDIV">
<iframe id="Yellow Div" src="" width="100%" height="100%"></iframe>
</div>
</div>
CSS:
body, html {
height: 100%;
}
#Dashboard_CAClientDIV {
background-color: red;
height: 40px;
width: 100%;
}
#Dashboard_Wrapper_MenuDIV_and__FrameDIV {
width: 100%;
height: 100%;
display: flex;
}
#Dashboard_MenuDIV {
background-color: green
}
#Dashboard_MenuDIV .Dashboard_Tile {
background-color: blue;
height: 50px;
margin-bottom: 5px;
}
#Dashboard_MenuDIV .Dashboard_Tile.small {
width: 100px;
}
#Dashboard_MenuDIV .Dashboard_Tile.large {
width: 200px;
}
#Dashboard_MenuDIV .Dashboard_Tile.very-large {
width: 300px;
}
#Dashboard_FrameDIV {
background-color: yellow;
flex: auto;
}
#Dashboard_FrameDIV iframe {
border: none;
}
Well, a CSS3 solution has already been given, but if you want a more primitive approach (CSS2), you can style your layout with display:table properties. Here's an example similar to your situation:
http://jsfiddle.net/S562t/
HTML:
<div class="stage">
<div class="row-top">
<div class="top">red</div>
</div>
<div class="row-bottom">
<div class="left">
<div class="title">Title 1</div>
<div class="title">Title 2334234234</div>
<div class="title">Title 3</div>
<div class="title">Title 4</div>
</div>
<div class="right">
<iframe src="" frameborder="0"></iframe>
</div>
</div>
</div>
CSS:
.stage
{
overflow: hidden;
display: table;
position: absolute;
width: 100%;
height: 100%;
top:0;
left:0;
}
.row-top
{
display: table-row;
position: relative;
height: 30px;
}
.row-bottom
{
display: table-row;
position: relative;
}
.top
{
background-color: red;
display: table-cell;
position: absolute;
width: 100%;
height: 30px;
}
.left
{
background-color: green;
display: table-cell;
}
.right
{
background-color: yellow;
display: table-cell;
}
iframe
{
width: 100%;
height: 100%;
}
http://jsfiddle.net/S562t/