Please look at these two examples:
http://jsfiddle.net/GBVF8/5/ (with SkelJS)
http://jsfiddle.net/5Br2N/5/ (without SkelJS)
Here's my css for the SkelJS example:
#wrapper {
height:100%;
border:3px solid black;
}
.container {
height:100%;
border:3px solid darkslategray;
}
.row {
height:100%;
border:3px solid gray;
}
.col1 {
vertical-align: middle;
border:3px solid green;
height:100%;
}
.col2 {
vertical-align: middle;
border:3px solid red;
height:100%;
}
I would like cell heights like shown in the second example but using SkelJS. Basically I want the first and second columns to be vertically aligned in the middle. I want the height to be fluid so it just centers in the middle based on the content inside the tallest div. I don't want to have to set a static height, like 300px. Please advise. Thanks!
Related
How would I create a "short" vertical border between columns in xaringan / remark?
I want to add a vertical border between columns in my slides, but one that's only about 80% the height of the div. Here's the xaringan example for two column layout: https://slides.yihui.name/xaringan/#15
I suppose the css for the border of the left column could look something like this:
.pull-left {
border-right-width: 1px;
border-right-style: solid;
padding-right: 2px
}
But how can I get it to be a little shorter than the height of the div?
Yes, you can create 80% height from the parent div
<div></div>
div {
height:200px;
width:500px;
background:gold;
position:relative;
border-top:10px solid grey;
border-bottom:2px solid #000;
}
div:after {
content:"";
position:absolute;
top:20%;
right:0;
width:2px;
height:60%;
background:#000;
}
I want to my child div will be shown inside parent div with same position (absolute) and with same padding (20px). If I put position relative to child div then it will come inside parent div, but i want to use position absolute to child div, But when i run this code The child div goes above the parent div.
.parent {
border:1px solid black;
height:100px;
padding:20px;
position: relative;
width:400px;
}
.child {
border:1px solid red;
height:50px;
position:absolute;
width:100%;
}
width % calculates entire width including border and padding.
so all we need is width = 400 - (20 x 2)(padding) = 360 i.e. 90%.
.parent { border:1px solid black; height:100px; padding:20px; position: relative; width:400px; }
.child { border:1px solid red; height:50px; position:absolute; display:block;width:90%;}
Just set child div width property to inherit, It will work perfectly.
.parent { border:1px solid black; height:100px; padding:20px; position: relative; width:500px;}
.child { border:1px solid red; height:50px; position: absolute; width: inherit;}
Just add this to child div.
width: inherit;
If you want it to honor the parent(i.e accept the 20px padding), don't absolutely position it then
I'm trying to develop my first responsive website but I'm having some trouble (of course).
I need an element (sort of a menu) to contain 4 row of elements and each element has an image to the left and some text to the right. Now, the issue I'm having is that I can't seem to be able to make the elements center vertically correctly. I've tried several methods that seem to work for a lot of people so I thought I'ld ask if anybody knows why nothing seems to work for me.
This is what the image CSS looks like:
.tablaBuscadorElementos > img {
position: relative;
width: 20px;
height:20px;
left:0;
right:0;
top:0;
bottom:0;
margin:0 auto;
float:left;}
Here is the fiddle: http://jsfiddle.net/mampy3000/9JZdZ/1/
Appreciate any help!
since your elements are inline-block , you can inject an inline-block pseudo-element 100% height and vertical-align:middle it to img and span : DEMO
basicly (+ below update of your CSS):
.tablaBuscadorElementos:before {
content:'';
height:100%;
display:inline-block;
vertical-align:middle;
}
.tablaBuscadorElementos {
height:22%;/* instead min-height so value can be used for pseudo or direct child */
border: 1px solid black;
padding:0px;
width:100%;
}
.tablaBuscadorElementos > span {
font-size:20px;
width:80%;
vertical-align:middle; /* align to next inline-block element or baseline*/
border:1px solid black;
display:inline-block;/* layout*/
}
.tablaBuscadorElementos > img {
vertical-align:middle; /* align to next inline-block element or baseline*/
width: 20px;
height:20px;
}
.tablaBuscador, .tablaBuscadorElementos{
display:block;
}
.tablaBuscadorElementos:before {
content:'';
height:100%;/* calculated from 22% parent's height */
display:inline-block;/* layout*/
vertical-align:middle;/* align to next inline-block element or baseline*/
}
You can do this by adding this css to .tablaBuscador
position: fixed;
top: 50%;
margin-top:-100px; /* half of height */
More info here: How to center a table of the screen (vertically and horizontally)
The newer option would be to use calc() but you might run into browser support issues.
position: fixed;
top:calc(50% - 100px).
Here are which browsers support calc(): http://caniuse.com/#feat=calc
Your code needs a major tune-up. You are floating elements, using vertical-align on them, positioning them relatively with left, right, top, and bottom set to 0. None of these make any sense. Here's a cleaned up fiddle: http://jsfiddle.net/jL2Gz/.
And here's a tuned up code:
* {
padding: 0;
margin: 0;
}
body {
height:100%;
}
.tablaBuscador {
font-family: "Maven Pro", sans-serif;
height:200px;
width:40%;
}
.tablaBuscador > div {
border: 1px solid black;
padding: 10px 0;
}
.tablaBuscador > div > span {
font-size:20px;
width:80%;
border:1px solid black;
}
.tablaBuscador > div > img {
width: 20px;
height: 20px;
}
.tablaBuscador > div > * {
display: inline-block;
vertical-align: middle;
}
I'm tyring to nest three divs and have each. I want the appearance to look like each parent is 10px larger than it's child and be responsive when the horizontal width changes. When I do this with two DIVs everything works well.
CSS
#holder
{
margin:auto;
width:90%;
height:150px;
background-color:#999;
padding:10px;
border: 1px solid;
}
#inside
{
position:relative;
width:100%;
height:100%;
background-color:#9F0;
border: 1px solid;
}
HTML
When I add the third child, that's when it all goes wrong. The middle child (the green box) moves partially out of it's parent.
CSS
#holder
{
margin:auto;
width:90%;
height:150px;
background-color:#999;
padding:10px;
border: 1px solid;
}
#inside
{
position:relative;
width:100%;
height:100%;
background-color:#9F0;
border: 1px solid;
padding:10px;
}
#header
{
position:relative;
width:100%;
height:100%;
background-color:#C00;
}
HTML
<div id="holder">
<div id="inside">
<div id="header"/>
</div>
</div>
I do understand padding and margin and that those will add the "real" width and height of the box, but I can not figure out how to get these boxes inside of each other. things I have tried are below
playing with margins and padding
playing with different % on the widths of child boxes. This works to a point, but depending on the width of the browser window the ratio of the distance between the children changes.
Sounds like a cascade-type comment list.
Well... Remove the width from #inside and #header. DIVs are block-level elements.
Add
#holder div {
padding-left: 10px;
}
Every DIV under #holder will inherit the padding-left css property.
I think (and hope :P) that's what you were looking for.
I have a white container on top of the bg but it stops even though min-height is set as 100%, heres the CSS for this container and in bottom I have included image of what happens when I scroll to the bottom:
Container where post is:
Yellow Bg:
.home-body {
background-color:#EAC117;
height: 100%;
.home-main-content {
width:800px;
min-height: 100%;
position:absolute;
overflow:hidden;
margin-left:56.5%;
left:-500px;
top:51px;
border-left:1px solid black;
border-right:1px solid black;
background-color:#fff;
background-repeat:repeat-y;
.home-post-echoed-container {
width:400px;
position:absolute;
margin-left:50%;
left:-200px;
top:200px;
overflow:hidden;
}
.home-echoed-posts {
width:600px;
overflow:hidden;
left:-98px;
position:relative;
background-color:#fff;
margin-bottom:-5px;
border-top:1px solid;color:#0a527e;
border-left:1px solid;color:#0a527e;
border-right:1px solid;color:#0a527e;
}
.home-echoed-posts-post {
margin:10px;
color:black;
}
.home-echoed-posts-email {
margin:10px;
color:black;
}
.home-echoed-posts-date {
margin:10px;
color:black;
}
You are doing it wrong.
To center something you should use (instead of absolute positioning):
.foobar{
margin: 0 auto;
width: 800px;
}
As for "why comments are not expanding the container", it is hard to guess without code, but there are two reasonable possibilities: positioning or floats. There nothing i can do about it. But if they are floated, then easies is to have container with following css:
.container{
overflow: hidden;
}
It is a bit counter-intuitive, but works like charm. You can read more about it here.
Update: and read this article too.
Update 2:
Looks like it is the worts case scenario. You are using positioning .. for everything. YOu really need to learn how to use floats.
.home-post-echoed-container {
width: 600px;
margin: 0 auto;
padding-top: 200px; // im guessing what top:200px was doing
overflow:hidden;
}
.home-echoed-posts {
width:600px;
float: left;
background: #fff;
margin-bottom: -5px;
border: 1px solid #0a527e;
border-bottom: 0;
}
Something like this. But I'm really just guessing.
html, body
{
height:100%;
}
Make sure you include that in the top of your CSS script, else setting .home-main-content to min-height:100%; won't work, because to CSS, if undefined elsewhere, 100% is simply the height of the current div.
Also ensure that you have that same property set if your .home-main-content is surrounded by another div.