I am trying to top align a div inside of a div and I'm having no success. http://jsfiddle.net/jhbs31xv/
<table style="border: 1px solid red; width: 100%">
<tr>
<td>
<div style="display: table-cell; width: 200px; height: 500px; overflow-y: auto;">
<div id="housingTree" class="demo" style="height: 100px;">
</div>
</div>
</td>
<td style="width: 100%; height: 100%; border: 1px solid blue;">
<div style="height: 100%; width: 100%;">
<div id="infoPane" style="width:100%;margin-left:10px; border: 1px solid green;vertical-align:top; ">
How To Top Align Me?
</div>
</div>
</td>
</tr>
</table>
Like this:
<td style="width: 100%; height: 100%; border: 1px solid blue;" valign="top">
<div style="height: 100%; width: 100%;">
<div id="infoPane" style="width:100%;margin-left:10px; border: 1px solid green; ">
How To Top Align Me?
</div>
</div>
</td>
Add valign="top" to the containing .
And, as Goos van den Bekerom mentions, you shouldn't have a div in a td....
Related
I've a table inside another table in HTML/CSS - and I want the inside table be at height 100% of the surrounding table cell.
Something like that (the pink table has 100% of the height):
That works fine in Firefox - but in Chrome I get this:
The code for both is:
.largeNumber {
font-size: 10.5em;
line-height: 1;
}
.table-base {
display: table;
border-collapse: collapse;
width: auto !important;
margin: 0 auto;
}
.table-row {
display: table-row;
}
.table-cell {
display: table-cell;
}
<div class="table-base" style="border: 1px solid black;">
<div class="table-row">
<div class="table-cell">
<span class="largeNumber">cell1 in t1</span>
</div>
<div class="table-cell" style="vertical-align: middle;height: 100%; border: 2px dashed green;">
<div class="table-base" style="border: 3px solid pink; height: 100%;">
<div class="table-row">
<div class="table-cell"><span style="color:red">cell1 in t2</span>
</div>
</div>
<div class="table-row">
<div class="table-cell"><span style="color:blue">cell2 in t2</span>
</div>
</div>
</div>
</div>
</div>
</div>
I tried to keep it simple.
But who gets it wrong? FF or Chrome? And how can I talk Chrome into drawing the inside table 100% in height?
So, you want the table with class table-base to have 100% the height of the other table, that's right?
If so, I defined the height to 100% on that class.
.largeNumber {
font-size: 10.5em;
line-height: 1;
}
.table-base {
display: table;
border-collapse: collapse;
width: auto !important;
margin: 0 auto;
height: 100%;
}
.table-row {
display: table-row;
}
.table-cell {
display: table-cell;
}
<div class="table-base" style="border: 1px solid black;">
<div class="table-row">
<div class="table-cell">
<span class="largeNumber">cell1 in t1</span>
</div>
<div class="table-cell" style="vertical-align: middle;height: 100%; border: 2px dashed green;">
<div class="table-base" style="border: 3px solid pink; height: 100%;">
<div class="table-row">
<div class="table-cell"><span style="color:red">cell1 in t2</span>
</div>
</div>
<div class="table-row">
<div class="table-cell"><span style="color:blue">cell2 in t2</span>
</div>
</div>
</div>
</div>
</div>
</div>
Hope this helps.
Regards
I have been trying to figure out what causes this issue but couldn't. This image gallery is responsive but when I hover my mouse pointer on the thumbnails the image is shown on the left side main gallery but the thumbnail set disappears. Tried everything I know. I think my mind got fed up and gave up :-(. Any help in fixing it will be much appreciated. Thanks much in advance.
<style>
#gallery_container {
position: relative;
margin-bottom: 16px;
}
#gallery_mobile_container {
position: relative;
}
.gallery_main {
position: absolute;
visibility: hidden;
opacity: 0;
top: 0px;
left: 0px;
transition: visibility 0s, opacity 0.5s;
text-align: left; /*changing image appears on the left*/
background-color: #ffffff;
}
.gallery_large_img_table .gallery_main {
visibility: visible;
opacity: 1;
position: relative;
}
.gallery_thumbnail:hover > .gallery_main {
visibility: visible;
opacity: 1;
}
.gallery_thumbnail {
padding:2px;
cursor: pointer;
text-align: center;
}
.gallery_thumbnail_img {
transition: opacity 0.5s;
max-width: 100%;
max-height: 230px;
}
.gallery_thumbnail_img:hover {
opacity: 0.5;
}
</style>
<style>
#gallery_container .gallery_large_img_table {
width: 100%;
}
#gallery_container .gallery_main {
width: 100%;
height: 100%;
}
#gallery_container .gallery_main img {
max-width: 100%;
max-height: 100%;
}
</style>
<div style="display: table-cell; width: 90%; height: auto; text-align: center; vertical-align: top; padding: 7px; border: 1px solid #202020; border-radius: 12px;">
<div id="desc" name="desc">
<div id="gallery_container">
<table class="hide_product_photo">
<tbody>
<tr>
<td style="width: 80%; vertical-align: top;"> <!--width: 80% of the total Gallery is taken by main image-->
<!---css code here--->
<table class="gallery_large_img_table">
<tbody>
<tr>
<td>
<div class="gallery_main">
<img src="https://i.imgur.com/6h1GdR5.jpg"> <!--non-grid standalone image-->
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td style="width: 20%; vertical-align: top;"> <!--width: 20% of the total Gallery is taken by thumbnails-->
<table>
<tbody>
<tr>
<td style="width: 50%;">
<div class="gallery_thumbnail">
<img class="gallery_thumbnail_img" style="width: 100%; text-align: center;" src="https://i.imgur.com/ZDUmji7.jpg">
<div class="gallery_main">
<img src="https://i.imgur.com/ZDUmji7.jpg">
</div>
</div>
</td>
<td style="width: 50%;">
<div class="gallery_thumbnail">
<img class="gallery_thumbnail_img" style="width: 100%; text-align: center;" src="https://i.imgur.com/ByPVSkn.jpg">
<div class="gallery_main">
<img src="https://i.imgur.com/ByPVSkn.jpg">
</div>
</div>
</td>
</tr>
<tr>
<td style="width: 50%;">
<div class="gallery_thumbnail">
<img class="gallery_thumbnail_img" style="width: 100%; text-align: center;" src="https://i.imgur.com/dXQjDR7.jpg">
<div class="gallery_main">
<img src="https://i.imgur.com/dXQjDR7.jpg">
</div>
</div>
</td>
<td style="width: 50%;">
<div class="gallery_thumbnail">
<img class="gallery_thumbnail_img" style="width: 100%; text-align: center;" src="https://i.imgur.com/5SR520h.jpg">
<div class="gallery_main">
<img src="https://i.imgur.com/5SR520h.jpg">
</div>
</div>
</td>
</tr>
<tr>
<td style="width: 50%;">
<div class="gallery_thumbnail">
<img class="gallery_thumbnail_img" style="width: 100%; text-align: center;" src="https://i.imgur.com/3uJiUDq.jpg">
<div class="gallery_main">
<img src="https://i.imgur.com/3uJiUDq.jpg">
</div>
</div>
</td>
<td style="width: 50%;">
<div class="gallery_thumbnail">
<img class="gallery_thumbnail_img" style="width: 100%; text-align: center;" src="https://i.imgur.com/2dWjFD0.jpg">
<div class="gallery_main">
<img src="https://i.imgur.com/2dWjFD0.jpg">
</div>
</div>
</td>
</tr>
<tr>
<td style="width: 50%;">
<div class="gallery_thumbnail">
<img class="gallery_thumbnail_img" style="width: 100%; text-align: center;" src="https://i.imgur.com/LUCcLCL.jpg">
<div class="gallery_main">
<img src="https://i.imgur.com/LUCcLCL.jpg">
</div>
</div>
</td>
<td style="width: 50%;">
<div class="gallery_thumbnail">
<img class="gallery_thumbnail_img" style="width: 100%; text-align: center;" src="https://i.imgur.com/q0Y4Cdb.jpg">
<div class="gallery_main">
<img src="https://i.imgur.com/q0Y4Cdb.jpg">
</div>
</div>
</td>
</tr>
<tr>
<td style="width: 50%;">
<div class="gallery_thumbnail">
<img class="gallery_thumbnail_img" style="width: 100%; text-align: center;" src="https://i.imgur.com/8VJF5pE.jpg">
<div class="gallery_main">
<img src="https://i.imgur.com/8VJF5pE.jpg">
</div>
</div>
</td>
<td style="width: 50%;">
<div class="gallery_thumbnail">
<img class="gallery_thumbnail_img" style="width: 100%; text-align: center;" src="https://i.imgur.com/8VJF5pE.jpg">
<div class="gallery_main">
<img src="https://i.imgur.com/8VJF5pE.jpg">
</div>
</div>
</td>
</tr>
<tr>
<td style="width: 50%;">
<div class="gallery_thumbnail">
<img class="gallery_thumbnail_img" style="width: 100%; text-align: center;" src="https://i.imgur.com/8VJF5pE.jpg">
<div class="gallery_main">
<img src="https://i.imgur.com/8VJF5pE.jpg">
</div>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
If I got the question right: Actually the thumbnail will not disappear, it will hide under the hovered image because you set hovered image width and height to 100% and it will cover all of the space is available to showing itself!
on this section: (inside the second <style> tag)
#gallery_container .gallery_large_img_table {
width: 100%;
}
#gallery_container .gallery_main {
width: 100%;
height: 100%;
}
#gallery_container .gallery_main img {
max-width: 100%;
max-height: 100%;
}
there are no rooms for other thumbnail images!
so if you change these two attribute to something fewer than 100% you can see them as well but be sure to change the main image width and height too.
you can replace the above section with these styles to solve your issue:
#gallery_container .gallery_large_img_table {
width: 80%;
}
#gallery_container .gallery_main {
width: 80%;
height: 80%;
}
#gallery_container .gallery_main img {
max-width: 80%;
max-height: 80%;
}
I'm trying to make 3 divs align in such a way that the top div stretches to make the sum of the width of the bottom 2 divs.
Attached Image of the expected div positioning
I tried using display : table-row for the divs.
<div id="main_div" style="display: table-row">
<div id='col1' style="width: 300px; display: table-cell;">
<div style="display: table-row">
<div style="width: 300px; display: table-cell;text-align :right;border-style: groove;">
<h1>This is heading 1</h1>
</div>
</div>
<div style="display: table-row">
<div style="width: 150px; display: table-cell;white-space: nowrap;border-style: groove; border-color: green;">
abc: <input type="text" name="def">
</div>
<div style="width: 150px; display: table-cell;white-space: nowrap;border-style: groove; border-color: red">
def: <input type="text" name="ghi">
</div>
</div>
</div>
</div>
Thanks
Updated
You can also achieve this by div elements by using the float: left and display: inline-block property of css.
.row:before,.row:after{
content:"";
display:table;
}
.row:after{
clear:both;
}
.row{
border: 1px solid #000;
text-align:center;
}
.full{
width:100%;
float:left;
display:inline-block;
padding: 20px;
box-sizing:border-box;
}
.half{
width:50%;
float:left;
display:inline-block;
padding: 20px;
box-sizing:border-box;
border-top:1px solid #000;
border-right: 1px solid #000;
}
.half:last-of-type{
border-right:0;
}
<div class="row">
<div class="full">
DIV 1
</div>
<div class="half">
DIV2
</div>
<div class="half">
DIV3
</div>
</div>
The best way to achieve this layout is to use table. Please check the code below:
table{
border-spacing: 0;
border-collapse: collapse;
text-align: center;
}
td{
border: 1px solid #000;
padding:30px;
}
<table>
<tbody>
<tr>
<td colspan="2">DIV 1</td>
</tr>
<tr>
<td>DIV 2</td>
<td>DIV 3</td>
</tr>
</tbody>
</table>
Using flex from css3:
<div style="width: 300px;">
<div style="width: 100%; border: 1px solid black;">Hello</div>
<div style="width: 302px; display: flex;">
<div style="width: 50%; border: 1px solid black;">1</div>
<div style="width: 50%; border: 1px solid black;">2</div>
</div>
</div>
The 302px width is the left and right 1px borders
I want to align three div's horizontally in a td.
I want also change div of A and B in the picture below:
It is just important that A goes left side of the SecondOne and B on the right of it. I used span as well but it didn't work.
jsFiddle
<table>
<tr>
<td>
<div style="width: 55px; background: yellow; margin-left: 50px;">
FirstOne
</div>
</td>
<td>
<div style="width: 11px; background: red; margin-left: 50px">
A
</div>
<div style="width: 75px; background: green; margin-left: 50px;">
SecondOne
</div>
<div style="width: 11px; background: red; margin-left: 50px">
B
</div>
</td>
<td>
<div style="width: 65px; background: blue; margin-left: 50px;">
ThirdOne
</div>
</td>
</tr>
</table>
set div to display:inline:block
Don't use inline styles.
.table-divs {
font-size: 0;
/*fix inline-block gap*/
border: 1px dashed red
}
.table-divs div {
display: inline-block;
font-size: 16px
/* set font-size again */
}
.table-divs td:nth-of-type(2) {
padding: 0 50px
}
.first {
width: 55px;
background: yellow;
}
.second {
width: 75px;
background: green;
}
.third {
width: 65px;
background: blue;
}
.a,
.b {
width: 11px;
background: red;
}
<table class="table-divs">
<tr>
<td>
<div class="first">
FirstOne
</div>
</td>
<td>
<div class="a">
A
</div>
<div class="second">
SecondOne
</div>
<div class="b">
B
</div>
</td>
<td>
<div class="third">
ThirdOne
</div>
</td>
</tr>
</table>
<hr />
<div class="a">
A
</div>
<div class="second">
SecondOne
</div>
<div class="b">
B
</div>
<div class="third">
ThirdOne
</div>
Add this to the style part of your middle 3 divs:
float: left;
So it becomes:
<table>
<tr>
<td>
<div style="width: 55px; background: yellow; margin-left: 50px;">
FirstOne
</div>
</td>
<td>
<div style="width: 11px; background: red; margin-left: 50px; float: left;">
A
</div>
<div style="width: 75px; background: green; margin-left: 50px;float: left;">
SecondOne
</div>
<div style="width: 11px; background: red; margin-left: 50px;float: left;">
B
</div>
</td>
<td>
<div style="width: 65px; background: blue; margin-left: 50px;">
ThirdOne
</div>
</td>
You can use float property
below is the working fiddle
https://jsfiddle.net/w5zu09ny/1/
user "float: left" to put div on left and remove "margin-left" for secondOne and B
<table>
<tr>
<td>
<div style="width: 55px; background: yellow; margin-left: 50px;">
FirstOne
</div>
</td>
<td>
<div style="width: 11px; background: red; margin-left: 50px;float: left;">
A
</div>
<div style="width: 75px; background: green; float: left;">
SecondOne
</div>
<div style="width: 11px; background: red;float: left;">
B
</div>
</td>
<td>
<div style="width: 65px; background: blue; margin-left: 50px;">
ThirdOne
</div>
</td>
</tr>
</table>
Try this
<td>
<div style="width: 11px;background: red;margin-left: 50px;float: left;">
A
</div>
<div style="width: 75px;background: green;float: left;">
SecondOne
</div>
<div style="width: 11px;background: red;float: left;">
B
</div>
</td>
I have two divs which I put inside a table in order to get horizontally alignment.
<table>
<tr>
<td>
<div>
data
</div>
<div>
data
</div>
</td>
</tr>
</table>
Which looks like the following:
I now want to align these 2 in the centre, as opposed to the left.
I have tried <td style="margin-left:auto; margin-right:auto;">
but no joy.
Any idea?`
Apply the margins to the <table/>:
table {
margin: 0 auto;
}
Here is a demo fiddle.
Created a fiddle example
use align="center" for td and for div use display: inline-block;
<table style="border: 1px solid green; width: 100%; ">
<tbody><tr>
<td align="center">
<div style="border: 1px solid red;width: 30px;display: inline-block;">
data
</div>
<div style="border: 1px solid red;width: 30px;display: inline-block;">
data
</div>
</td>
<div id="containerdiv">
<div id="coveringdiv">
<div id="firstdiv">
<div id="yourdata">
Your Data Here
</div>
<div id="yourvalue">
Value
</div>
</div>
<div id="seconddiv">
<div id="yourdata">
Your Data Second
</div>
<div id="yourvalue">
values2
</div>
</div>
</div>
</div>
and CSS:
body
{
background-color: #123456;
}
#coveringdiv
{
border: solid 1px #FFFFFF;
height: 200px;
margin: 0 auto;
width: 100%;
text-align: center;
}
#firstdiv
{
display: inline-block;
}
#yourdata
{
color: #FFFFFF;
font-size: 10px;
}
#yourvalue
{
color: #FFFFFF;
font-size: 24px;
}
#seconddiv
{
display: inline-block;
}