how to stretch a DIV vertically inside a table-cell?
I thought height: 100% would be fine
but in some situations - it isn't (at least in IE8)
here is a simple example:
a 3-row table, with a header, a content, and a footer;
I would like the 'content' DIV inside the 'content' cell to stretch 100% vertically;
it does in FF and Chrome, but not in IE8
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<div style="overflow: auto; height: 20em; width: 20em;">
<table style="height: 100%; width: 100%;">
<tr style="background-color: blue;">
<td>
<div>header</div>
</td>
</tr>
<tr style="height: 100%;">
<td style="background-color: yellow;">
<div style="height: 100%; background-color: red; overflow-y: scroll;">
content
</div>
</td>
</tr>
<tr style="background-color: blue;">
<td>
<div>footer</div>
</td>
</tr>
</table>
</div>
http://jsfiddle.net/mWMmy/14/
could anyone suggest a solution to this simple problem?
it has to work in IE8, FF any Chrome (IE7 and older is not important)
and it has to be CSS-based (no javascript)
please, do not suggest wisdoms like 'dont use tables for layout', as I could use DIVs with display: table, etc. - the problem is the same (I used TABLE, TR, TD in the example because it is more readable this way)
you can remove the div content from middle td and make style to middle td to be scrolled
like that
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<div style="overflow: auto; height: 20em; width: 20em;">
<table style="height: 100%; width: 100%;">
<tr style="background-color: blue;">
<td>
<div>header</div>
</td>
</tr>
<tr style="height: 100%;">
<td style="background-color:yellow;overflow-y:scroll;vertical-align:top;">
content
</td>
</tr>
<tr style="background-color: blue;">
<td>
<div>footer</div>
</td>
</tr>
</table>
</div>
and that for your question but the total height is the height for the parent div as you set to height: 20em;
so if you want to make an application to fill browser client with autoheight
you have only two ways
1- Using Frameset like that
<frameset ROWS="100px,*,100px">
<frame src="header.htm" />
<frame src="content.htm" />
<frame src="footer.htm" />
</frameset>
that will make auto height without javascript,
2- Using Javascript
My Regards
All you need to do is put a hard/fixed height on the td and a height of 100% on the div in the td.
Related
I have an HTML email. I want 3 images side by side on a large screen with more then 900px width, like this:
On a mobile phone I would like to have the boxed below each other like this:
I want to achieve this in Gmail app and webbrowser. Unfortunately, I cant use media queries because they are not supported in Gmail app (and in my experience they also didn't work for Gmail web browser): https://www.campaignmonitor.com/css/media-queries/media/
How can I do this? My basic Idea was to use a table like this:
<table width="100%" align="center" border="0" cellpadding="0" cellspacing="0" >
<tr>
<td align="center">
<table class="my-table-size" border="0" cellpadding="0" cellspacing="0" >
<tr>
<td align="center">
<img style="display: inline-block" src="http://www.my.dev/box.jpg" alt="logo" height="90" >
<img style="display: inline-block" src="http://www.my.dev/box.jpg" alt="logo" height="90" class="middleimage">
<img style="display: inline-block" src="http://www.my.dev/box.jpg" alt="logo" height="90" >
</td>
</tr>
</table>
</td>
</tr>
</table>
But it seems that the "inline-block" style is ignored, because the images are always below each other as in - even if there would be enough space to put them side by side.
I can give the table a fix width like
<table class="my-table-size" width="900px" >
but then it will always have width 900px also on mobile. So it will look on any device like this:
How can I get this to work?
What you're looking for is commonly solved by use of the "fluid hybrid" technique. I'm going to steal from https://webdesign.tutsplus.com/tutorials/creating-a-future-proof-responsive-email-without-media-queries--cms-23919 for this, but it's a very common technique (there are others around too).
The essential code is below:
<div class="three-col" style="font-size:0;text-align:center;">
<!--[if mso]>
<table role="presentation" width="100%" style="text-align:center;">
<tr>
<td style="width:220px;padding:10px;" valign="top">
<![endif]-->
<div class="column" style="width:100%;max-width:220px;display:inline-block;vertical-align:top;">
<div style="padding:10px;font-size:14px;line-height:18px;">
[content goes here]
</div>
</div>
<!--[if mso]>
</td>
<td style="width:220px;padding:10px;" valign="top">
<![endif]-->
<div class="column" style="width:100%;max-width:220px;display:inline-block;vertical-align:top;">
<div style="padding:10px;font-size:14px;line-height:18px;">
[content goes here]
</div>
</div>
<!--[if mso]>
</td>
<td style="width:220px;padding:10px;" valign="top">
<![endif]-->
<div class="column" style="width:100%;max-width:220px;display:inline-block;vertical-align:top;">
<div style="padding:10px;font-size:14px;line-height:18px;">
[content goes here]
</div>
</div>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</div>
Now, you can still use media queries to enhance the experience for those email clients that do support embedded <style>s.
So you can add this, as one possible example, in the <head>:
<style type="text/css">
#media screen and (max-width: 350px) {
.three-col .column {
max-width: 100% !important;
}
}
#media screen and (min-width: 351px) and (max-width: 460px) {
.three-col .column {
max-width: 50% !important;
}
}
#media screen and (min-width: 461px) {
.three-col .column {
max-width: 33.3% !important;
}
.two-col .column {
max-width: 50% !important;
}
.sidebar .small {
max-width: 16% !important;
}
.sidebar .large {
max-width: 84% !important;
}
}
</style>
I would like to build flexible layout with scrollbars and dynamic widths.
I have table width,height 100% of window and 2(3) columns with auto widths ( widths depends on it's content ) and center column with remaining width. I can't specify exact width of column.
I would like to have Horizontal and Vertical Scrollbars if my content bigger than cell width and height;
Example 1
Example 2
Here is LiveDemo
<div style="width:1024px">
<table style="width:100%">
<tr>
<td>
<div>Column Menu with Dynamic Content and width</div>
</td>
<td style="width:100%;">
<div style="overflow:scroll;">Column Big Dynamic Content with ScrollBars</div>
</td>
</tr>
</table>
</div>
I can't use :
table-layout:fixed - because columns width depends on it's content
overflow:scroll with width,height specified
i need pure css solution
I've tried :
width:100%, max-width:100%, min-width:100% - not working
white-space:wrap works only if content is text, and there is only vertical scrollbar
Question is : How to make div with overflow:scroll or overflow:auto have width,height of it's parent container ( in my case it is TD )
p.s
BEST case would be if it was <TD style="overflow:auto"></TD> and width is auto.
Found second solution ( more prettier ), and it works!
Here on stackoverflow there are solutions saying add child div to td with height,width, and overflow scroll, but they all not working with dynamic widths of cells, so I slightly modified solution by adding to div position:absolute and set top,bottom,right,left to 0, and adding to parent container position:relative;
Here is Live Demo 1
<table border="1" width="100%" height="100%">
<tr>
<td> <!-- left column with autowidth -->
<div style="width:200px">Left Menu</div>
</td>
<td style="width:100%; position:relative;"> <!-- fill remaing width of columns -->
<div style="position:absolute; top:0; bottom:0; left:0; right:0; overflow:auto; ">
<div style="width:1000px; height:1000px; background:#f05555;">Calendar Mega BIG content</div>
</div>
</td>
<td> <!-- right column with autowidth -->
<div style="width:300px">Right Menu</div>
</td>
</tr>
</table>
If we go further and be more modern ( in life without tables ), it would be like this :
Here is Live Demo 2
<ul style="width:100%; height:100%; display:table;">
<li style="display:table-cell;"> <!-- left column with autowidth -->
<div style="width:200px">Left Menu</div>
</li>
<li style="display:table-cell; width:100%; position:relative;"> <!-- fill remaing width of columns -->
<div style="position:absolute; top:0; bottom:0; left:0; right:0; overflow:auto;">
<div style="width:1000px; height:1000px; background:#f05555;">Calendar Mega BIG content</div>
</div>
</li>
<li style="display:table-cell;"> <!-- right column with autowidth -->
<div style="width:300px">Right Menu</div>
</li>
</ul>
Found ( Ugly ) solution, but it works!
Basic idea, is to wrap scrollable content inside one more table with table-layout:fixed, leaving outer table with dynamic widths :)
Here is Live Demo
<table border="1" width="100%" height="100%">
<tr>
<td>
<div style="width:200px">Left Menu</div>
</td>
<td style="width: 100%;">
<table style="table-layout: fixed; width: 100%; height: 100%;">
<tr><td>
<div style="overflow:auto; width:100%; height:100%;">
<div style="width:1000px; height:1000px; background:#f0f0f0;">Calendar</div>
</div>
</td>
</tr>
</table>
</td>
<td>
<div style="width:300px">Right Menu</div>
</td>
</tr>
</table>
If you find better solution, without much markup tags, please welcome to post here...!
p.s I think i should try play with display:table or flex to achieve more elegant solution
I have a Bootstrap responsive table which is within a div with the CSS display:table. This seems to be preventing the table from becoming responsive. How can I make the table responsive without changing the outer CSS?
JsFiddle
For reference, display:table is used to create a "sticky footer": How to create a sticky footer that plays well with Bootstrap 3
If you don't want to change the current css you have to make your text responsive to fix this problem.
set the font size and instead of px use vm, vw, vh or vmin These suffixes make your text responseive.
try this, may be this will help you
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.content-container {
height: 100%;
width: 100%;
display: table;
}
.table-responsive {
border: 1px solid #ddd;
display: -moz-stack;
margin-bottom: 15px;
overflow-y: hidden;
width: 100%;
}
</style>
</head>
<body>
<div class="content-container">
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Bookings</h3></div>
<div class="bookings_list">
<div class="row">
<div class="col-xs-12">
<div class="table-responsive">
<table class="table table-striped table-hover">
<thead>
<tr>
<th>ID</th>
<th>Customer</th>
<th>Provider</th>
<th>Agent</th>
<th>Service</th>
<th>Status</th>
<th>Status</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr class="clickable" action="push" href="/bookings/UY6001">
<td>123</td>
<td>John Smith</td>
<td>ACME Corp</td>
<td>Mike</td>
<td>123456</td>
<td>Active</td>
<td>Active</td>
<td>Active</td>
</tr>
<tr class="clickable" action="push" href="/bookings/UY6000">
<td>123</td>
<td>John Smith</td>
<td>ACME Corp</td>
<td>Mike</td>
<td>123456</td>
<td>Active</td>
<td>Active</td>
<td>Active</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Set your container's width based on the viewport instead of a percentage value:
#media (max-width: 768px) {
.container {
width: 100vw;
}
}
Updated Fiddle
Since container is a pretty common class in bootstrap, you might consider adding a custom class to the specific element you want to add this style to.
I am trying to make it so two uneven columns are close together, but I'm not sure where I went wrong while I was writing the code.
When these are entered, the columns span the width of the page, where I would like this to be about 720px total, with the main column being 520px and the secondary column being 200px.
I've tried about 30 different things, changing nearly all the variables, and adding random "align=/:center"'s around all the divs.
I'm not quite sure, and I could really use some help.
I've been working on this the last 5 hours of work, and this needs to be done, I cant quite get it :(
Thank you so much!
<style>
.table { border:0px solid black; padding:10px; max-width:723px; overflow:hidden; }
.left { float:left; width:75%; }
.right { float:right; width:25%; }
</style>
</head>
<body bgcolor="#ffffff">
<center>
<table style="display: inline-table;" border="0" cellpadding="0" cellspacing="0" width="723">
<tr>
<td colspan="3"><img name="gala_r1_c1" src="/images/gala_r1_c1.jpg" width="720" height="42" border="0" alt=""></td>
</tr>
<tr>
<td colspan="3"><img name="gala_r2_c1" src="/images/gala_r2_c1.jpg" width="720" height="283" border="0" alt=""></td>
</tr>
</table>
</center>
<div class="table">
<div class="left">
<h1>From the President</h1>
<p></p>
<p>Dear Friends,</p>
blah
</div>
<div class="right">
<h1>From Students</h1>
-"<b>derp"<br>
</b>
</div>
</div>
</center>
{embed="embeds/global_footer"}
</body>
</html>
left .table { border:0px solid black;
padding:10px;
max-width:723px;
overflow:hidden;
margin:0 auto; }
So, add margin:0 auto; to the table class.
Update:
<style type="text/css">
<style>
Remove one of them... :)
Instead this:
<div class="right"> <div class="right" padding-right="100px"> <h1>From Students</h1> -"<b>derp</b> </div> </div>
try with this:
<div class="right"> <div style='padding-left:15px'> <h1>From Students</h1> -"<b>derp</b> ....</div> </div>
There are 3 changes you will need to make:
1) MOST IMPORTANT - you need a doctype! Otherwise this pushes the browser into quirks mode and into otherwise no man's land. Always include this: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
2) Remove the dangling </center> tag at the bottom.
3) Add margin: 0 auto; as the gentleman before me posted. This the css equivalent to the html <center> tag.
Final results:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>Float center</title>
<style>
.table { border:0px solid black; padding:10px; max-width:723px; overflow:hidden; margin: 0 auto;}
.left { float:left; width:75%; }
.right { float:right; width:25%; }
</style>
</head>
<body bgcolor="#ffffff">
<center>
<table style="display: inline-table;" border="0" cellpadding="0" cellspacing="0" width="723">
<tr>
<td colspan="3"><img name="gala_r1_c1" src="/images/gala_r1_c1.jpg" width="720" height="42" border="0"
alt=""></td>
</tr>
<tr>
<td colspan="3"><img name="gala_r2_c1" src="/images/gala_r2_c1.jpg" width="720" height="283" border="0"
alt=""></td>
</tr>
</table>
</center>
<div class="table">
<div class="left">
<h1>From the President</h1>
<p></p>
<p>Dear Friends,</p>
blah
</div>
<div class="right">
<h1>From Students</h1>
-"<b>derp"<br>
</b>
</div>
</div>
{embed="embeds/global_footer"}
</body>
</html>
Snapshot:
I am working on website and designing a master page gave some fixed pixels to table layout but getting issues while seeing that page on 1600 X 900 pixels. Then trying into percentage stuff.
create a table and divide that table into columns and gave 40% to first and last column (to st background) because i want my main content table into middle of the screen and gave hardcoded 970px but still getting issues with layout stuff. Last column looks 60% of total screen.
can we set column width dynamically depends on screen resolution ? or some specific solution please suggest..
Hope this is what you are looking for
<body>
<form id="form1" runat="server">
<div style="background-color: Black; width: 100%; height: 680px;">
<div style="width: 970px; margin: 0 auto;padding:0px">
<div style="width: 25%; height: 675px; float: left; background-color: Blue;">
</div>
<div style="width: 75%; height: 675px; float: right; background-color: white">
<div style="width: 75%; height: 675px; float: left; background-color: red">
</div>
<div style="width: 25%; height: 675px; float: right; background-color: Green">
</div>
</div>
</div>
</div>
</form>
Hope it helps
Media queries could solve your problem, take a look at this:
CSS3 Media Queries
You can use different CSS depending on the screen resolution, hope it helps.
With tables
<body>
<form id="form1" runat="server">
<div style="background-color: Black; width: 100%; height: 680px;">
<div style="width: 970px; margin:0 auto;padding:0px">
<table width="100%" style="margin:0px" cellpadding="0" cellspacing="0">
<colgroup width="100%">
<col width="25%" />
<col width="50%" />
<col width="25%" />
</colgroup>
<tr>
<td style="height:680px; background-color:Aqua">
</td>
<td style="height:680px; background-color:Green">
</td>
<td style="height:680px; background-color:Maroon">
</td>
</tr>
</table>
</div>
</div>
</form>