I am creating an HTML email signature and on small devices such as a phone, I can not keep it from wrapping when the screen resolution is not wide enough for the signature. I have tried a combination of everything I found here, either one or more of several suggestions on similar issues, but nothing seems to be working.
Here is the correct sig and two versions that are incorrect:
signature examples
Here is the code we currently have:
<div style="line-height:18px; margin:0px; padding: 0px 8px 8px 0px; font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#1e394e; display:inline-block; white-space: nowrap; overflow: hidden; min-width:500px;">
Sonnie Parker
Partner, Senior Administrator
334-482-4248 avnirvana.com
The signature will always wrap because the image container is set to float. This is good if you want your code to be responsive and display differently on smaller devices. If you want the two halves to always be side by side, I would specify their widths relative to their parent. Also, I'd recommend organizing your code with div tags.
.parent {
white-space: nowrap;
}
.parent>div {
display: inline-block;
}
.left {
width: 50%;
padding-right: 7px;
border-right: 2px solid #000000;
box-sizing: border-box;
}
.left img {
width: 100%;
}
.right {
width: 50%;
color: #1e394e;
padding-left: 7px;
box-sizing: border-box;
}
<div class="parent">
<div class="left">
<a href="avnirvana.com">
<img src="https://www.avnirvana.com/images/email_logo.png">
</a>
</div>
<div class="right">
<div>
<strong>Sonnie Parker</strong>
</div>
<div>
<em>Partner, Senior Administrator</em>
</div>
<div>
334-482-4248 avnirvana.com
</div>
</div>
</div>
Related
similar questions is asked several times but my question is more general!
FIRST:
for this first question I found an accurate answer here:
Display Inline-Block with Widths as Percent
assume that we have a <div> element in an html file and add a few styles to it;
notice that the width is 100% and it should place all over the screen width and shouldn't go out of the screen
(in this snippet the border of the element goes over the screen at the right side!):
body{
margin:0;
}
#section1{
display: inline-block;
width: 100%;
text-align: center;
font-size: xx-large;
border: red 5px solid;
}
<div id="section1">
hello
</div>
but, by the answer I found,
if I add box-sizing: border-box; to the css file, the view of the <div> element is going to be alright! and this is ok.
(run this snippeet to see the result):
#section1{
box-sizing: border-box;
display: inline-block;
width: 100%;
text-align: center;
font-size: xx-large;
border: red 5px solid;
}
<div id="section1">
hello
</div>
I didn't have any problems so far, that was only an introduction to understand my second question:
SECOND
the aforesaid words doesn't work if we have nested <div> elements!
I searched a lot but it wasn't effective for my example!
and this link is partly answered this question but not much effective!
this is the result that I want: here
this snippet is my sample that the two "hello" lines doesn't take place along eachother!:
body{
margin: 0;
}
.section2{
box-sizing: border-box;
display:inline-block;
width:50%;
border: green 2px solid;
}
<div id="section2">
<div id="section2-1" class="section2"> hello</div>
<div id="section2-2" class="section2">hello</div>
</div>
what is the easiest way without changing the display property or adding negative margins?!
the problem comes from the white space next to the elements, which is produced automatically when you use display: inline-block;
a trick is to remove white spaces as you also have seen here.
if you don't want change the display property and don't remove indentation of your code (white spaces):
the easiest way is to add this properties:
box-sizing: border-box;
float: left;
more about box-sizing property
more about float property
body{
margin: 0;
}
*{
box-sizing: border-box;
}
#section1{
display: inline-block;
width: 100%;
text-align: center;
font-size: xx-large;
border: red 5px solid;
}
#section2{
display: inline-block;
width: 100%;
font-size: xx-large;
border: blue 3px solid;
}
.section2{
display:inline-block;
width:50%;
border: yellow 5px solid;
float: left;
}
<div id="section1">
hello
</div>
<br>
<br>
<br>
<div id="section2">
<div id="section2-1" class="section2"> hello</div>
<div id="section2-2" class="section2">hello</div>
</div>
body{
margin: 0;
}
.section2{
box-sizing: border-box;
display:inline-block;
width:50%;
border: green 2px solid;
}
<div id="section2">
<div id="section2-1" class="section2"> hello</div
><div id="section2-2" class="section2">hello</div>
</div>
it is working, but what did i do ? i simply tested with 40%, saw there was a space inbetween your two divs, so just deleted the space (actually a new line with some tabulations)
Inline-block element are white-space dependent and you could refer this answer to learn more about the difference between display as block, inline and inline-block. There are many ways to remove this white-spacing, from which one is adding font-size 0 to parent div which is here #section2 then manually you could assign font-size to their child element.
body{
margin: 0;
}
#section2{
font-size:0;
}
.section2{
font-size:18px;
box-sizing: border-box;
display:inline-block;
width:50%;
background: green;
}
<div id="section2">
<div id="section2-1" class="section2"> hello</div>
<div id="section2-2" class="section2">hello</div>
</div>
My div should contain two more divs inside (in-left and in-right), but in-right isn't working. How am I supposed to align it with in-left?
#left {
position: absolute;
top: 76%;
left: 20%;
color: black;
border: 2px solid black;
border-radius: 15px 15px;
padding-left: 15px;
padding-right: 15px;
font-size: 1em;
text-align: center;
background-image: url("pink.jpg");
height: 1000px;
width: 800px;
background-size: 900px 1000px;
border: 1px solid black;
background-repeat: no-repeat;
box-shadow: 7px 7px 18px white;
}
#in-left {
top: 87%;
left: 22%;
color: black;
font-size: 1.5em;
text-align: left;
height: 650px;
width: 400px;
font-family: AR CENA;
border-right: 1px solid white;
}
#in-right {
top: 87%;
left: 50%;
color: black;
font-size: 1.5em;
text-align: right;
height: 650px;
width: 400px;
font-family: AR CENA;
}
<div id="left"><br>
<center>
<img src="acoe.jpg" alt="it's me" height="200" width="250"><img src="jer.jpg" alt="it's me" height="200" width="250"><img src="ako ulit.jpg" alt="it's me" height="200" width="250"></center>
<div id="in-left">
<center>
<h2>
Hobbies
</h2>
</center>
<ul>
<u><b><li>Biking 🚵</li></u></b>
I bike around the subdivision every other day, alone and sometimes with my friends. I really enjoy the solitude and the way the air hits my hair, and I can proudly say that biking is my relaxation technique.
<u><b><li>📖 Reading books and short stories 📖</li></u></b>
I usually spend my time indoors, and reading has been a big help for me to ease my boredom. I enjoy the horror genre because of the feeling of thrill and excitement it gives me. Reddit:
<img src="reddit.png" height="25" width="25">
<u><b><li>📽 Watching movies 🎥</li></u></b>
<u><b><li>🎧 Listening to music 🎶</li></u></b>
<u><b><li>Playing Videogames 🎮</li></u></b>
<u><b><li>🍔 Eating 🍳</li></u></b>
</ul>
</div>
<div id="in-right">
<center>
<h2>
Interests:
</center>
</h2>
</div>
</div>
use the float property of CSS. thanks
float : right;
Using flexbox will help you to achieve a solution easily. Check the snippet.
div {
border: 1px solid #ddd;
padding: 10px;
}
.container {
display: flex;
}
.in-left, .in-right {
flex-grow: 1;
}
<div class="container">
<div class="in-left">
Left
</div>
<div class="in-right">
Right
</div>
</div>
There are a number of options that allow you to achieve what you're looking for here, but before I start listing them, a quick piece of advice when it comes to HTML and CSS: "The more you try to do, the more difficult it will become, try to look for the simplest solution".
With that in mind, let's look for a few simple solutions which let you achieve what you're looking for.
Option 1: Float
float is a brilliant property which allows you to align div elements within their parent container. It can work really well, however you need to be careful because (as the MDN documentation states):
...the element is taken from the normal flow of the web page...
What this means is that your parent container won't be sized to contain your div anymore. To fix this, you can use the clear property on the parent's ::after pseudo-element, which will force it to resize correctly.
.parent {
background: red;
color: white;
}
.parent::after {
content: "";
display: block;
clear: both;
}
.left {
float: left;
background: blue;
padding: 10px;
}
.right {
float: right;
background: green;
padding: 10px;
}
<div class="parent">
<div class="left">
My first div
</div>
<div class="right">
My second div
</div>
</div>
Option 2: Inline Blocks
The next option takes advantage of the display property which allows you to configure how the Browser renders the element. Specifically, it allows you to configure the rendering box used by the Browser. By default a <span> element uses the inline display mode, while a div uses the block display mode. These correspond to (roughly) horizontal and vertical layout ordering as you can see in the following example:
<div>
<span>First</span>
<span>Second</span>
</div>
<div>
<span>Third</span>
<span>Fourth</span>
</div>
What display: inline-block allows us to do is instruct the browser to render the blocks as normal, but arrange them horizontally as though they were part of the normal text flow. This works really well and is much better supported by older browsers than Option 3 (but not as well as Option 1).
.parent > div {
display: inline-block;
}
.parent {
background: red;
color: white;
}
.first {
background: blue;
padding: 10px;
}
.second {
background: green;
padding: 10px;
}
<div class="parent">
<div class="first">First</div>
<div class="second">Second</div>
</div>
Option 3: Flexbox
The coolest option, albeit the newest and therefore least supported by older browsers, is using the new flexbox layout mode. It's currently still in draft state, but a lot of modern browsers support it already.
Flexbox lets you do the same kind of thing as Option 2 but with much better control over how things get arranged, the spacing between them, how they flow onto other lines and so on. There's a lot that can be covered and I'm not going to do that all here, but the part that applies to you is this:
.parent {
display: flex;
flex-direction: horizontal;
justify-content: space-between;
background: red;
color: white;
}
.first {
padding: 10px;
background: blue;
}
.second {
padding: 10px;
background: green;
}
<div class="parent">
<div class="first">First</div>
<div class="second">Second</div>
</div>
As this is a school project, my suggestion is that you spend some time reading up on (and experimenting with) the various options here and getting a feel for what they do. Which one you end up using is a lot less important than learning how to use them in the first place. Best of luck with it.
I have updated your code so it will look more cleaner. I have also created a class inlineblock to the CSS and added to both div elements inside the #left parent element. In your HTML code there are syntax errors like in closing tags.
Here is the link I have created for you https://jsfiddle.net/beljems/fyyqvm1t/13/.
Hope this will help you :)
Just try to use "float: left"
Here u have tutorial for using this
CLICK
If u want to delete the "float" on rest space of site u need to use "clear: both"
I have this issue where the second image is slightly smaller then it's counter parts, even though all the attributes (as far as I can tell) are exactly the same?
http://staging-triteamglos.transitiongraphics.co.uk/
Members sections, three circular images, the middle one isa different size?
/*--- Member Benifits
--------------------------------------------*/
.header-white {
text-align: center;
color: #fff;
}
.par-white {
text-align: center;
}
p.upper {
text-transform: uppercase;
font-weight: 800;
}
.mymember1 {
text-align: center;
float: left;
width: 33.3%;
box-sizing: border-box;
padding-right: 15px;
}
.mymember1 img,
.mymember2 img,
.mymember3 img {
border-radius: 50%;
width: 50%;
}
.mymember2 {
text-align: center;
float: left;
width: 33.3%;
box-sizing: border-box;
padding-left: 15px;
padding-right: 15px;
}
.mymember3 {
text-align: center;
float: right;
width: 33.3%;
box-sizing: border-box;
padding-left: 15px;
margin-bottom: 0!important;
}
.member {
margin: 15px auto!important;
}
<h1 class="header-white">Member Benefits</h1>
<p class="par-white">Thinking of joining TTG? Have a look at some of the member benefits below</p>
<div class="mymember1">
<p>
<a href="/membership/">
<img src="http://staging-triteamglos.transitiongraphics.co.uk/wp-content/uploads/2016/04/member-swimmer.jpg" height="185">
</a>
</p>
<p class="upper">Advice from experienced triathletes</p>
<p class="my_content">Our club benefits from a membership of very experience triathletes who have competed across all variations of the sport and they are more then to share their experiences.</p>
</div>
<div class="mymember2">
<p>
<a href="/membership/">
<img src="http://staging-triteamglos.transitiongraphics.co.uk/wp-content/uploads/2016/04/member-cyclist.jpg" height="185">
</a>
</p>
<p class="upper">Opportunity to train with others</p>
<p class="my_content">Motivation is key in training, training with others will help you achieve your goals what ever they are.</p>
</div>
<div class="mymember3">
<p>
<a href="/membership/">
<img src="http://staging-triteamglos.transitiongraphics.co.uk/wp-content/uploads/2016/04/member-runner.jpg" height="185">
</a>
</p>
<p class="upper">Comradeship from a big team</p>
<p class="my_content">We all want to achieve our personally goals, however when your surrounded by friends with the same mindset, the goals soon become secondary.</p>
</div>
<div class="clear"></div>
<div class="container member">
<a class="btn" href="#">FIND OUT MORE</a>
</div>
.mymember1 img, .mymember2 img, .mymember3 img {
border-radius: 50%;
width: 250px;
height: 250px;
max-width: 100%;
}
Actually you were using padding from both sides in mymember2 class. That's why its creating the problem. Also the above code fine and define the width and
height for all the images.
It is because your second image size is 180x180 while the other two were 187x187. they wont have the same size because your using border radius 50% on all of them.
To solve. its either u set a same sizes for the images or fixed ur 2nd image size to 187x187, or the 1st and 3rd img to 180x180 to make them all the same.
The reason why the 2nd image is smaller is because in its parent div, mymember2 was given an extra 15px padding.
I suggest you change all padding css for your .mymember# classes to margins and decrease their width to fit the page.
also, I would suggest putting all common css in 1 class called memember
.mymember {
text-align: center;
float: left;
width: 31%;
box-sizing: border-box;
margin: 0 15px;
}
And for every specific css give it to the corresponding div
I was struggling with weird rendering of my web site header for hour or so and it looks like there is the bug in WebKit (e.g. latest Chrome). It is bug? Or am I missing something?
Here is the http://jsfiddle.net/y415st6s/
I expect a separator to appear between Site Title and Page Title, but get only its border overflowing over the site title. I'm using min-width to set width of block with "Site title" and I noticed it works fine at least in FireFox and IE. In WebKit it looks like inner padding is not accounted in external dimensions of the block with min-width. The problem seems to disappear when 'width' is also set to the same value (see line #28 in jsfiddle CSS).
According to https://developer.mozilla.org/en-US/docs/Web/CSS/min-width setting just min-width should override 'width' too, so it seems I'm doing it the right way.
Staff for copy/pasting ...
HTML
<header class="siteHeader hstackpanel">
<div>
<div class="siteHeader__logoArea hstackpanel">
<div class="siteHeader__logoIcon">
<img src="http://static.flaticon.com/png/16/1394.png">
</div>
<div class="siteHeader__logoText hstackpanel-autofit">Site Title</div>
<div class="siteHeader__logoButtons">
<img src="http://static.flaticon.com/png/16/9916.png">
<img src="http://static.flaticon.com/png/16/57164.png">
</div>
</div>
</div>
<div>
<!-- box with blue border -->
<div class="siteHeader__splitter"></div>
</div>
<div class="hstackpanel-autofit">
<div class="siteHeader__titleArea hstackpanel">
<div class="hstackpanel-autofit">
<div class="siteHeader__titleAreaText hstackpanel hstackpanel-autofit">
<span class="siteHeader__pageTitleText">Current Page Title</span>
</div>
</div>
<div>
<div class="siteHeader__titleAreaButtons hstackpanel"></div>
</div>
</div>
</div>
</header>
CSS
* {
box-sizing: border-box;
}
.hstackpanel {
display: table;
width: 100%;
}
.hstackpanel > div {
display: table-cell;
position: relative;
vertical-align: middle;
padding: 2px;
}
.hstackpanel > div:not(.hstackpanel-autofit) {
white-space: nowrap;
width: 0.01px;
}
img {
width: 16px;
height: 16px;
}
.siteHeader {
background: yellow;
n_height: 24px;
}
.siteHeader__logoArea {
min-width: 270px;
/* width: 270px; */
padding: 4px 8px;
background: green;
}
.siteHeader__splitter {
border: 1px solid blue;
width: 8px;
height: 24px;
}
.siteHeader__titleArea {
padding: 4px 8px;
background: green;
}
Chrome and Safari do not support the min-width property on table elements. They will, however, respect min-width when applied to table cells. You're applying display: table to the .htstackpanel div.
I need the text in these floating divs to be in one line. In Firefox this works ok. In IE6 it looks messed up:
screen
I cannot set an explicit width on these. Setting height does not help. Any ideas please?
The HTML:
<div id="wraper">
<div class="draggable">
<p>a main road with fast-travelling traffic</p>
</div>
<div class="draggable">
<p>a very large bird, not able to fly</p>
</div>
<div class="draggable">
<p>very important</p>
</div>
<div class="draggable">
<p>a plant with white berries that feeds on trees</p>
</div>
<div class="draggable">
<p>breakfast and lunch combined in one meal</p>
</div>
<div class="draggable">
<p>a part of a room used for cooking</p>
</div>
and the CSS:
#wraper{
background: #FAFAFA;
border: 1px solid #333;
margin: 0 auto;
overflow: hidden;
padding: 20px;
width: 500px;
}
.draggable{
background: #F1F7FF;
border: 1px solid #CAE1FF;
display: inline;
float: left;
margin: 0 5px 5px 0;
padding: 3px;
position: relative;
width: auto;
height: auto;
}
.draggable p{
margin: 0;
padding: 0;
}
.draggable p {
white-space: nowrap;
}
You shouldn't need the explicit auto width/height, that's the default. You normally wouldn't use display: inline either as a float is never inline, but I guess this is a workaround for an IE bug?
Try adding white-space:nowrap; to the .draggable class.
If that fails, and you want a line break at a certain point, add clear:left; to the first instance of .draggable on each line.
BTW you could use inheritance, lose the .draggable class and div (BTW wraper = wrapper?) and just style the p tag:
#wrapper p { rules here }