I have tried to get responsive design for div boxes. But couldn't get it.
I got output like this..
When I tried to expand it, it is showing like this.
Couldn't get responsive one...
Tried with ctrl+shift+m in firefox.
Here is my code
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
.tab_list_common{
font-family: Arial;
font-size: 13px;
font-weight: bold;
color: #666666;
line-height: 1.3;
border: 1px solid #000000;
display: inline-block;
}
.com_div{
text-align: center;
width: 100%;
}
.outer{
border: 1px solid #000000;
line-height: 50px;
width: 100%;
text-align: center;
}
</style>
</head>
<body>
<div class="outer">
<div class="com_div">
<span class="tab_list_common">$1.00</span>
<span class="tab_list_common">$2.00</span>
<span class="tab_list_common">$3.00</span>
<span class="tab_list_common">$4.00</span>
</div>
</div>
</body>
</html>
You have to display them as inline-block, eliminate white spacing between them and set width to: (total width / elements).
Setting box-sizing: border-box; would include borders in width calculation.
Edit: Added spacing between divs using margin.
.tab_list_common{
font-family: Arial;
font-size: 13px;
font-weight: bold;
color: #666666;
line-height: 1.3;
border: 1px solid #000000;
display: inline-block;
width: 20%; /* total width / elements */
margin: 0 2.5%;
display: inline-block;
box-sizing: border-box;
}
.com_div{
text-align: center;
width: 100%;
}
.outer{
border: 1px solid #000000;
line-height: 50px;
width: 100%;
text-align: center;
}
<div class="outer">
<div class="com_div">
<span class="tab_list_common">$1.00</span><!--
--><span class="tab_list_common">$2.00</span><!--
--><span class="tab_list_common">$3.00</span><!--
--><span class="tab_list_common">$4.00</span>
</div>
</div>
Try this JSFiddle
This technique uses text-align:justify; on the .outer div, which applies to the the inline-block elements.
CSS
.outer {
border: 1px solid #000000;
width: 100%;
text-align:justify;
-ms-text-justify:distribute-all-lines;
text-justify:distribute-all-lines;
min-width:13em; /* add this if you don't want the divs to wrap when the screen size is reduced */
}
.com_div {
padding:.95em .95em 0em .95em;
line-height:1;
}
.tab_list_common {
font-family: Arial;
font-size: .82em;
font-weight: bold;
color: #666666;
border: 1px solid #000000;
display: inline-block;
vertical-align:top;
}
.stretch {
width:100%;
display:inline-block;
font-size:0;
line-height:0;
}
HTML
<div class="outer">
<div class="com_div">
<span class="tab_list_common">$1.00</span>
<span class="tab_list_common">$2.00</span>
<span class="tab_list_common">$3.00</span>
<span class="tab_list_common">$4.00</span>
<span class="stretch"></span>
</div>
</div>
It requires a span div at the bottom for stability, and the divs need to be on their own line, or have a space between the tags. For more useful justify centering techniques see this Stack Overflow question.
Related
I have a span inside a div tag as below
<div class="Panel">
<span class="spanClass">
This is a test </br> break added <br> second break
</span>
</div>
.Panel {
font-size: .7em;
color: Black;
font-family: Verdana, Arial, Sans-Serif;
margin: 5px 0px 5px 0px;
padding: 5px 50px 5px 50px;
border: solid 1px black;
background-color: yellow;
text-align: center;
vertical-align: middle;
height: auto;
text-align: left;
min-width:200px
width:auto;
}
.spanClass
{
background-color: red;
width:auto;
}
Demo : https://jsfiddle.net/2k0rq3q0/4/
I want the div to resize as per the text in the span and not take the width as of the parent. Is this possible?
I can set the max-width:200px; but I want it to resize as per text.
Also, If there is no text in span, is it possible to not display div? Right now and empty box is shown
Setting the .Panel to have a display:inline-block shrinks it down to the its contents. You still have padding that makes it a bit wider than the content, but you can remove that as well. Here's a fiddle.
.Panel {
font-size: .7em;
color: Black;
font-family: Verdana, Arial, Sans-Serif;
margin: 5px 0px 5px 0px;
//padding: 5px 50px 5px 50px; <- remove the padding if you truly want it flush
border: solid 1px black;
background-color: yellow;
text-align: center;
// vertical-align: middle; <- not needed, it's for inline elements and table cells
// height: auto; <- not really needed, unless it's inheriting a height elsewhere
text-align: left;
min-width:200px
// width:auto; <- not really needed, unless it's inheriting a width elsewhere
}
Please check below example. By just adding display: inline-block; will fix your issue
.Panel {
font-size: .7em;
color: Black;
font-family: Verdana, Arial, Sans-Serif;
margin: 5px 0px 5px 0px;
padding: 5px 50px 5px 50px;
border: solid 1px black;
background-color: yellow;
text-align: center;
vertical-align: middle;
height: auto;
text-align: left;
min-width:100px;
width:auto;
display: inline-block;
}
.spanClass
{
background-color: red;
width:auto;
}
<div class="Panel">
<span class="spanClass">
This is a test test test test test test test test test test </br> break added <br> second break
</span>
</div>
use override
<div class="Panel panel2">
<span class="spanClass ">
This is a test test test test test test test test test test </br> break added <br> second break
</span>
</div>
for css
.panel2{
font-size: 2em !important;
}
You can do this easily using script
$(document).ready(function(){
$('.Panel').width($('.spanClass').width());
});
fiddle here
I am working on a simple html/css web page.
What I am trying to do is having an image and a div. Both will be inline display and in div I want to put a link. But when I put a long link title it is not what I expect it to be.
My code is this-
code
<div class="heading"> featured posts
</div>
<div class="img_src">
<img style="height:120px;" src="/uploads/1.jpg"></img>
</div>
<div class="link_src">
<a class="inside_link" href="#">Link will go here but if there is a long title then it may create some problems..</a>
</div>
</div>
CSS-
.img_src{
display: inline-block;
margin-top: 3px;
margin-left:-2%;
}
.link_src{
display: inline-block;
background-color: white;
height: 120px;
line-height: 120px;
width: 61%;
margin-top: 3px;
text-transform: uppercase;
}
.inside_link{
margin-left: 2%;
margin-right: 2%;
font-size: 15px;
}
.heading{
display: block;
background-color: #000;
color: #fff;
font-family: "Roboto Condensed","HelveticaNeue-CondensedBold","Helvetica Neue",Helvetica,Arial,Geneva,sans-serif;
font-size: 20px;
margin-top:5px;
font-color:white;
margin-left:-2%;
margin-right:-2%;
text-align: center;
line-height: 40px;
height: 40px;
font-style: oblique;
text-transform: uppercase;
}
I searched on google and StackOverflow but I did not get anything useful.
I want it to look like this(DIV wraps full)-
Any suggestion?
You csn use diplay:table-cell instead of inline-block but also I made edit in html by adding div.post that contain the image and title, and remove the inline-style that gave height to the image
<div class="post">
<div class="img_src">
<img src="http://i.dailymail.co.uk/i/pix/2016/03/22/13/32738A6E00000578-3504412-image-a-6_1458654517341.jpg">
</div>
<div class="link_src">
<a class="inside_link" href="#">Link will go here but if there is a long title then it may create some problems..</a>
</div>
</div>
and in the css I give width:20%; to .img_src and width:80%; to .link_src (you can change the widths as you like) and remove height and line height from them and the diplay:table-cell will handle those height
.post{
font-size:0;
display:table;
width:100%;
}
.img_src{
display: table-cell;
vertical-align:top;
width:20%;
}
.img_src img{
width:100%;
}
.link_src{
display: table-cell;
background-color: white;
margin-top: 3px;
text-transform: uppercase;
vertical-align:middle;
width:80%;
}
.inside_link{
margin-left: 2%;
margin-right: 2%;
font-size: 15px;
}
.heading{
display: block;
background-color: #000;
color: #fff;
font-family: "Roboto Condensed","HelveticaNeue-CondensedBold","Helvetica Neue",Helvetica,Arial,Geneva,sans-serif;
font-size: 20px;
margin-top:5px;
font-color:white;
margin-left:-2%;
margin-right:-2%;
text-align: center;
line-height: 40px;
height: 40px;
font-style: oblique;
text-transform: uppercase;
}
https://jsfiddle.net/IA7medd/gg7ygdLs/17/
You can achieve that by changing the inline-block display to table-cell and then apply the vertical-align:middle; property on the text container.
That way, the text will be perfectly vertically centered if there are one, two, three lines of content.
.parent{
display: table;
border: 5px solid #ccc;
width: 100%;
}
.img_src{
display: table-cell;
}
.link_src{
display: table-cell;
vertical-align: middle;
background-color: white;
width: 61%;
text-transform: uppercase;
}
See this fiddle
Ok you are using the wrong approach. Line height is causing you the problem. Your html should look like this
<img class="img_src" style="height:120px;" src="/uploads/1.jpg">
<div class="link_src">
<div class="inner_link_src">
<div class="inner_margin">
Link will go here but if there is a long title then it may create some problems..
</div>
</div>
</div>
and your css like this
.img_src{
float:left
}
.link_src{
float:left;
position:relative;
width: 61%;
text-transform: uppercase;
background-color: white;
vertical-align: top;
display:table;
height:120px;
}
.inner_link_src{
display:table-cell;
width:100%;
height:100%;
vertical-align:middle;
margin-left:10px;
}
.inner_margin{
margin-left:10px;
}
see the jsfiddle it is working great
https://jsfiddle.net/gg7ygdLs/27/
You just change your CSS and HTML by following and then you get the desired result.
CSS:
.img_src{
display: inline-block;
margin-top: 3px;
margin-left:-2%;
}
.link_src{
display: inline-block;
background-color: white;
height: 120px;
width: 100%;
margin: 10px 0 10px 3px;
-webkit-box-shadow: 7px 0px 0px 3px rgba(204,204,204,1);
-moz-box-shadow: 7px 0px 0px 3px rgba(204,204,204,1);
box-shadow: 7px 0px 0px 3px rgba(204,204,204,1);
}
.inside_link{
margin: 2%;
display: inline-block;
position:absolute;
padding: 8px;
}
.heading{
display: block;
background-color: #000;
color: #fff;
font-family: "Roboto Condensed","HelveticaNeue-CondensedBold","Helvetica Neue",Helvetica,Arial,Geneva,sans-serif;
font-size: 20px;
margin-top:5px;
font-color:white;
margin-left:-2%;
margin-right:-2%;
text-align: center;
line-height: 40px;
height: 40px;
font-style: oblique;
text-transform: uppercase;
}
HTML:
<div class="heading"> featured posts
</div>
<div class="link_src">
<img style="height:120px;" src="http://smashinghub.com/wp-content/uploads/2011/11/Text-Shadow-Box.jpg" />
<a class="inside_link" href="#">Link will go here but if there is a long title then it may create some problems..</a>
</div>
Demo
You can simplify your code a lot by using Flexbox.
You can use it for your header as well, to center the title.
.your-header {
display: flex;
align-items: center;
justify-content: center;
}
Then the image container. Use it's more semantic and it's a block element, perfect to wrap an image with a caption or a link in your case:
<figure class="your-figure">
<img class="your-image" src="http://pipsum.com/200x150.jpg"></img>
<a class="your-link" href="#">Link will go here but if there is a long title then it may create some problems..</a>
</figure>
and the CSS
.your-figure {
display: flex;
align-items: center;
padding: 4px;
border: 1px solid #ccc;
background-color: #fff;
}
.your-image {
margin-right: 10px;
}
Have a look here for the complete code ;)
Follow this if you don't know Flexbox, might seems daunting at first, but when it clicks in your head it will change your life :) Complete guide to Flexbox
I have created 3 divs that line side-by-side on 1 row on desktop view but I would like each div to stack vertically on mobile devices only. I can't seem to figure out the correct CSS code/media query for this.
This is the HTML div code I'm using in the body of the post:
<div style="float: left; width: 30%; margin-right: 5px;">
SOURCE 1
<div style="float: left; width: 30%; margin-right: 5px;">
SOURCE 2
<div style="float: left; width: 30%; margin-right: 5px;">
SOURCE 3
Here is the full HTML code--I am embedding 3 Instagram photos.
div style="float: left; width: 30%; margin-right: 3px;">
blockquote class="instagram-media" style="background: #FFF; border: 0; border-radius: 3px; box-shadow: 0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; padding: 0; width: calc(100% - 2px);" data-instgrm-captioned="" data-instgrm-version="6">
div style="padding: 1px;">
div style="background: #F8F8F8; line-height: 0; margin-top: 40px; padding: 50.0% 0; text-align: center; width: 100%;"></div>
a style="color: #000; font-family: Arial,sans-serif; font-size: 14px; font-style: normal; font-weight: normal; line-height: 17px; text-decoration: none; word-wrap: break-word;" href="https://www.instagram.com/p/BC2kmbmhTOY/" target="_blank">#CherryBlossom #Doughnuts: Vanilla Cream Cheese Glaze w/ a #Cherry Filling, and featuring a #CherryBlossomTree design made with Chocolate (tree) and Cherry Buttercream Flowers Available Soon! March 15 to April 17.</a>
A photo posted by Astro Doughnuts (#astrodoughnuts) on <time style="font-family: Arial,sans-serif; font-size: 14px; line-height: 17px;" datetime="2016-03-12T12:17:51+00:00">Mar 12, 2016 at 4:17am PST</time>
/div></blockquote>
script src="//platform.instagram.com/en_US/embeds.js" async="" defer="defer">
/script>
/div>
div style="float: left; width: 30%; margin-right: 3px;">
blockquote class="instagram-media" style="background: #FFF; border: 0; border-radius: 3px; box-shadow: 0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; padding: 0; width: calc(100% - 2px);" data-instgrm-captioned="" data-instgrm-version="6">
div style="padding: 1px;">
div style="background: #F8F8F8; line-height: 0; margin-top: 40px; padding: 50.0% 0; text-align: center; width: 100%;"></div>
a style="color: #000; font-family: Arial,sans-serif; font-size: 14px; font-style: normal; font-weight: normal; line-height: 17px; text-decoration: none; word-wrap: break-word;" href="https://www.instagram.com/p/BCq4otrp-ZW/" target="_blank">Spring truly arrives when flowers start blooming, and our #CherryBlossom macaron has certainly begun showing its petals! Sweet and subtle, it's the perfect spring bite. #oliviamacaron #frenchmacarons #springtime #GeorgetownDC #ShopTysons #DCeats</a>
A photo posted by Olivia Macaron (#oliviamacaron) on <time style="font-family: Arial,sans-serif; font-size: 14px; line-height: 17px;" datetime="2016-03-07T23:22:02+00:00">Mar 7, 2016 at 3:22pm PST</time>
/div>
/blockquote>
script src="//platform.instagram.com/en_US/embeds.js" async="" defer="defer">
/script>
/div>
div style="float: left; width: 30%; margin-left: 3x;">
blockquote class="instagram-media" style="background: #FFF; border: 0; border-radius: 3px; box-shadow: 0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; padding: 0; width: calc(100% - 2px);" data-instgrm-captioned="" data-instgrm-version="6">
div style="padding: 1px;">
div style="background: #F8F8F8; line-height: 0; margin-top: 40px; padding: 50.0% 0; text-align: center; width: 100%;"></div>
a style="color: #000; font-family: Arial,sans-serif; font-size: 14px; font-style: normal; font-weight: normal; line-height: 17px; text-decoration: none; word-wrap: break-word;" href="https://www.instagram.com/p/BDJCBpnAi8f/" target="_blank">🌸💕 Happy Saturday! 💕🌸</a>
A photo posted by Georgetown Cupcake (#georgetowncupcake) on <time style="font-family: Arial,sans-serif; font-size: 14px; line-height: 17px;" datetime="2016-03-19T16:21:18+00:00">Mar 19, 2016 at 9:21am PDT</time>
/div>
/blockquote>
script src="//platform.instagram.com/en_US/embeds.js" async="" defer="defer">
/script>
/div>
div style="clear: both; height: 1em;"></div>
You need to use media queries in your css to produce responsive layouts. It can't be done using inline styles.
At a minimum, and from a mobile first approach:
<div>
SOURCE 1
</div>
<div>
SOURCE 2
</div>
<div>
SOURCE 3
</div>
<style>
#media(min-width:768px){
div {
float:left;
width:30%;
margin-right:5px;
}
}
</style>
Here you have three stacked, full width divs. Once the browser or device is equal to or beyond the defined breakpoint of 768px, the new css takes effect to produce three side-by-side divs as defined in the css.
See example. You should use percentage dimensions
.col{
height: 100px;
background-color: red;
margin-bottom: 10px;
}
#media (min-width: 960px){
.col{
float:left;
width: 30%
margin-left: 10%;
}
.col:last-child{
margin-left: 0%;
}
}
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
.block{ text-align: center; width:30%; margin:0px; padding:50px 0; float:left;}
#media only screen and (max-width: 767px) {
.block{ width:100%;}
}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<div class="block" style=" background: #f00;">
SOURCE 1
</div>
<div class="block" style=" background: #ccc;">
SOURCE 2
</div>
<div class="block" style=" background: #444;">
SOURCE 3
</div>
Please check hope so this will help full for you
There is different options to do that, but both use media queries.
You can either put each div on display: inline-block on desktop and change them to display: block on mobile. Maybe set a width: 33% for each div (otherwise if your div are too long they won't be side by side).
Or the other solution:
Put your parent element on display: flex on desktop and put it back on display: block on mobile.
.sub { background-color: rgba(200,200,200,0.6); box-sizing: border-box; border-right: 1px solid black; padding: 5px; }
.first { display: flex; }
.first .sub { width: 33.3%; }
.second { display: block; margin-top: 20px; }
.second .sub { width: 100%; }
/* media queries for mobile */
#media (min-width: 320px) and (max-width: 480px) {
.first { display: block; }
.first .sub { width: 100%; }
}
<div class="first">
<div class="sub">One</div>
<div class="sub">Two</div>
<div class="sub">Three</div>
</div>
<div class="second">
<div class="sub">One</div>
<div class="sub">Two</div>
<div class="sub">Three</div>
</div>
use <li> instead of <div>, then use display:inline-block; or display:block;
im trying to create a website, but im having trouble with 2 parts;
1. I am unable to vertically align the Website title vertically so that its is in the middle of the div.
2. Im trying to left align the menu table with the header div right above it and make it stay as such for all browser types.
I have tried to do different things to get both the above to work, but nothing seems to work and am unable to align either of the elements. Could someone help me please.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Game Portal</title>
<style>
body{
background-color: black;
}
h1.header{
font-family: "Trebuchet MS", Arial, sans-serif;
font-weight: bold;
font-size: 30px;
color: #fff;
text-transform: uppercase;
}
#headerdiv{
margin: 0px auto;
border: 1px solid red;
width: 70%;
height: 100px;
padding-top:30px;
}
th, td {
padding: 15px;
table-layout: fixed;
width: 180px;
height: 75px;
padding: 0px;
border-right-style: solid;
border-left-style: solid;
border-width: 1px;
border-color: #808080;
border-collapse: collapse;
}
td {
text-align: center;
font-family:"Times New Roman", Helvetica, sans-serif;
font-size: 15pt;
border-radius:5px
height: 100px;
}
a{
color: #808080;
}
#titleSize{
font-size: 25px;
}
#nav {
line-height:30px;
background-color:#4D4D4D;
height:80px;
width:100%;
}
</style>
</head>
<body>
<div id="headerdiv">
<h1 class="header">game<span id="titleSize">portal</span></h1>
</div>
<div id="nav">
<table style="background-color: #4D4D4D; padding-left: 15%;">
<tr>
<td>Home</td>
<td>Games</td>
<td>News</td>
<td>Contact Us</td>
</tr>
<table>
</div>
</body>
</html>
I have tried messing with the positions (abs, fixed, relative) as well as with the margins, but nothing seems to move either of the elements. Thanks in advance.
One way to do it is through padding:
#headerdiv{
width: 200px;
margin:0px auto;
border: 1px solid red;
width: 70%;
height: 70px;
padding-top:30px;
}
Here height has been changed and the rest to 100 has been added to padding-top
There are many ways to do that, example:
http://jsfiddle.net/ovLhjmwb/
For example: Is more easy to have a container that contains all the child elements (and give it a width)
.container {
width: 400px;
margin: auto;
}
Also, vertical aligned text, is a little difficult to do, the easiest way is to use the vertical-align property (that comes with table elements)
#headerdiv table{
vertical-align: middle;
height: 100%;
width: 100%;
}
So I guess there are some more probs. For example use more HTML5 tags and not so many of ID's or classes. Keep your DOM-tree as simple as possible. You will get a better structure and your xode is more readable. BTW I fixed your problems in my solution as well.
HTML:
<header>
<h1>Game<span>Portal</span></h1>
</header>
<nav>
<ul>
<li>Home</li>
<li>Games</li>
<li>News</li>
<li>Contact Us</li>
</ul>
</nav>
CSS:
body{
background: black;
}
header {
width: 70%;
display: block;
margin: 0 auto;
height: 100px;
border: 1px solid red;
}
header h1 {
font-family: "Trebuchet MS", Arial, sans-serif;
font-weight: bold;
font-size: 30px;
line-height: 30px;
color: white;
text-transform: uppercase;
padding-top:13px;
}
header h1 span {
font-size: 25px;
}
nav {
width:70%;
margin:0 auto;
text-align:left;
height: 100px;
background: #4D4D4D;
}
nav ul {
margin-left:-40px;
}
nav ul li {
float:left;
list-style-type:none;
}
nav ul li a{
color: #808080;
height: 62px;
padding:38px 20px 0 20px;
border-left:1px solid #808080;
display: block;
font-size: 15pt;
}
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>