I have two inline-block elements(width: 50%) inside a div(width:100%).
inside the first inline-block element i have table with many columns. This table is not rendered in its given 50% width. (It comes under the second inline-block element.)
<style>
#col1 {
display: inline-block;
background-color: red;
width:50%;
vertical-align: top;
}
#col2 {
display: inline-block;
background-color: green;
width:50%;
vertical-align: top;
}
</style>
<div>
<div id="col1"><table><tr><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td></tr><tr><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td></tr></table></div><div id="col2">content</div></div>
Refer this example in: http://jsfiddle.net/6L3h8h7k/
In the above example,the first row of the table its overlapped by the second inline-block element.
How to make this table to occupy only the 50% width.
Some one kindly help me sort out this problem.
Thanks in advance.
Add this style to your table
table {
width: 100%;
table-layout: fixed;
}
JSFiddle is here
Change your css to this one
#co {
display: inline-block;
}
#col1 {
background-color: red;
width:50%;
float:left;
}
#col2 {
float:right;
background-color: green;
width:50%;
}
tr td { display:inline-block;}
Add "co" id to your first div
<div id="co">
Related
I would like to be able scroll td elements (except table side column) as screen size smaller than x size..
To be more clear please check: http://jsfiddle.net/uf32ojm5/7/
How can I scroll only comments fields and let "group" column fixed..
To fix "group" column I have done this:
#media only screen and (max-width: 590px) {
.groupColm{
position:fixed;
min-width:100px;
z-index:1;
}
}
But how do I scroll only comments fields?
Thank you in advance!
I Think you have to put the comments fields in an internal table inside the td and just enable scrolling in the size you need to the content of that td which contain the internal table at that time.
hope my answer help.
I solved it:)
div table { display: block; position: relative; width: 100%; }
div tbody { display: block; width:auto; position: relative; overflow-x: auto; white-
space: nowrap; }
div thead tr { display: block; }
div th { display: block; text-align:left; padding-left:10px; height:50px; line-
height:40px;}
div tbody tr { display: inline-block; vertical-align: top; }
div td {display: block; text-align: left; }
live: http://jsfiddle.net/uf32ojm5/12/
This is what Ihave so far:
http://jsfiddle.net/yisera/2aVpD/
There's a div I need to center vertically inside the .jumbotron-special container.
I tried using display: table; on he parent element and then use display:table-cell on the child element (the one with the H1 and H2) but so far no luck and I've ran out of ideas. I do not want to use absolute positioning since This needs to be responsive, and as the resolution goes smaller, the layout goes astray.
Any ideas how can I center it to the jumbotron parent div?
You can use the following code the contents of the div .jumbotron-special
add the following properties to the class
display:flex;
justify-content:center;
align-items:center;
Working Code:JSFIDDLE
More on Flex Box
Read More on Flex here
Try this:
#yourdiv {position:absolute; top:50%; height:800px; margin-top:-400px; }
Where margin-top is negative half of height.
Or, another effective method with 2 divs:
<div id="controller-div">
<div id="your-div">
Content here
</div>
</div>
Where, again with margin-bottom negative half of height:
#controller-div {float:left; height:50%; margin-bottom:-120px;}
#your-div {clear:both; height:240px; position:relative;}
This here also works fine (you just missed to add height:100%)
.container-text{
color: #fff;
text-shadow: #333 3px 3px;
display: table;
width: 100%;
height: 100%;
}
.inner-container {
display: table-cell;
text-align: center;
vertical-align: middle;
}
Here's another option that has a bit more support than flexbox.
Updated Fiddle here.
body{
width: 100%;
height: 100%;
}
.full-jumbotron{
font-size: 10em !important;
margin-top: -70px;
height: 100vh;
background: #333;
min-height: 100%;
max-height: 100%;
}
.container-text{
color: #fff;
text-shadow: #333 3px 3px;
height: 100%;
display: table;
width:100%;
}
.inner-container {
display: table-cell;
vertical-align: middle;
width:100%;
}
i have 2 div children floated (left and right) in 1 row.
First div's height is higher then second div. So what i want to do is:
Fit second div height according to the parent container, so it will
be the same for both children
Vertical-align the content of the second div
I tried
.container { overflow: hidden; }
#boxLeft{ width: 50%; float: left;}
#boxRight{ width: 50%; float: right; line-height: 100% }
#box2Right p{ text-align: right; vertical-align: middle;}
but line-height: 100% is not working (is working with pixels but i MUST use 100% because i have different rows with different heights).
I also would like to avoid using table if it's possible.
this is my fiddle: http://jsfiddle.net/qYBfu/2/
Thanks
You might want to use display:table like this:
DEMO:http://jsfiddle.net/qYBfu/4/
.container {
display:table;
}
#boxLeft{
display:table-cell;
}
#boxRight{
display:table-cell;
}
You can check this question: Are floats bad? What should be used in its place
Hope this helps:
For make both divs containers same "height", you can use the following code:
#boxRight{ width: 50%; float: right; background: silver; line-height: 100%; margin-bottom: -99999px; padding-bottom: 99999px; }
http://jsfiddle.net/qYBfu/5/
And what is not clear for me is if you want to align the right content in the middle of the column.
In that case, I think either you have to align only one row, where you can use height & line height equal to the left column (that imply to know the height in advance) or use a JS solution.
You can stretch the left div to full height of parent by making the parent positioned and applying position:absolute; top:0; bottom:0 to the left div.
for aligning the text vertically, you can make use of css3 flex box (if ancient browser support is not an issue, hopefully)
.container {
position:relative;
overflow: hidden;
}
#boxLeft {
width: 50%;
display:inline-block;
background: silver;
}
#boxRight {
display:-webkit-flex;
-webkit-align-items:center;
-webkit-justify-content:center;
position:absolute;
top:0;
right:0;
bottom:0;
width: 50%;
background: pink;
text-align:center;
}
JSFiddle
This technique just uses css :before pseudo-element, without absolute positioning
.container { white-space: nowrap; text-align: center; }
You can avoid the text-align, just add it if you want your boxes centered
.container:before{ content:""; width: 1px; height: 100%; display: inline-block; vertical-align: middle; }
.item{ display: inline-block; vertical-align: middle; white-space: normal; text-align: center; width: 30%; }
DEMO: http://jsfiddle.net/qYBfu/9/
I have a Div which has display:table
JSBIN
<div class='wrapper'>
<input type="checkbox" class="b" />
<span class="c" >aaa bbb ccc</span>
</div>
And this css :
.wrapper
{
display: table;
border:solid 1px red;
height:40px;
width:200px;
}
.b
{
border:solid 1px green;
display: table-cell;
vertical-align: middle;
}
.c
{
display: table-cell;
vertical-align: middle;
}
As you can see - Both .b and .c has display: table-cell; vertical-align: middle;
Question
Why does the checkbox is not aligned vertically while the span is ?
NB
I know I can use padding etc to manually alignt the checkbox. But Im looking for the solution with table-cell and vertical align ( which should work)
You need to inherit the height from your table down to your table cells:
.wrapper
{
display: table;
border:solid 1px red;
height:40px;
width:200px;
}
.b
{
border:solid 1px green;
display: table-cell;
vertical-align: middle;
height: inherit;
}
.c
{
display: table-cell;
vertical-align: middle;
height: inherit;
}
See demo at http://jsbin.com/IdOFUmi/23/edit
The reason is that input elements don't quite behave the same as other inline elements. For some reason, setting a height to the table cell fixes the problem.
The best explanation that I can offer is based on my reading about the CSS Table model
and the generation of missing table elements:
http://www.w3.org/TR/CSS2/tables.html#anonymous-boxes
In this case, the input element, being a replaced element, cannot be a table cell. As a result, an anonymous table-cell wrapper is generated internally by the CSS engine.
However, the anonymous table-cell does not seem to recognize the the height of the parent table.
If there is a height specified on the element, then the anonymous table-cell applies it.
The best of evidence for this explanation is that the following CSS also gives the same result:
.b
{
border:solid 1px green;
/* display: table-cell; OMIT THIS */
vertical-align: middle;
height: inherit;
}
without the explicit display: table-cell property, the anonymous element will be drawn and the height property is needed to get the vertical alignment to work.
Try this:
.wrapper
{
display: table-cell;
border:solid 1px red;
height:40px;
width:200px;
vertical-align: middle;
}
.b
{
border:solid 1px green;
}
div span
{
border:solid 1px gray;
}
Working: http://jsbin.com/IdOFUmi/11/edit
You're actually want that .wrapper will behave as table-cell , in this case it will be possible to place its children in the center.
live: http://jsfiddle.net/8hAv3/
#main {
width: 100px;
height: 100px;
background-color: red;
}
#sub {
width: 100%;
height: 100%;
background-color: blue;
vertical-align: middle;
}
<div id="main">
<div id="sub">TEXT</div>
</div>
Why in this example vertical-align not working? How can i make it? I dont want use margin, padding and set height in px. Is this possible?
This should work:
#main {
width: 100px;
height: 100px;
background-color: red;
display: table;
}
#sub {
display: table-cell;
height: 100%;
width: 100%;
background-color: blue;
vertical-align: middle;
}
http://jsfiddle.net/8hAv3/2/
if you just want to vertically center text in a fixed height box I would use line-height:100px to do it
you have to use a
display:table-row;
display:table-cell; or
display:table;
along with the vertical-align style, not sure which exact display value it has to be but it needs to be one of the table ones.
You need to use display:table on the main container and display:table-cell on the child. Illustrated here: http://jsfiddle.net/8hAv3/1/
You have to give the element #sub a line height, otherwise the browser doesn't know how high it is to vertically align it.
Just give the div a line-height.
#main {
width: 100px;
height: 100px;
background-color: red;
}
#sub {
width: 100%;
height: 100%;
background-color: blue;
line-height:100px;
}
Fiddle
This solution does not use display:table and display:table-cell as display:table and display:table-cell are not browsers friendly, some older browsers do not support