CODEWITHSUNDEEP
htmlcsshtml-email
Rami Yahya
Rami Yahya

Reputation: 13

Float image outside table in HTML Email

I'm looking to create a HTML email that should work in all the major email clients. (Read - ugly table-based layouts)

The design looks something like:

this sample image.

I can't use absolute positioning for the image (the circle with thunder) because it's not supported in email clients.

Can anyone guide me in the right direction?

The EDM needs to be responsive as well as have the rounded corners on the rectangle.

Also the width of the rectangle can't be a fixed width either.

Upvotes: 0

Views: 734

Answers (2)

Ivin Raj
Ivin Raj

Reputation: 3429

try this one:

 .rectangle{
  display:block;
  height:250px;
  width:250px;
  background:orange;
  position:relative;
  margin-top:100px;
    border-top-left-radius: .5em;
    border-top-right-radius: .5em;
    border-bottom-left-radius: .5em;
    border-bottom-right-radius: .5em;
}
p
{
  margin-top:38px;
  position:fixed;
  color:white;
  width:200px;
  text-align:center;
  padding:10px;
}


.circle{
  position:absolute; 
  left:50%;
  margin-left:-25px;
  top: -40px;

}
.circle img{
  position:absolute;
width: 100px;
 border:3px solid white;
    height: 100px;
    border-radius: 100%;
    left:50%;
  margin-left:-25px;
  top: -20px;
    }

DEMO HERE

Upvotes: 1

Ninoop p george
Ninoop p george

Reputation: 678

Use an external div for the thunder image. Then give it a disply:block and use the text-align:center; to bring it to center

Demo https://jsfiddle.net/gje91rzs/embedded/result/

Upvotes: 0

Related Questions