I just went to a lot of trouble to create a nice looking email using html.
It works for both gmail and yahoo. I just though i'd test on hotmail and outlook.com and it just displays the whole email as the HTML code?!
The html is well formed and appears like this:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<style>
body {
background-color:white;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
#outterBox {
position:relative;
width:500px;
height:320px;
background-color:#F0f0f0;
padding:10px;
}
#innerBox {
background-color:white;
width:90%;
height:55%;
margin-top:6px;
margin: 0 auto;
margin-top:24px;
position:relative;
}
#headingBox {
width:100%;
height:18%;
background-color:#f0f0f0;
overflow: hidden;
}
#notiBar {
background-color:#a1a1a1;
width:100%;
height:42px;
line-height:42px;
}
#notiBar > span {
font-size:18px;
color:white;
margin-left:16px;
}
#notiContent {
width:100%;
height:100%;
position:relative;
}
#notiContent > span {
font-size:18px;
color:#878787;
margin-top:16px;
margin-bottom:16px;
margin-left:14px;
}
#msgContent {
height:30px;
line-height:30px;
padding:10px;
}
#msgContent > span {
font-size:18px;
color:#878787;
margin-top:16px;
margin-bottom:16px;
margin-left:4px;
}
#linkContent {
margin-top:2%;
height:50px;
width:100%;
position:relative;
text-align:center;
}
#siteButton {
display:inline-block;
background-color:#5683CC;
border:none;
color:white;
font-size:16px;
padding-left:10px;
padding-right:10px;
text-decoration:none;
height:36px;
width:40%;
line-height:36px;
text-align:center;
}
#footer {
height:27%;
width:90%;
padding-top:10%;
}
#footer > span {
color:#878787;
font-size:10px;
}
#unsubscribe {
text-decoration:none;
color:#81a0d3;
font-size:10px;
}
</style>
</head>
<body>
<div id="outterBox">
<div id="headingBox">
<img src="image location" alt="xx" title="xx" style="display:block"/>
</div>
<div id="innerBox">
<div id="notiContent">
<div id="msgContent">
<span><span id="userName"></span>, new message</span>
</div>
<div id="linkContent">
<a id="siteButton" href="website">Check msgs now</a>
</div>
</div>
</div>
<div id="footer">
<span> To unsubscribe from<a id="unsubscribe" href="/"> here</a></span>
</div>
</div>
</body>
</html>
Is there a trick to getting this working without having to dramatically change my code for microsoft?
Email is not forgiving at all. Every browser, every client could display something different. With microsoft being the absolute worst at rendering expectations. Your best bet is to inline style as much as you can, using tools like: http://foundation.zurb.com/emails/inliner.html
This is a good resource as well, for what elements/attributes to stay away from: https://www.campaignmonitor.com/css/
Also, check out email on Acid. I'm not sure if they are fremium, but you can see how the email looks in every browser/client/device etc...
good luck.
Try to use on top of it:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
johhny B, this is salvageable, but as you have figured out by now, Outlook does not work with HTML 5, CSS 3, divs or darn near anything fun.
The biggest thing you need to do is inline css values. Outlook ignores style sheets. It's going to ignore any css like, #msgContent > span.
This is your email with very few values inlined to clean up the look of Outlook slightly.
Good luck.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<style>
body {
background-color:white;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
#outterBox {
position:relative;
width:500px;
height:320px;
background-color:#F0f0f0;
padding:10px;
}
#innerBox {
background-color:white;
width:90%;
height:55%;
margin-top:6px;
margin: 0 auto;
margin-top:24px;
position:relative;
border: 1px;
}
#headingBox {
width:100%;
height:18%;
background-color:#f0f0f0;
overflow: hidden;
}
#notiBar {
background-color:#a1a1a1;
width:100%;
height:42px;
line-height:42px;
}
#notiBar > span {
font-size:18px;
color:white;
margin-left:16px;
}
#notiContent {
width:100%;
height:100%;
position:relative;
}
#notiContent > span {
font-size:18px;
color:#878787;
margin-top:16px;
margin-bottom:16px;
margin-left:14px;
}
#msgContent {
height:30px;
line-height:30px;
padding:10px;
}
#msgContent > span {
font-size:18px;
color:#878787;
margin-top:16px;
margin-bottom:16px;
margin-left:4px;
}
#linkContent {
margin-top:2%;
height:50px;
width:100%;
position:relative;
text-align:center;
}
#siteButton {
display:inline-block;
background-color:#5683CC;
border:none;
color:white;
font-size:16px;
padding-left:10px;
padding-right:10px;
text-decoration:none;
height:36px;
width:40%;
line-height:36px;
text-align:center;
}
#footer {
height:27%;
width:90%;
padding-top:10%;
}
#footer > span {
color:#878787;
font-size:10px;
}
#unsubscribe {
text-decoration:none;
color:#81a0d3;
font-size:10px;
}
</style>
</head>
<body>
<div id="outterBox" style="width: 500px; border: 1px solid;">
<div id="headingBox" style="width: 500px; height:55px; background:#f0f0f0;">
<img src="image location" alt="xx" title="xx" style="display:block"/>
</div>
<div id="innerBox" style="width: 450px;">
<div id="notiContent" style="width: 450px; border: 1px solid;">
<div id="msgContent">
<span><span id="userName"></span>, new message</span>
</div>
<div id="linkContent">
<a id="siteButton" href="website">Check msgs now</a>
</div>
</div>
</div>
<div id="footer">
<span> To unsubscribe from<a id="unsubscribe" href="/"> here</a></span>
</div>
</div>
</body>
</html>
Related
As mentioned in the title I am making a website for school, and part way through creating it I discovered that when I displayed the page on a screen with a different resolution that the elements on my site do not line up correctly. I am fairly new to html/css and am stuck at how to fix this. Any advice or help would be greatly appreciated.
This is the body section of my html file:
<a href='index.html'>
<img src="Images\Logo\Logopng.png" alt="Explore Germany"/>
</a> <!-- Inserting Logo at top of page -->
<div id="whitespace">
<a> <img id="twitt" src="Images\images\twitter_web.png"> </a>
<a> <img id="email" src="Images\images\email_web.png"> </a>
</div>
<nav>
<div id="top" class = "line black"></div> <!-- This is the black line just above the links at top of page -->
<ul> <!-- A list with links to external pages for my header -->
<li><a id="menu" href="why.html">Why Germany?</a></li>
<li><a id="menu" href="where.html">Where In Germany?</a></li>
<li><a id="menu" href="language.html">German Language</a></li>
<li><div class="box grey"></div></li>
</ul>
<div id="bottom" class = "line black"></div> <!-- This is the black line just below the links at top of page -->
</nav>
</header>
<img id="map" src="Images\images\Map.png">
<img class="Icon" id="Hamburg" src="Images\images\Icon.png"> <div id="Hamburg_Name">Hamburg</div>
<img class="Icon" id="Berlin" src="Images\images\Icon.png"> <div id="Berlin_Name">Berlin</div>
<img class="Icon" id="Dresden" src="Images\images\Icon.png"> <div id="Dresden_Name">Dresden</div>
<img class="Icon" id="Dusseldorf" src="Images\images\Icon.png"> <div id="Dusseldorf_Name">Dusseldorf</div>
<img class="Icon" id="Cologne" src="Images\images\Icon.png"> <div id="Cologne_Name">Cologne</div>
<img class="Icon" id="Frankfurt" src="Images\images\Icon.png"> <div id="Frankfurt_Name">Frankfurt</div>
<img class="Icon" id="Munich" src="Images\images\Icon.png"> <div id="Munich_Name">Munich</div>
<div id="info">
<div id="name">Click on an Icon on the<br> map to learn more about that city</div>
<div id="info1"></div>
<img src="" id="cityImg">
<div id="head"></div>
<div id="info2"></div>
</div>
<div id="foot" class="footer black"> <!-- This is for the black box at the bottom which is the footer -->
<nav>
<ul>
<li><a id="wfooter" href="index.html">Home</a></li> <!-- This is a list of the links and lines in the footer -->
<li><a id="wfooter" href="why.html">Why Germany</a></li>
<li><a id="wfooter" href="where.html">Where In Germany</a></li>
<li><a id="wfooter" href="language.html">German Language</a></li>
<li><a id="wfooter2"><i>#Copyright Jack Ryan 2017 Contact: jryan#student.christscollege.com<i></a></li>
</ul>
</nav>
</div>
</body>
And this is my css file:
body {
width: 800px;
height:1200px;
margin:0 auto;
vertical-align: middle;
height:100%;
}
p {
font-size: 15%
font:;
}
header img {
vertical-align: middle;
margin-left: 350px;
margin-top:15px;
max-height: 100px;
max-width:100px;
}
#gate {
max-width: 800px;
margin-left: 0px;
position:relative;
bottom:16px;
}
html {
width:100%;
height:100%;
background-color:black;
}
ul {
list-style-type:none;
margin-left:-40px;
padding: none;
overflow: hidden;
}
#menu {
margin-left:93px;
max-width: 800px;
float:left;
display: block;
padding:12px;
background-color:#dddddd;
text-align: center;
text-decoration: none;
font-family: "Proxima Nova";
color:black;
margin-top:0px;
}
#menu:hover {
background-color: #cccccc;
}
.box {
width:800px;
height: 40px;
}
.grey {
background:#dddddd;
}
.line {
width:800px;
height:2px;
}
.black {
background:#000000;
}
#top {
position:relative;
bottom:-18px;
}
#bottom {
position:relative;
bottom:16px;
}
.back {
width:800px;
height:1225px;
}
.backwhere {
width:800px;
height:935px;
}
.darkgrey {
background:#fefdfd;
}
.side {
position:absolute;
width:10px;
height:10px;
}
.footer {
width:775px;
height:150px;
margin-left:12.5px;
border-radius:12.5px;
}
#body {
width:775px;
margin-left:12.5px;
}
#footer {
display: block;
text-decoration:none;
font-family:"Proxima Nova";
position:relative;
padding:5px;
top:10px;
color:white;
margin-left:5px;
}
#footer2 {
display: block;
text-decoration:none;
font-family:"Proxima Nova";
position:relative;
color:white;
margin-left:15px;
margin-top:20px;
}
#footer:hover {
color:lightgray;
}
#twitt {
position:relative;
margin-left:750px;
top:-125px;
}
#email {
position:relative;
margin-left:695px;
top:-186px;
}
#whitespace {
height:0px;
}
#map {
position:absolute;
left: 270px;
margin-left:0px;
max-height:85%;
max-width:85%;
}
#hamburg {
position:absolute;
top:280px;
left:480px;
}
#hamburg_name {
position:absolute;
top:280px;
left:500px;
font-family:"Proxima Nova";
}
#Berlin {
position:absolute;
top:350px;
left:620px;
}
#Berlin_Name {
position:absolute;
top:350px;
left:640px;
font-family:"Proxima Nova";
}
#Dresden {
position:absolute;
top:425px;
left:640px;
}
#Dresden_name {
position:absolute;
top:425px;
left:660px;
font-family:"Proxima Nova";
}
#Dusseldorf {
position:absolute;
top:435px;
left:360px;
}
#Dusseldorf_name {
position:absolute;
top:435px;
left:380px;
font-family:"Proxima Nova";
}
#Cologne {
position:absolute;
top:460px;
left:380px;
}
#Cologne_name {
position:absolute;
top:460px;
left:400px;
font-family:"Proxima Nova";
}
#Frankfurt {
position:absolute;
top:510px;
left:455px;
}
#Frankfurt_name {
position:absolute;
top:510px;
left:475px;
font-family:"Proxima Nova";
}
#Munich {
position:absolute;
top:620px;
left:550px;
}
#Munich_name {
position:absolute;
top:620px;
left:570px;
font-family:"Proxima Nova";
}
.Icon{
height: 20px;
width: 20px;
}
#info{
position: absolute;
top: 200px;
left: 730px;
background-color: #e6e6e6;
height: 550px;
width: 325px;
border-radius:12.5px;
}
#Name {
font-family:"Proxima Nova";
font-size:25px;
position: absolute;
left:20px;
top:10px;
}
#info1 {
font-family:"Proxima Nova";
font-size:15px;
position:absolute;
left:15px;
top:40px;
}
#info2 {
font-family:"Proxima Nova";
font-size:15px;
position:absolute;
left:15px;
top:320px;
}
#cityImg {
position:absolute;
top:120px;
left:15px;
max-width:300px;
max-height:200px;
}
#head {
font-family:"Proxima Nova";
font-size:25px;
position:absolute;
left:15px;
top:290px;
}
#foot {
position:absolute;
top:760px;
}
#wfooter {
display: block;
text-decoration:none;
font-family:"Proxima Nova";
position:relative;
padding:5px;
top:-5px;
color:white;
margin-left:5px;
}
#wfooter2 {
display: block;
text-decoration:none;
font-family:"Proxima Nova";
position:relative;
color:white;
margin-left:15px;
margin-top:20px;
top:-10px;
}
h1 {
font-family: "Proxima Nova";
color:black;
position:absolute;
font-weight:lighter;
top:175px;
left:300px;
z-index:1;
}
h2 {
font-family: "Proxima Nova";
font-style:normal;
color:black;
font-weight:lighter;
font-size:16px;
position:absolute;
top:220px;
left:300px;
max-width:700px;
z-index:1;
}
#Central_Why {
border-radius:15px;
border:3px solid black;
max-width:775px;
position:absolute;
top:300px;
left:285px;
z-index:0;
border-color:black;
}
#Why_Body {
position:absolute;
font-family:"Proxima Nova";
left:285px;
top:630px;
font-weight:lighter;
}
#Oktoberfest {
position:absolute;
font-family:"Proxima Nova";
left:285px;
top:690px;
font-weight:lighter;
}
there are a few solutions. a simple one would be #media queries. these ask the browser what size it is and then give it different instructions depending on size
for example adding
#media screen and (min-width: 480px) {
body {
width: 600px;
height:1000px;
}
}
now your screen will load a different height and width depending on screen size. you can read more here: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
and here is a set of sizes to work to: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
there will always be differences on uses screens so you have to build anticipating that, so test it on lots by resizing your browser or if oyu get more into webdesign using a site like this: http://quirktools.com/screenfly/
also, i'm sorry about all the downvotes. the community here aren't really newbie friendly. its an amazing resource, but more where experienced (/semi experienced) developers come to support each other.. i guess that culture has developed so it doesn't become like a school for teaching basics.
speaking as someone who closed more than one account because my questions we not well received, i'd suggest googling for a forum or slack group specifically for people starting out to get advice and help, there are plenty of devs out there eager to help those just starting out
If you go to Google Play Store Website,you will notice that the width of the SearchBar at the top changes if you change the window width.
Can someone please give me an example on how I can achieve such variable width behaviour using just HTML and CSS?
CSS
body {
margin:0;
min-width:960px;
}
#upperbar {
background-color:#F1F1F1;
white-space:nowrap;
height:60px;
width:100%;
}
#logobardiv {
margin:10px 20px 10px 30px;
display:inline-block;
}
#logo {
height:39px;
width:183px;
}
#searchbardiv {
font-size:0;
display:inline-block;
height:100%;
padding-left:10px;
vertical-align:middle;
white-space:nowrap;
min-width:200px;
}
#searchbar {
height:28px;
/*max-width:589px;*/
max-width:100%;
width:589px;
min-width:545px;
font-size:16px;
border:1px solid #A8A8A8;
border-right:none;
display:inline-block;
vertical-align:middle;
}
#searchbar:hover {
border:1px solid black;
border-right:none;
}
::-webkit-input-placeholder {
color:#A9A9A9;
padding:0 0 0 7px;
}
#searchbutton {
vertical-align:middle;
background:#4584F0;
height:28px;
width:60px;
display:inline-block;
border:1px solid transparent;
border-top-right-radius:2px;
border-bottom-right-radius:2px;
padding:0;
margin:0;
outline:none;
white-space:nowrap;
}
#searchbuttonimg {
vertical-align:middle;
background:url(images/search.png) no-repeat center;
display:inline-block;
height:100%;
width:26px;
}
#signindiv {
display:inline-block;
height:100%;
white-space:nowrap;
vertical-align:middle;
}
#appsimg {
display:inline-block;
vertical-align:middle;
}
HTML
<body>
<div class="container">
<div id="upperbar">
<div id="logobardiv">
<img id="logo" src="https://www.gstatic.com/android/market_images/web/play_logo_x2.png" />
</div>
<div id="searchbardiv">
<input id="searchbar" type="text" placeholder="Search" />
<button id="searchbutton"> <span id="searchbuttonimg"></span>
</button>
</div>
<div id="signindiv">
<img id="appsimg" src="images/apps.png" />
</div>
</div>
</div>
JSFiddle
simple way is you need to set a 3 different width max-width, min-widtht and actual width
like
input{
max-width:100%;
min-width:300px;
width:800px;
}
I used display:flex to achieve the variable length of the elements.
Refer the below link for a good explanation
FlexBox
I want to position an input element inside a div , but for some reason the input element is overflowing the div. What is the issue?
http://jsfiddle.net/aklintsevich/p1o584wg/
html:
<section class="full" id="third">
<div id="contact">
<form action="#" method="post" id="form">
<div class="email_info top white_border icomoon">
<div id="name_font" class="icon center_text">
</div>
<div>
<input type="text" name="firstname">
</div>
</div>
<div class="email_info bottom white_border icomoon">
<div id="email_font" class="icon center_text">
</div>
<div >
<input type="text" name="firstname">
</div>
</div>
</form>
</div>
</section>
css:
#third{
background-color:#22AFA0;
}
#contact{
background-color:blue;
margin:0px auto 30px auto;
position:relative;
top:30%;
width:65%;
height:30%;
background-color:red;
}
.email_info{
height:40%;
width:45%;
position:absolute;
background-color:green;
}
.message{
position:absolute;
right:0px;
height:100%;
width:45%;
background-color:green;
}
#message_icon{
height:40%;
width:20%;
background-color:blue;
border-right:1px solid white;
border-bottom:1px solid white;
}
#message_icon:before{
color:white;
display:block;
width:100%;
height:100%;
text-align:center;
line-height:80px;
font-size:2.5em;
content:"\e610";
}
.text_position{
float:right;
position:absolute;
}
.top{
top:0px;
}
.bottom{
bottom:0px;
}
#form_button{
position:relative;
width:65%;
height:20%;
/*background-color:orange;*/
}
.icon{
width:20%;
height:100%;
background-color:blue;
border-right:1px solid white;
}
.icomoon{
font-family: 'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
-webkit-font-smoothing: antialiased;
}
.white_border{
border:2px solid white;
}
.center_text{
text-align:center;
}
#name_font:before{
font-size:2.5em;
display:block;
width:100%;
height:100%;
line-height:80px;
color:white;
content:"\e611";
}
#email_font:before{
font-size:2.5em;
display:block;
width:100%;
height:100%;
line-height:80px;
color:white;
content:"\e60f";
}
set the attribute 'overflow' to 'auto' in relevant div s. as an example,
.email_info{
overflow : auto;
}
Divs have a default display of block,therefore, to have two divs to be able to line up on the same line you have to declare them as inline-block.
.email_info{
display:inline-block;
}
I am trying to create an iframe with a height of 100% and a width of 100%. The html and body are both set to 100% height, and the table that the iframe is in is also set to 100% height. This works perfectly when using Chrome and Safari (both webkit), but does not work at all when using Firefox. When I view the site using Firefox, the content does not fill 100% of the page height, but just a small portion.
Below is my html:
<?php include("checkOnLogin.php"); ?>
<!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>Fly Earth Staff Area</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table width="100%" height="100%" id="main" border="0" cellspacing="0" cellpadding="0">
<tr>
<td id="header" colspan="2"><span id="text_flyearth">Fly Earth </span><span id="text_staffarea">Staff Area</span><span id="user_info"><?php include("getUserInfo.php"); ?></span></td>
</tr>
<tr>
<td id="nav"><?php include("navBarMain.html"); ?></td>
<td id="content"><iframe height="100%" width="100%" frameborder="0" src="/memchat"></iframe></td>
</tr>
</table>
</body>
</html>
And CSS:
#charset "UTF-8";
/* CSS Document */
html {
height:100%;
width:100%;
padding:0;
margin:0;
}
body {
border:0;
margin:0;
padding:0;
height:100%;
width:100%;
}
#main {
width:100%;
height:100%;
}
#header {
height:40px;
background-image:url(images/header_bg.png);
background-repeat:repeat-x;
vertical-align:middle;
}
#text_flyearth {
font-size:20pt;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
position:relative;
left:5px;
color:#333;
}
#text_staffarea {
font-size:20pt;
font-weight:normal;
font-family:Arial, Helvetica, sans-serif;
position:relative;
left:5px;
color:#333;
}
#nav {
background-color:#CCC;
width:200px;
text-align:left;
vertical-align:top;
}
#content {
background-color:#FFF;
vertical-align:top;
text-align:left;
font-family:Arial, Helvetica, sans-serif;
font-size:12pt;
padding:15px;
}
.navlink:link {
text-decoration:none;
}
.navlink:visited {
text-decoration:none;
}
.navlink:hover {
text-decoration:underline;
}
.navlink:active {
text-decoration:underline;
}
.navlink {
color:#333;
font-family:Arial, Helvetica, sans-serif;
font-size:14pt;
position:relative;
top:30px;
left:15px;
}
.navlinksmall:link {
text-decoration:none;
}
.navlinksmall:visited {
text-decoration:none;
}
.navlinksmall:hover {
text-decoration:underline;
}
.navlinksmall:active {
text-decoration:underline;
}
.navlinksmall {
color:#333;
font-family:Arial, Helvetica, sans-serif;
font-size:11pt;
position:relative;
top:30px;
left:15px;
}
#redlogin {
color:#F00;
}
#user_info {
font-family:Arial, Helvetica, sans-serif;
color:#FFF;
font-size:15pt;
text-align:right;
float:right;
position:relative;
top:3px;
right:5px;
}
Thanks so much for any help!
Robert
Neither your table row nor table cell has a specified height, so per spec the iframe should have auto height.
I have this code :
<div class="ultime_box">
<div class="ultime_box_photo">
Photo
</div>
<div class="ultime_text">
<div class="ultime_box_title">
Title
</div>
<div class="ultime_box_description">
Description
</div>
link
</div>
<div class="clear"><!--- --></div>
</div>
.ultime_box
{
margin:15px 27px 35px 20px;
color:#FFFFFF;
font-size:13px;
height:100px;
background-color:#cdcccc;
}
.ultime_box_photo
{
width:120px;
margin-right:15px;
float:left;
}
.ultime_text
{
float:left;
width:299px;
}
.ultime_box_title
{
color:#000000;
font-weight:bold;
font-size:12px;
text-transform:uppercase;
line-height:12px;
padding-bottom:13px;
}
.ultime_box_description
{
color:#FFFFFF;
font-size:11px;
line-height:13px;
padding-bottom:13px;
}
a.ultime_box_vai:link, a.ultime_box_vai:visited
{
color:#000000;
font-weight:bold;
font-size:12px;
line-height:12px;
text-decoration:none;
}
a.ultime_box_vai:hover
{
text-decoration:underline;
}
And I'd like to put the link in the bottom of the container div (ultime_box), without using height in the previous divs.
How can I do this?
Here's the solution: http://jsfiddle.net/N7GWV/1/
Give .ultime_box position: relative and your link position: absolute; bottom: 0.
.ultime_box
{
margin:15px 27px 35px 20px;
color:#FFFFFF;
font-size:13px;
height:100px;
background-color:#cdcccc;
position: relative;
}
a.ultime_box_vai:link, a.ultime_box_vai:visited
{
color:#000000;
font-weight:bold;
font-size:12px;
line-height:12px;
text-decoration:none;
position: absolute;
bottom: 0;
}
.ultime_text
{
float:left;
width:299px;
position:relative;
}
a.ultime_box_vai:link, a.ultime_box_vai:visited
{
color:#000000;
font-weight:bold;
font-size:12px;
line-height:12px;
text-decoration:none;
position:absolute;
bottom:0px;
}
this should do what you need. Basically, it's all depending on the position attribute of the divs.
This quick guide should clean you out about it.
You could make your bottom link have this css:
a.bottomLink{
float:left;
width:100%;
}
As your container div height is dynamic (based on content), your bottom link will be on the bottom. If I understood, you want to place link on the bottom of ultime_box, so your html should look like:
<div class="ultime_box">
<div class="ultime_box_photo">
Photo
</div>
<div class="ultime_text">
<div class="ultime_box_title">
Title
</div>
<div class="ultime_box_description">
Description
</div>
link
</div>
<div class="clear"><!--- --></div>
bottom
</div>