I've been working on this site a lot lately, because I really want to get it done, but sadly I just keep getting problem after problem. So this time, I set up the div perfect, but when you are on a lower resolution, the div decides to move down. I don't understand it. If I zoom in it happens. Or if I zoom out on a low resolution, it's perfect.
The CSS:
#states{
float:left;
background-color:#EEEEEE;
overflow: auto;
display:inline-block;
font-size:14;
}
#container{
position:relative;
margin-bottom:40%;
margin-left:11%;
}
#index{
float:left;
}
The HTML:
<table width="100%" align="center" border="1" cellspacing="1" cellpadding="5">
<tr>
<td width="100%" valign="top">
<?php states(); ?>
<div id="container">
<!--Start Content-->
<div id="index">
<table align="center" width="100%" class="test" border="0" cellspacing="1" cellpadding="15">
<tr align="left">
<th>Posted</th>
<th>Title</th>
<th>Description</th>
<th>Location</th>
<th>User</th>
</tr>
</table>
</div>
<!--End Content-->
</div>
</td>
</tr>
</table>
Maybe you should try a tableless approach.
is a DIV inside a TD a bad idea?
If you use a div in a td you will however get in a situation where it might be hard to predict how the elements will be sized.
Related
In the code below, div with red background gets 0 height when the image is there but with image node removed, it gets the correct height of 60px from the parent. Why is it and how can it be corrected?
Here is also the jsfiddle link: https://jsfiddle.net/zuymamq7/
html,body{
width:100%;
height:100%;
}
<table style="width:100%;height:100%;">
<tr style="height:60px;">
<td>
<div style="width:100%; height:100%; background-color:blue;">
<img src="http://www.bensound.com/bensound-img/betterdays.jpg" style="width:60px; height:60px;"></img>
<div style="display:inline-block;width: 10%; height:100%; background-color:red;">
</div>
</div>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>
Biggest thing that I noticed as I began to edit this:
You added a close image tag (</img>). Those don't exist. The correct syntax is either <img src="something.jpg"> or more technically <img src="something.jpg" /> Threw off some things a lot (especially in the editor)
I'm thinking this is what you want, or at least, I hope.
html,
body {
width: 100%;
height: 100%;
}
<table style="width:100%;height:100%;">
<tr>
<td style="height:60px">
<div style="width:100%; height:100%; background-color:blue;">
<img src="http://www.bensound.com/bensound-img/betterdays.jpg" style="width:60px; height:60px;" />
<div style="display:inline-block;width: 10%; height:100%; background-color:red;">
</div>
</div>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>
Other Way
If you can change up the HTML a bit, then this should work too.
html,
body {
height: 100%;
width: 100%;
}
table {
border-collapse: collapse;
}
<table style="width:100%;height:100%;">
<tr style="background-color:blue">
<td style="height:60px;width:60px;">
<img src="http://www.bensound.com/bensound-img/betterdays.jpg" style="width:60px; height:60px;" />
</td>
<td style="background-color:red; width:10%">
Text
</td>
<td> </td>
</tr>
<tr>
<td>
</td>
</tr>
</table>
i have 6 social media icons for a footer of an e-mail. Is it possible to make this responsive for phones so the social media icons go from 6 to 3 in one row?
I have tried to use both divs and tables with bootstrap but both are displaying incorrectly. I would prefer tables as they work with outlook e-mail.
Bootstrap code:
<td class="col-xs-4 col-sm-4 col-md-2">
You can put each set of 3 icons into separate columns which stack on xs.
<div class="col-xs-12 col-md-6>...Three icons go here....</div>
<div class="col-xs-12 col-md-6>...Three icons go here....</div>
Edit: Since this is for Outlook, Bootstrap will not play nicely with it. More info can be found here: Has anyone gotten HTML emails working with Twitter Bootstrap?
Would something like this work for you?
As an exmaple; this uses a media query, so that when the device width is below a certain size it resizes any 640px widths to 320px and then applies the "wrap" (wr) and "float" (fl) classes to wrap the columns beneath eachother.
If you take the HTML and stick it in Chrome of Firefox and resize the window you can see how it works.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>none</title>
<style type="text/css">
#media only screen and (max-width: 580px){
*[class].wr{ display:block !important; }
*[class].fl{ float:left !important; }
*[class].w320{ width:320px !important; }
</style>
</head>
<body style="padding:0px; margin:0PX;" bgcolor="#DEDEDE">
<table width="100%" align="center" border="0" cellpadding="0" cellspacing="0" bgcolor="#DEDEDE" style="table-layout:fixed; margin:0 auto;">
<tr>
<td width="100%" align="center" valign="top" bgcolor="#DEDEDE">
<!--Table to wrap email-->
<!--Table with images in-->
<table width="640" border="0" cellpadding="0" cellspacing="0" class="w320">
<tr class="wr">
<!--Top row-->
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" style="line-height:1px; font-size:1px;" bgcolor="#ffcc00"><img src="images/image.gif" style="display:block;" width="30" height="30" border="0" alt=""/></td>
<td align="center" style="line-height:1px; font-size:1px;" bgcolor="#ccff00"><img src="images/image.gif" style="display:block;" width="30" height="30" border="0" alt=""/></td>
<td align="center" style="line-height:1px; font-size:1px;" bgcolor="#00ffcc"><img src="images/image.gif" style="display:block;" width="30" height="30" border="0" alt=""/></td>
</tr>
</table>
</td>
<!--End top row-->
<!--Bottom row-->
<td class="fl wr">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" style="line-height:1px; font-size:1px;" bgcolor="#3377ff"><img src="images/image.gif" style="display:block;" width="30" height="30" border="0" alt=""/></td>
<td align="center" style="line-height:1px; font-size:1px;" bgcolor="#ff3377"><img src="images/image.gif" style="display:block;" width="30" height="30" border="0" alt=""/></td>
<td align="center" style="line-height:1px; font-size:1px;" bgcolor="#7733ff"><img src="images/image.gif" style="display:block;" width="30" height="30" border="0" alt=""/></td>
</tr>
</table>
</td>
<!--End bottom row-->
</tr>
</table>
<!--End table with images in-->
<!--End of table to wrap email-->
</td>
</tr>
</table>
</body>
</html>
Note: This works across iPhone, Android 2.3 and 4.2. Problems occur in Android 4.4 kitkat but there is a workaround for it.
The way to do it so it works everywhere (outlook and all android included is with floated tables:
CSS:
#media only screen and (max-width: 480px) {
*[class*="drop"] { float:none!important; clear:both!important; width:100%!important; padding:0!important; display:block!important; }
}
HTML:
<table width="300" border="0" cellpadding="0" cellspacing="0" class="drop" align="left">
<tr>
<td align="left" valign="top"><!--image 1 goes in here--></td>
<td align="left" valign="top"><!--image 2 goes in here--></td>
<td align="left" valign="top"><!--image 3 goes in here--></td>
</tr>
</table>
<!--[if mso]></td>
<td align="left" valign="top" width="50%"><![endif]-->
<table width="300" border="0" cellpadding="0" cellspacing="0" class="drop" align="right">
<tr>
<td align="left" valign="top"><!--image 1 goes in here--></td>
<td align="left" valign="top"><!--image 2 goes in here--></td>
<td align="left" valign="top"><!--image 3 goes in here--></td>
</tr>
</table>
</td>
The table widths would need to be changed to suit your email width so they equal 50% of it.
You will notice the commented closing and opening td in the middle - this is an outlook condition, so for outlook only there will be a td wrapping each table.
If your tables don't need to be exactly 50% (as in there is padding between them) then you can leave out the outlook comment and just size your tables smaller than 50%, and make sure 1 is floted left and the other is floated right, leaving the gap between them that you need as padding. So long as this gap is more than about 10px, it should work in outlook.
Also be aware of your table structure when you use this outlook comment. If this is used in a table with more rows, you will get column span issues in outlook, as this row with have an extra column in outlook. Best to nest a fresh table inside a td before using this outlook fix.
Also note that the float is specified on the tables using the align attribute. This is to accommodate the older versions of outlook that don't recognize the css property float.
I have divs as shown in the FIDDLE , the div content gets overlapped with the header resulting in hiding of the content data ie "Sample data 1".
<div id="header">
<div id="firstdiv">
<table border="0px" width="100%" style="background-color:rgb(2, 44, 72)">
<tr>
<td id="test1" style="width:90%;" align="left">test
</td>
</tr>
</table>
</div>
</div>
<div id="content">
<table border="0">
<tr>
<td>Sample data 1
</td>
</tr>
<tr>
<td>Sample data 2
</td>
</tr>
<tr>
<td>Sample data 3
</td>
</tr>
<tr>
<td>Sample data 4
</td>
</tr>
</table>
</div>
//CSS
#header
{
position:relative;
}
#firstdiv
{
float:left;width:100%;
position:absolute;
color:white;
}
Thanks
Remove the absolute positioning from the #firstdiv element. The left float also seems unnecessary.
See here: http://jsfiddle.net/k8Vut/2/
Add some padding to header: http://jsfiddle.net/k8Vut/3/
#header
{
padding-top: 25px;
}
Since your firstdiv is absolute it'll start from top: 0 position and hence overwrites the relative positioned header. So if you add some padding, it'll move the header a little below and make space for firstdiv
I am trying to achieve an effect in HTML + CSS like this
_____________________[ Some Div ]
The ____ is a border-bottom. The Div to the right of it shouldn't have the border. I want this border to stretch as much as possible, so that together they occupy the width of the parent. I am trying to avoid any fixed spacing layout.
I tried using a table with width:100%:
<table style="width:100%"><tbody><tr>
<td id="borderDiv"></td>
<td id="contentDiv">Some Div</td>
</tr><?tbody></table>
The extra space goes to the second td instead of the first one. I also tried floating the content div to the right:
<div>
<div id="contentDiv" style="float:right">Some Div</div>
<div id="borderDiv"></div>
</div>
But the div with the border now fills up the entire space of the parent. Couldn't figure out a way to constraint it to the leftover space.
Maybe I'm misunderstanding your question and I know the HTML + CSS purists are going to hate me for this but can't you do the following:
<table style="width: 100%">
<tr>
<td style="border-bottom: 1px solid #000; width: 100%"> </td>
<td><nobr>my content</nobr></td>
</tr>
</table>
If the second column has a specific width that you want you can specify that and remove the <nobr> tags and end up with something like:
<table style="width: 100%">
<tr>
<td style="border-bottom: 1px solid #000; width: 100%"> </td>
<td style="width: 200px">my content</td>
</tr>
</table>
The purist alternative to Brian's solution, using CSS properties:
<table style="width: 100%">
<tr>
<td style="border-bottom: 1px solid #000; width: 100%"> </td>
<td style="white-space:nowrap">my content</td>
</tr>
</table>
<div>
<div id="contentDiv" style="float:right; width:30%">Some Div</div>
<div id="borderDiv" style="margin-right: 30%"></div>
</div>
Floats are required to have a width so that's how I'd approach it.
This might work, but need more info about how you are dealing with the height. If it's fixed for example just make the float a bit taller.
<div>
<div id="contentDiv" style="float:right;background:white;white-space:nowrap></div>
<div id="borderDiv" style="border-bottom:1px solid black;"></div>
</div>
So, I have a predicament. My tabs are pushing down the content below it. Here is some of the code:
<div id="navigation">
<div id="test" class="blue">
<p>Home</p>
<p class="subtext">View/update contact information</p>
</div>
<div id="lessons" class="blue">
<p>Projects</p>
<p class="subtext">Create/open projects, view existing reports</p>
</div>
<div id="test" class="blue">
<p>Help</p>
<p class="subtext">If something doesn't work, click here</p>
</div>
</div>
<div id="contain3">
<table id="maintable" align="center" width="940" cellspacing="0" cellpadding="0" class="lessontablemain">
<tr align="center" valign="top">
<td height="500" cellpadding="0" cellspacing="0">
<!--<div id="maincontent">-->
<table align="left" cellspacing="4" cellpadding="4" style=" margin-top:10px; background-color:transparent; border: 0;" width="100%" class="textfont_charms">
<tr>
<td cellspacing="0" cellpadding="0" align="center" valign="top">
<br>
<!--template up-->
<!--side bar table below -->
<? include_once("sidebar.php"); ?>
</td>
<td cellspacing="0" cellpadding="0" width="100%" valign="top" align="center">
<table id="maintable" style=" margin-top:10px; background-color:transparent; border: 0;" cellspacing="0" cellpadding="0" height="100%" valign="top" width="100%">
<tr>
<td valign="top" align="center" width="100%" cellspacing="0" cellpadding="0" height="100%">
<div align="center" id="content" style="vertical-align: top;"></div>
</td>
</tr>
</table>
<!--template down-->
</div>
</td>
</tr>
</table>
</tr>
<tr valign="bottom">
<td style="background-color: #E2E2E2;">
<?
include('template/footer_tmpl.php');
?>
</td>
</tr>
</table>
</div>
Here is my css:
#contain3{
width:940px;
margin-left:auto;
margin-right:auto;
text-align:left;
/*position: absolute;*/
top: 137;
z-index: -1;
}
#navigation{
width:940px;
margin-left: 8px;
text-align:left;
font-family:"Lucida Grande","Lucida Sans",sans-serif;
font-size:12px;
top: 109;
/*position: absolute;*/
z-index: 2;
}
To see what I'm talking about, my site is: http://www.charmscorp.com/inspect/projects.php - click on the tabs up above. Don't mind the slowness of the site, it's a server issue... so you have to wait a few seconds for the tabs to initialize.
Also, as you can see, I commented out position absolute. I thought that would be the answer, but instead, it just put the tab div on top of the content... Please help, this is giving me a headache!
Instead of making the divs with class "blue" higher - and thus revealing the drop down - why don't you show() the paragraphs with class "subtext" themselves instead?
Have them set to display: none by default, and use JavaScript to reveal them. You'll need to set them to position: absolute also, so they don't push any content down.
ok, I fixed this. I made the position: absolute, and then margin-top:27px, which pushed the content div down to where I wanted it to be. Another problem arose though, which is IE related. I'll start a new thread for that one though, as it's a new problem. Thanks!