I'm trying to align a table of dynamic size within a parent div. The parent container's height is set, and the inner table's height is unknown (variable). I don't think margins/relative positioning adjustments will work since the size of the table is unknown. Can this be done? Right now the code looks like:
html:
<div id="wrapper">
<div id="board">
<table id="evolve">...</table>
</div>
</div>
css:
#wrapper {
width: 100%;
height: 100%;
}
#board {
position: relative;
margin: auto;
width: 265px;
height: 222px;
text-align: center;
vertical-align: middle;
border: 1px solid black;
}
.evolve {
border: 1px black solid;
margin: auto;
position: relative;
}
Your desired css code
#board {
display:table-cell;
width: 265px;
height: 222px;
text-align: center;
vertical-align: middle;
border: 1px solid black;
}
.evolve {
border:solid 1px black;
}
UPDATE
You will need to alter padding-left depending on wrapper width(if you set it to 100% then it will work)
#wrapper {
height: 100%;
padding-left:36%;
}
#board {
display:table-cell;
width: 265px;
height: 222px;
vertical-align: middle;
border: 1px solid black;
}
.evolve {
border: 1px black solid;
}
As soon as i find a better solution i will update it
You can define line-height same as the height of the DIV. Write like this:
#board {
position: relative;
margin: auto;
width: 265px;
height: 222px;
text-align: center;
vertical-align: middle;
border: 1px solid black;
line-height:222px;
}
#board .evolve {
border: 1px black solid;
margin: auto;
position: relative;
line-height:1.5;
}
Check this http://jsfiddle.net/X4L5A/1/
Related
https://jsfiddle.net/3Lthpf72/5/
Html css with jsfiddle ex: not working: vertical align and using full width based on width percentage of two child containers
When I make the two child containers add up to the parent width percentage, it folds down. Also the vertical align middle is at the bottom, not the middle.
Any thoughts?
.payee.list-item {
border: 1px solid red;
height: 100%;
width: 300px;
}
.list-item-content {
display: inline-block;
border: 1px solid blue;
width: 80%
}
.payee.list-item>img {
border: 1px solid green;
height: 45px;
display: inline-block;
width: 17%;
vertical-align: middle;
}
<div class="payee list-item">
<img src="/Image/PayeeBillPayAccountPortrait/832">
<div class="list-item-content">
<h4>Colonel Sanders!</h4>
<h3>Colonel Sanders</h3>
</div>
</div>
Are you trying to do something like that?
.payee.list-item {
border: 1px solid red;
height: 100%;
width: 300px;
display: inline-block;
position: relative;
}
.list-item-content {
float: right;
border: 1px solid blue;
width: 80%
}
h3, h4 {
width: 50%;
float: left;
box-sizing: border-box;
padding: 6px;
}
h3{background: lightgray;}
h4{background: gray;}
.payee.list-item>img {
border: 1px solid green;
max-height: 45px;
width: 17%;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
<div class="payee list-item">
<img src="https://static.pexels.com/photos/6555/nature-sunset-person-woman.jpg">
<div class="list-item-content">
<h3>Colonel Sanders</h3>
<h4>Colonel Sanders!</h4>
</div>
</div>
Best way to demonstrate what I want is to show it:
I want the left and right div to expand to the left and right edge of the container div automatically.
It can be done with Javascript and with flex but I'm wondering is there is another way that supports IE9+ (flex is IE11+)
I created this live demo (click "Run with JS") with a dynamically changing center div (since the "real life" problem doesn't have a static size)
Using a display: table-cell would make it easy for you.
Demo: http://jsfiddle.net/abhitalks/VytTX/1/
HTML:
<div class="outer">
<div id="left" class="inner"></div>
<div id="center" class="inner">...</div>
<div id="right" class="inner"></div>
</div>
CSS:
body { width: 100%; }
div.outer {
width: 90%;
border: 1px solid gray;
background-color: rgb(12, 34, 43);
text-align: center;
display: table;
border-spacing: 10px;
}
div.inner {
border: 1px solid gray;
height: 200px;
display: table-cell;
min-width: 20px; width: 20px;
padding: 4px;
background-color: rgb(212, 234, 143);
}
You could achieve that like this :
An example: http://codepen.io/srekoble/pen/rugxh (change the variable of the center width $width)
It's a sass file for a variable usage:
* {
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
div.outer {
width: 100%;
border: 1px solid gray;
background-color: rgb(12,34,43);
text-align: center;
margin: 0 auto;
font-size: 0;
}
div.inner {
border: 1px solid gray;
height: 200px;
display:inline-block;
min-width: 20px;
}
$width: 50%;
#center {
width: $width;
background: red;
}
#left,
#right {
width: ( 100% - $width ) / 2;
background: yellow;
}
<style>
body
{
background: #0B222A;
}
.outer
{
width: 400px;
height: 300px;
background: #D3EA8F;
margin: auto;
}
.inner
{
width: 60%;
height: 300px;
background: #D3EA8F;
border-left: solid 10px #0B222A;
border-right: solid 10px #0B222A;
margin: auto;
}
</style>
<div class="outer">
<div class="inner"></div>
</div>
So I got this fiddle: http://jsfiddle.net/69WVx/3/
I have also attached the code. Basically, I want test2 and test3 to be inline with one another. I also want the widths of test2 and test3 to be %, as it's for a mobile responsive button.
Can this be done the way I'm doing it? Or am I screwing this all up?
As you can see, the DIV's test2 and test3 collapse on top of one another, as opposed to being inline.
HTML:
<div class="test">
<div class="test1">
<div class="test2">ORANGE</div>
<div class="test3">APPLE</div>
</div>
</div>
CSS:
.test {
position: relative;
width: 300px;
height: 100px;
border: 1px solid #FF0000;
}
.test1 {
width: 90%;
height: 50%;
border: 1px solid;
position: relative;
}
.test2 {
width: 40%;
border: 1px solid #00FF00;
display: inline;
position: absolute;
}
.test3 {
width: 40%;
border: 1px solid;
display: inline;
position: absolute;
}
Try something like this , Trying my best to help .
Don't know if this is what you want. Fiddle
If you want to keep position absolute do the following
.test2 {
width: 40%;
border: 1px solid #00FF00;
display: inline-block;
position :absolute;
}
.test3 {
width: 40%;
border: 1px solid;
display: inline-block;
position :absolute;
margin-left:40%;
}
Or Even this will do
.test2 {
width: 40%;
border: 1px solid #00FF00;
display: inline-block;
}
.test3 {
width: 40%;
border: 1px solid;
display: inline-block;
}
Apply display: inline-block; for the inner blocks such as .test2 and .test3, so that you can achieve this..
Check this Fiddle...
CSS:
.test {
position: relative;
width: 300px;
height: 100px;
border: 1px solid #FF0000;
}
.test1 {
width: 90%;
height: 50%;
border: 1px solid;
position: relative;
}
.test2 {
width: 40%;
border: 1px solid #00FF00;
display: inline-block;
}
.test3 {
width: 40%;
border: 1px solid;
display: inline-block;
}
Try this:
Demo
Your mistake is:
1.You let .test2&.test3 position:absolute,this will cause them to be deleted from the normal flow.If you don't define the top,left,right,bottom of the elements,they will cover each other of course.However,you don't have the need to use "position" here.
2.Div should be displayed inline-block. Inline elements do not have width or height properties.So you can see though you let the divs width:40% ,it doesn't work. Let them display:inline-block;
Well here is what i tried i guess this is what u want ...
HTML :
<div class="test">
<div class="test1">
<div class="test2">ORANGE</div>
<div class="test3">APPLE</div>
</div>
</div>
CSS :
.test {
position: relative;
width: 300px;
height: 100px;
border: 1px solid #FF0000;
}
.test1 {
width: 90%;
height: 50%;
border: 1px solid;
position: relative;
}
.test2 {
width: 40%;
border: 1px solid #00FF00;
display: inline-block;
position: relative;
}
.test3 {
width: 40%;
border: 1px solid;
display: inline-block;
position: relative;
}
here is the fiddle ----> DEMO
Well the reason why it overlapped was because you have positioned it absolute ...... either give relative positioning or provide the positioning for an absolute layout in order to get what you wanted ....
The position:absolute properties in your CSS were causing both .test2 and .test3 to display on top of one another. Removing that property from both elements provides the inline appearance you're looking for.
Also, as Jc. points out below, the display properties should be set to inline-block instead of inline
.test2 {
width: 60%;
border: 1px solid #00FF00;
display: inline-block;
}
.test3 {
width: 30%;
border: 1px solid;
display: inline-block;
}
http://jsfiddle.net/69WVx/11/
I have this code:
<header>
<div id="logo">
<img src="img.png" width="288px" height="80px"/>
</div>
</header>
And this CSS:
header { width: 960px; height: 100px; padding: 10px; }
#logo { float: left; height: 100%; border: 1px solid #000; }
#logo img { border: 1px solid #000; }
How to centralize vertically the img element in this div? I have use the display table, and table cell, but not work.
#logo { height: 100%; border: 1px solid #000; text-align:center; }
-------^^^^^^^^^^^^^^^^^^---
also remove the float
Live Demo
Use this tag text-align: center ; from the CSS for the image to the CSS for its parent div, so your CSS looks like this:
.box {
height: 100%;
width: 450px;
border: 2px solid red;
background: green;
overflow: hidden;
text-align:center
}
.box img {
height: 100%;
width: auto;
}
Just Replace Your CSS like this.
http://jsfiddle.net/lvtrvd/29uGQ/
header { width: 400px; height: 100px; padding: 10px; }
#logomark { height: 100%; border: 1px solid #000;position: relative;}
#logomark img { border: 1px solid #000; position: absolute;top:0;
bottom:0;left:0;right:0; margin:auto;}
My case is as follows. I have a div with two children divs. I'd like the 'event' div to be 300px of width and height. First requirement is to keep the size of the 'event' div when 'content' and 'bar' elements use 100% of parent's width. Secondly as for now, borders of 'content' element are not visible. Is it possible to fit everything inside without using hardcoded values and get this display properly in most of the modern browsers (FF, Chrome, Opera, IE7+) ?
This is what I'd like to achieve (notice the left red bar which takes 100% height and doesn't collide with the grey border around the event element):
And this is what I have. Html :
<div id="wrapper">
<div id="scheduler">
<div class="event" style="top: 30px; height: 300px; width: 300px">
<div class="bar"></div>
<div class="content">
<div class="inner-content">Some text</div>
</div>
</div>
</div>
</div>
, css :
#wrapper {
width: 600px;
height: 600px;
}
#scheduler {
background-color: #E1FFFE;
display: block;
height: 100%;
width: 100%;
padding: 0 10px;
position: relative;
}
#scheduler .event {
display: block;
float: left;
position: relative;
width:100%;
overflow:hidden;
}
#scheduler .event .bar {
background-color: red;
display: inline;
float: left;
height: 100%;
position: relative;
width: 5px;
}
#scheduler .event .content {
background-color: white;
border: 1px solid #CCCCCC;
border-left: none;
display: inline;
float: left;
height: 100%;
position: absolute;
width: 100%;
}
and a runnable demo :
http://jsfiddle.net/6nTvD/1/
Try this. Take out the bar div, then change the .content css to:
#scheduler .event .content {
background-color: white;
border: 1px solid #CCCCCC;
border-left: 5px solid red; // replaces the bar
display: inline;
float: left;
height: 99%; // a bit of a hack to fit the border in
position: relative;
width: 98%; // hack
}
http://jsfiddle.net/Dp3yz/
EDIT: Code with the .bar still in place:
#scheduler .event .bar {
background-color: red;
display: inline;
float: left;
height: 99.9%; /* Small offset at bottom */
position: relative;
width: 5px;
}
#scheduler .event .content {
background-color: white;
/* revised border */
border-top: 1px solid #CCCCCC;
border-right: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
display: inline;
float: left;
height: 99%;
position: absolute;
width: 98%;
}
New version:
http://jsfiddle.net/JJrC9/1/
I don't think I fully understand your quandary, however, with the only difference I can spy between your desired outcome and your current work being the presence of the borders -- switching overflow:hidden; on #scheduler .event to overflow:visible; produces something that visually looks to me like it achieves the desired affect.