Here is the CSS/HTML file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="Workbook-S-140.css" rel="stylesheet" type="text/css" />
<title>CONGREGATION NAME Midweek Meeting Schedule</title>
<style type="text/css">
table {
border-collapse: collapse;
table-layout: fixed;
width: 100%;
}
table th, td {
/* Comment out the following line if you do not want borders */
border: 1px #d3d3d3 solid;
/* This is the default font for all cells */font-family: Calibri;
}
body {
width: 100%;
margin-left: 0;
margin-right: 0;
background: #666;
}
.containerPage {
min-width: 210mm;
max-width: 210mm;
padding-left: 2mm;
padding-right: 2mm;
margin-left: auto;
margin-right: auto;
background: #FFF;
}
.containerMeeting {
margin-bottom: 5mm;
}
.floatRight {
color: gray;
padding-top: 1mm;
padding-bottom: 1mm;
padding-right: 2mm;
float: right;
text-align: right;
font-size: 8pt;
font-weight: 700;
text-transform: none;
}
.borderHEADINGOuter {
border-bottom: 1px gray solid;
margin-bottom: 5mm;
}
.borderHEADINGInner {
border-bottom: 4px gray solid;
margin-bottom: 2px;
}
.tableHEADING {
width: 100%;
border: none;
}
.tableHEADING td {
border: none;
}
.textCongregation {
vertical-align: bottom;
text-align: left;
font-size: 11pt;
font-weight: 700;
text-transform: uppercase;
}
.textTitle {
vertical-align: bottom;
text-align: right;
font-size: 18pt;
font-weight: 700;
}
</style>
</head>
<body>
<div class="containerPage">
<div class="containerMeeting">
<div class="borderHEADINGOuter">
<div class="borderHEADINGInner">
<table class="tableHEADING">
<colgroup>
<col width="50%" /><col width="50%" />
</colgroup>
<tr>
<td class="textCongregation">CONGREGATION NAME</td>
<td class="textTitle">Midweek Meeting Schedule</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
This is the jiggle:
https://jsfiddle.net/mL9j6zgz/
All is good. But, if I change the dir attribute to rtl and and lang attribute to ar, the layout is wrong. The two div objects are swapped correctly, but the text alignments are now wrong. They need to be reversed.
I know I can create two new CSS classes for RTL, and use the opposite text alignment, but is there anyway that the browser can manage this? I assumed it would swap alignments. Am I making sense?
In English:
<CONGREGATION NAME MIDWEEK MEETING SCHEDULE>
In Arabic:
<MIDWEEK MEETING SCHEDULE CONGREGATION NAME>
Arabic HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="rtl" lang="ar" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="unsaved:///Workbook-S-140.css" rel="stylesheet" type="text/css" />
<title>CONGREGATION NAME Midweek Meeting Schedule</title>
<style type="text/css">
table {
border-collapse: collapse;
table-layout: fixed;
width: 100%;
}
table th, td {
/* Comment out the following line if you do not want borders */
border: 1px #d3d3d3 solid;
/* This is the default font for all cells */font-family: Calibri;
}
body {
width: 100%;
margin-left: 0;
margin-right: 0;
background: #666;
}
.containerPage {
min-width: 210mm;
max-width: 210mm;
padding-left: 2mm;
padding-right: 2mm;
margin-left: auto;
margin-right: auto;
background: #FFF;
}
.containerMeeting {
margin-bottom: 5mm;
}
.floatRight {
color: gray;
padding-top: 1mm;
padding-bottom: 1mm;
padding-right: 2mm;
float: right;
text-align: right;
font-size: 8pt;
font-weight: 700;
text-transform: none;
}
.borderHEADINGOuter {
border-bottom: 1px gray solid;
margin-bottom: 5mm;
}
.borderHEADINGInner {
border-bottom: 4px gray solid;
margin-bottom: 2px;
}
.tableHEADING {
width: 100%;
border: none;
}
.tableHEADING td {
border: none;
}
.textCongregation {
vertical-align: bottom;
text-align: left;
font-size: 11pt;
font-weight: 700;
text-transform: uppercase;
}
.textTitle {
vertical-align: bottom;
text-align: right;
font-size: 18pt;
font-weight: 700;
}
</style>
</head>
<body>
<div class="containerPage">
<div class="containerMeeting">
<div class="borderHEADINGOuter">
<div class="borderHEADINGInner">
<table class="tableHEADING">
<colgroup>
<col width="50%" /><col width="50%" />
</colgroup>
<tr>
<td class="textCongregation">اسم الجماعة</td>
<td class="textTitle">برنامج اجتماع وسط الاسبوع</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
According with the comments we are talking in the main post, you can target with attribute selector and swap the text direction:
[dir="rtl"] .textCongregation{ text-align: right; }
[dir="rtl"] .textTitle { text-align: left; }
Learn more about attribute selector:
https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
A possibly better option
The :dir() pseudo-class selector may be preferable if the rtl is only defined on a parent element and not on a child element. See https://developer.mozilla.org/en-US/docs/Web/CSS/:dir
You can see this in action at this jsfiddle where the body has dir attribute set to rtl but the child does not.
https://jsfiddle.net/ua8ksr1z/
Advances in flow-relative CSS properties and values make this much easier.
.textCongregation {
text-align: start;
}
The following properties and values are well supported at this time across modern browsers. In parentheses are the older, commonly used LTR terms.
inset-inline-start (in place of left property)
inset-inline-end (in place of right property)
margin-inline-start (in place of margin-left property)
margin-inline-end (in place of margin-right property)
margin-inline (in place of margin shorthand property)
padding-inline-start (in place of padding-left property)
padding-inline-end (in place of padding-right property)
padding-inline (in place of padding shorthand property)
text-align: start; (in place of left value)
text-align: end; (in place of right value)
These values currently only work in Firefox:
float: inline-start; (in place of left value)
float: inline-end; (in place of right value)
Related
My font doesn't seem to work, what am I doing wrong?
I added the google font in the head.
Its below meta.
I also added the CSS code.
I hope someone can help me.
html {
height: 100%;
}
body {
margin: 0px;
height: 100%;
}
h1 { text-align: center; }
.hoofdtabel {
width: 100%;
height: 100%;
margin: 0px;
border-collapse: collapse;
} /* Vervangt cellspacing="0" */
.kop {
width: 100%;
height: 10%;
background-color: #5570aa;
text-align: center;
font-size: 72px;
}
.menu {
width: 12%;
height: 70%;
padding: 5px; /* Vervangt cellpadding="5" */
background-color: #9e6171;
vertical-align: top;
}
.inhoud {
width: 96%;
height: 85%;
padding: 5px;
text-align: left;
background-color: #b8c6c4;
vertical-align: top;
}
.onder {
width: 100%;
height: 5%;
padding: 5px;
background-color: black;
vertical-align: middle;
text-align: right;
color: white;
}
.button {
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
transition-duration: 0.4s;
cursor: pointer;
background-color: #e9ece5;
color: black;
border: 2px solid #b3c2bf;
width: 100px;
}
.button:hover {
background-color: #008CBA;
}
.frame {
height: 100%;
width: 100%;
border: none;
<!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=iso-8859-1" />
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
<title>Hi</title>
</head>
<body>
<div class="Hi">
<h1>Hi</h1>
<font size="4" >
<p>Hello all<br>
</font>
</div>
</body>
</html>
You just loaded the font, but forgot to tell which element should use it.
Example to use it on all paragraphs (in CSS file):
p {
font-family: "Source Sans Pro", sans-serif;
}
UPDATE:
I think your code should look something like this:
style.css:
html {
height: 100%;
}
body {
margin: 0px;
height: 100%;
}
h1 { text-align: center; }
p {
font-family: "Source Sans Pro", sans-serif;
}
... and the rest of the file, which you posted
index.html:
<!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=iso-8859-1" />
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<title>Hi</title>
</head>
<body>
<div class="Hi">
<h1>Hi</h1>
<font size="4">
<p>Hello all<br><p>
</font>
</div>
</body>
</html>
After this, the Hello all text should use the Source Sans Pro font.
In addition, you forgot to link your CSS file in the HTML document (same method as you link the google font). See in my example below the google font.
I cannot figure out how to remove the scrollbar from this website. It is clearly not necessary. I have the page loaded on a 21" monitor and still see it..
http://akrush95.freeoda.com/clash/
Here is the html from my index.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>Untitled Document</title>
<style type="text/css">
body,html{
height:100%;
margin: 0px;
padding: 0px;
}
#title {
padding-top: 20px;
font-size: 36px;
}
#title #RHS {
font-size: 40px;
font-weight: bold;
}
.scoreboard {
text-align: center;
}
.scores {
font-size: 36px;
}
.score-title {
font-size: 18px;
text-decoration: underline;
}
#content {
text-align: center;
min-width: 250px;
}
#eventcontainer {
padding: 10px;
float: right;
background-color: #999;
width: 200px;
min-height: 100%;
}
#eventboard #eventcontainer h1 {
text-align: center;
text-decoration: underline;
}
.sb {
display: inline-block;
width: 135px;
border: thin double #000;
margin: 10px;
}
.sb #title {
font-size: 22px;
text-decoration: underline;
font-weight: bold;
padding-top: 5px;
}
.sb #score {
font-size: 40px;
font-family: "Lucida Console", Monaco, monospace;
padding: 5px;
}
#add {
cursor: pointer;
font-size: 18px;
}
#sub {
cursor: pointer;
font-size: 18px;
}
</style>
</head>
<body>
<div id="eventcontainer">
<h1>Event Board</h1>
<p>25 January 2013<br />
-Event 1<br />
-Event 2
</p>
<p>26 January 2013<br />
-Event 3<br />
-Event 9</p>
<p>31 January 2013<br />
-Event
</p>
</div>
<div id="content">
<div id="title">
<div id="RHS">Roslyn High School</div>
<div id="CotC">Clash of the Classes</div>
<div id="year">2013</div>
</div>
<br/>
<div id="scores">Loading...</div>
</div>
</body>
</html>
Is there anything in there making it extend past 100%? I tried making the height 100% but that doesn't seem to work..
If I don't make the body height 100%, my right column won't extend all the way down.
You have a height of 100%, and a padding of 10px at the top and 10px at the bottom. Padding is added to height, not included in it. So the total height of #eventcontainer is 100%+10px+10px, i.e. 20px more height than its container.
You have three options:
Take the vertical padding off the #eventcontainer element.
Add overflow: hidden to the body element. However this is not recommended because on a smaller screen, the user will not have any way to scroll to see all the content.
As mentioned in the comment below with link, you can change the box sizing model you are using.
I'd like to have the white background cover content of the page but for some reason it only ends at the navigation menu/#main_content_top. How can I fix this?
HTML Look/Image:
http://img687.imageshack.us/img687/8461/croppercapture12.th.jpg
HTML Code:
<!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>
<title>Untitled Page</title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#Text1
{
width: 77px;
}
#Text2
{
width: 78px;
}
body {
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="container">
<div id="header"><h1>
<img alt="" src="images/tempBanner.jpg" style="width: 747px; height: 75px" /></h1></div>
<div id="sub_header">Facility Booking Registration</div>
<div id="main_content_top">Home | Book a Facility | <a href ="FindBooking.htm" >Find/Delete a
booking</a></div>
<div id="main_content">
<div class="content">
<p class="title">Public Service Announcements</p>
<h2>Vesak Day</h2>
<p>Vesak Day, a public holiday, will fall on 1/5/2011, please note the school will
be closed and no bookings will be allowed on this day.</p>
<h2>Labour Day</h2>
<p>Labour Day, a public holiday, will fall on 1/5/2011, please note the school will
be closed and no bookings will be allowed on this day.</p>
</div>
<div class="menu">
<div class="menu_title">Login</div>
<div>Username:
<input id="Text1" type="text" />
<br />
Password:
<input id="Text2" type="text" />
<br />
<br />
<input id="Button1" type="button" value="Sign In" />
</div>
</div>
</div>
<div id="clear"></div>
</div>
</body>
CSS style sheet:
body {
background: #CACACA url(images/background.png) repeat-x;
font-family: "Trebuchet MS", Verdana, serif, Arial
}
#container {
margin: 0 auto;
width: 750px
}
#header {
width: 100%;
height: 33px;
}
#sub_header {
text-align: right;
font-weight: bold;
font-size: 20px;
color: #FFFFFF;
padding-right: 20px;
padding-bottom: 20px;
}
#main_content {
margin: 0 auto;
width: 100%;
background: #FFFFFF url('images/background_content.gif');
background-repeat: repeat-y;
}
#main_content_top {
height: 30px;
background: #FFFFFF url('images/background_top.gif');
}
#main_content_bottom {
height: 30px;
background: #FFFFFF url('images/background_bottom.gif');
}
.content {
float: left;
width: 510px;
text-align: justify;
padding: 0 30px 0 30px;
font-size: 14px
}
.menu {
width: 139px;
float: right;
padding: 0 20px 0 20px;
border-left: #8C8484 1px solid;
font-size: 12px
}
.menu ul {
margin: 0;
padding: 10px 0 10px 15px
}
.menu il {
list-style-type: disc
}
#header h1 {
margin-bottom: 0px;
font-size: 28px;
font-weight: bold;
color: #A40008
}
.content h2 {
margin-top: 0px;
font-size: 20px;
font-weight: bold;
color: #A40008
}
.menu_title {
font-size: 18px;
font-weight: bold
}
#clear {
display: block;
clear: both;
width: 100%;
height:1px;
overflow:hidden;
}
a {
color: #A40008;
font-weight: bold;
text-decoration: none
}
a:hover {
color: #A40008;
font-weight: bold;
text-decoration: underline
}
.title {
margin: 20px;
text-align: center;
font-weight: bold;
font-style: italic;
height: 18px;
}
.highlight
{
font-weight:bold
}
.update
{
font-weight:bold;
color:Green
}
.confirm
{
font-weight:bold;
color:Red
}
table
{
border-style : dashed
}
Try adding overflow:auto to #main_content.
If i understand correctly, you want to set the background of the body white? If that is your requirement, within the body CSS, remove or comment out the background style.
You have to make it overflow hidden or float left and width..........
I've got a Silverlight applet whose UI consists of nothing more than a single button, which I'm trying to located in an appropriate position on my web page. My current result looks like this:
The blue element circled in red is where I want the button to be, and as the Firebug highlight shows, it's where the <div> tag containing the Silverlight <object> tag is positioned. However, the object itself (the "Click Me" button circled in green) is about 200 or so pixels lower.
My CSS is kinda complex (not unexpectedly, what I'm trying to do is a lot more complex than what I can show here), but for the record, it's here, reasonably simplified:
<!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 id="Head1" runat="server">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Engagement Test Page</title>
<style type="text/css">
div.alantaHost
{
display: block;
position: relative;
}
div.alantaEngageHost
{
}
div.alantaEngageAppHost
{
position: relative;
}
div.alantaEngageHost_Button
{
height: 26px;
width: 140px;
}
button.alantaEngageButton
{
position: relative;
cursor: pointer;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: large;
}
div.alantaEngageAppHost_Button
{
height: 26px;
width: 140px;
}
/* Override */
div.alantaHost_PictureButton
{
width: 220px;
border: 1px solid #a7a7a7;
color: rgb(0, 0, 0);
background-color: #fff;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
box-shadow: 8px 8px 11px #888;
border-radius: 8px;
}
/* Override */
div.alantaEngageHost_PictureButton
{
}
div.alantaHeader
{
width: 220px;
height: 18px;
text-align: center;
font-weight: bold;
font-size: 16px;
margin-top: 4px;
}
div.alantaTitle
{
margin-left: 10px;
float: left;
}
div.alantaContact
{
width: 200px;
height: 200px;
margin: 0px 0px 0px 4px;
padding: 5px;
background-color: rgb(255, 255, 255);
text-align: left;
font-weight: bold;
}
img.alantaContactImage
{
height: 200px;
width: 200px;
}
div.alantaStartChat
{
width: 210px;
height: 30px;
margin: 0px 4px;
}
button.alantaStartChatButton
{
position: relative;
cursor: pointer;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: large;
}
div.alantaHost_Ad
{
width: 300px;
height: 250px;
}
div.alantaContact_Ad
{
width: 200px;
height: 200px;
float: left;
}
div.alantaStartChat_Ad
{
width: 75px;
height: 60px;
float: right;
}
div.alantaAdMessage
{
width: 80px;
float: right;
text-align: left;
margin-top: 10px;
}
div.alantaEngageAppHost_Ad
{
height: 60px;
width: 70px;
}
</style>
</head>
<body>
<div id="host">
<div class="alantaHost alantaHost_PictureButton alantaHost_Ad">
<div style="display: block;" class="alantaEngageHost alantaEngageHost_PictureButton">
<div class="alantaHeader">
<div class="alantaTitle">
Ken Smith</div>
</div>
<div class="alantaContact alantaContact_Ad">
<img class="alantaContactImage" src="http://graph.facebook.com/739004749/picture?type=large"
alt="Photo"></div>
<div class="alantaStartChat alantaStartChat_Ad" align="center">
<button style="display: none;" class="alantaEngageButton">
Talk to Ken</button></div>
<div class="alantaAdMessage">
I'm looking forward to talking with you!</div>
</div>
<div style="top: 2px; left: 224px;" class="alantaEngageAppHost alantaEngageAppHost_Button alantaEngageAppHost_Ad">
<object type="application/x-silverlight" data="data:application/x-silverlight," id="objMyApp"
height="100%" width="100%">
<param name="source" value="http://app.dev.alanta.com/ClientBin/SilverlightButton.xap">
</object>
</div>
</div>
</div>
</body>
</html>
Any suggestions about why the Silverlight object isn't following its containing tag? (I should note that it behaves the same way in IE and in Chrome, so it's not a browser bug.)
I think that the offsets in your xaml are pushing the button to that location. If your root element is a canvas I would change that to a stackpanel and see if that fixes it.
I still don't understand all the details about what was tripping it up, but it may have had something to do with the fact that I wasn't setting the height of the alantaEngageHost. I changed the alantaEngageHost_Ad style to this:
div.alantaEngageHost_PictureButton
{
height: 250px;
}
And after that, the <button> and its containing <div> tag were in the same place; and I could then place them appropriately like so:
<div style="top: -226px; left: 224px;" class="alantaEngageAppHost alantaEngageAppHost_Button alantaEngageAppHost_Ad">
<button style="position:relative">HTML Button</button>
</div>
I'm guessing that there must be some weird CSS interaction that shows up when you're trying to position elements inside a <div> tag that isn't quite big enough to contain them. Just a guess, as CSS remains a dark and sorcerous art to me.
I need some assistance and I've tried almost everything I know. What I am trying to do (and it doesn't matter if I have to use tables on order to achieve this)
http:// img602.imageshack.us/img602/8769/verticalcentering .jpg
I've looked online and tried out several examples but they all seem to blow up or not align properly in IE.
What I need (if its possible, I don't even know anymore) is to have text links that will align vertically within the container its in regardless of whether there is only one link present, or four.
What's been happening is that when I set the margin to 50% it centers fine if there is only one link there, but the remainder will fall below it no longer centering the links within the container.
The actual thing I am working on is this:
I have a header title above that stretches across the container. The next row I have an image on the left that is 150px by 150px - and next to that I have another container that has a height of 150px as well as this is the maximum height of this container - inside this container is where I would like my links to hang out vertically centered.
Is this even possible? or is it a pipe dream to think it will work in IE and is cross browser compliant?
It doesn't matter anymore if I have to resort to tables and css to achieve this... I just need some assistance with it as I have never had to vertically center anything depending on its content before and I just can't wrap my head around how to achieve this effect.
Any help would be greatly appreciated :) Thanks in advance!
HERE IS THE CSS AND HTML BELOW
<!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>Link Module</title>
<style type="text/css">
<!--
.wrapper { height: 210px; width: 538px; background-color: #FFCCFF; }
.header { height: 47px; border-bottom: thin dotted #666; }
.txt-style {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
line-height: normal;
font-weight: bold;
color: #666666;
text-decoration: none;
text-align: left;
vertical-align: middle;
white-space: normal;
display: block;
}
.cos-sl-txt-cntr-two {
height: 150px;
}
.cos-sl-txt-cntr-two ul {
height: 150px;
margin-top: auto;
margin-bottom: auto;
}
.cos-sl-txt-cntr-two li {
margin-top: 50%;
margin-bottom: auto;
}
cos-sl-img-two {
width: 150px;
height: 150px;
background-color: #FF0033;
}
.learn-txt, .leader-txt {
color: #FF6666;
font-family: "Arial", Helvetica, sans-serif;
text-transform: uppercase;
font-size: 12px;
margin: 0;
padding-top: 2px;
padding-left: 10px;
letter-spacing: .75px;
}
.leader-txt {
color: #fff;
font-size: 23px;
font-weight: bold;
padding-top: 0px;
line-height: 24px;
letter-spacing: -0.25px;
}
.img-ctnr, .img-ctnr-two {
width: 150px;
height: 150px;
float: left;
padding-left: 12px;
}
/* IMAGE LOCATION */
.img-two {
width: 150px;
height: 150px;
display: block;
background-color: #FF99CC;
border: solid 3px #CCC;
}
.txt-cntr, .txt-cntr-two {
width: 406px;
height: 126px;
float: left;
}
.txt-cntr-two {
width: 250px;
height: 150px;
padding-left: 50px;
background-color:#CC99CC;
}
.txt-pos {
float: left;
width: 100px;
height: 50px;
padding-left: 20px;
}
/* NAME TEXT/TITLE TEXT */
.name-txt, .info-txt, .name-txt-title, .info-txt-link {
font-family: "Arial", Helvetica, sans-serif;
font-size: 13px;
color: #003466;
margin: 0;
padding-top: 18px;
padding-left: 13px;
}
.sl-name-txt-title {
color: #666;
font-size: 10px;
font-weight: bold;
}
/* INFO TEXT/TEXT LINK OVER-RIDE */
.info-txt, .info-txt-link {
padding-top: 0;
color: #333;
font-size: 12px;
line-height: 1.1;
}
.info-txt-link a {
color: #003466;
text-decoration: none;
}
/* Hover State for the web links */
.info-txt-link a:hover {
color: #ED1B24;
text-decoration: none;
}
-->
</style>
</head>
<body>
<div class="wrapper">
<!--CONTAINER HOLDING THE HEADER ELEMENTS-->
<div class="header">
<p class="learn-txt">Title</p>
<p class="leader-txt">Subtitle</p>
</div>
<div class="img-ctnr-two">
<div class="img-two">
</div>
</div>
<div class="txt-pos">
<p class="name-txt-title">Canada</p>
<p class="info-txt-link">www.mylinkhere.com</p>
</div>
</div>
</body>
</html>
.outer {
border: 1px solid red;
line-height: 5em;
}
.outer .inner {
display: inline-block;
vertical-align: middle;
line-height: 1.2em;
}
<div class="outer">
<div class="inner">
ABC
</div>
</div>
<div class="outer">
<div class="inner">
ABC<br>ABC
</div>
</div>
<div class="outer">
<div class="inner">
ABC<br>ABC<br>ABC
</div>
</div>