CSS question -- center inside a div using percentages

Good morning. Next silly question. =) I have two CSS problems at the moment; I've been struggling with these for a while.

1) I want to form a square DIV and center the text inside it -- using percentages rather than ems or px -- but the text does not quite want to center; the text looks shifted to the right?

2) And then, I would like the text and background image to scale when I scale the browser window -- shrink when the window gets smaller.

It's been a while since I did PSD to HTML and I am struggling a little.

What am I missing? Thank you very much for any advice.

Eric

Test page: http://www.cep-dc.org/test.cfm

The CSS:

.fpbluebox_latest {
background: ‪#‎98dafc‬ url(/img/CEP-latest-icon-fp.png) 50% 23% no-repeat;
width:20%;
height:20%;
padding:3.0em;
}

.fpbluebox_latest p {
color:‪#‎40535c‬;
font:normal 120% 'Open Sans', 'Oswald', sans-serif;
text-transform:uppercase;
text-align:center;
position: relative;
top: 2.6em;
border:1px solid #000;
}
LVL 3
Eric BourlandAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Slick812Commented:
I looked at your page and the css you have, and I do not understand your "Idea" or what you hope this blue square to be presented in a certain way, you have this -  padding:  3.0em;  - which prevents the <p> from even containing the  text "latest publications", so it goes outside of the <p> borders?
I am trying to imagine an effective display with the background image and the bordered <p> and the very large text "latest publications", but I can not "Get" what you may want to show? ? ?

You might try this, to see what it looks like to you?
.fpbluebox_latest {
background: ‪#‎98dafc‬ url(/img/CEP-latest-icon-fp.png) 50% 23% no-repeat;
width:20%; /* I do not understand the percent for width? */
height:20%;
text-align:center;
}

.fpbluebox_latest p {
display: inline-box;
color:‪#‎40535c‬;
font:normal 120% 'Open Sans', 'Oswald', sans-serif;
text-transform:uppercase;
position: relative;
top: 2.6em;
border:1px solid #000;
margin: 0;
} 

Open in new window


It is difficult to get the text size to change as a variation (percentage) of the width, as using vw or other is not well supported.
Marco GasiFreelancerCommented:
About the flexible text size, it is not supported natively by css: we can't use percentage and expect the text size change when you resize browser windows (or in mobiles). But you can take a look at this: http://fittextjs.com/. Maybe it can help
Marco GasiFreelancerCommented:
Otherwise you have to use media queries to set the text size for each screen size range.
Your Guide to Achieving IT Business Success

The IT Service Excellence Tool Kit has best practices to keep your clients happy and business booming. Inside, you’ll find everything you need to increase client satisfaction and retention, become more competitive, and increase your overall success.

Eric BourlandAuthor Commented:
Dear Slick and Marco, thank you very much for these helpful replies -- this is very useful context. I am going to tackle the problem again today and will let you know what I find. Wishing you both a great day. best from Eric
Eric BourlandAuthor Commented:
Dear Slick and Marco,

Good morning, friends. OK, I am making progress, but I am still struggling with those blue boxes, and could use your wise advice. =)

I am building the design shown in the attached JPG. Some notes:

* I need the width:20% on the blue boxes, or else the blue boxes stretch across the full 960px viewport. Unless you have a better solution for me? =)

* I am still struggling with the position of the text inside the blue boxes. I need the text to hover near the bottom / lower area of each blue box. As you can see below, I am working with transform: translateY(60%); but that does not quite give me what the design prescribes.

* I left a solid 1px border on objects so we can see what we are looking at; I hope this is helpful.

I need help most with:

1) getting the text to position perfectly inside the blue boxes at the bottom
2) getting the four boxes to clear to the right .... somehow, this is not working for me with clear:right?

Thank you again for your patient help. I attach a screenshot, and the CSS.

best from Eric

/* This box contains the four blue boxes */
.CEP_National_Local_State_Levels      {
clear:both;
background-color: #fff;
border:1px solid #000;
}


/* Next, the four blue boxes */

/* Latest Publications */
.fpbluebox_latest      {
background: #98dafc url(/img/CEP-latest-icon-fp.png) 50% 23% no-repeat;
width:20%;
height:11.0em;
}

.fpbluebox_latest p      {
color:#40535c;
font:normal 100% 'Open Sans', 'Oswald', sans-serif;
text-transform:uppercase;
text-align:center;
border:1px solid #000;
position: relative;
top:60%;
transform: translateY(60%);
}

/* Publications Database */
.fpbluebox_database      {
background: #98dafc url(/img/CEP-latest-icon-fp.png) 50% 23% no-repeat;
width:20%;
height:11.0em;
}

.fpbluebox_database p      {
color:#40535c;
font:normal 100% 'Open Sans', 'Oswald', sans-serif;
text-transform:uppercase;
text-align:center;
border:1px solid #000;
position: relative;
top:60%;
transform: translateY(60%);
}

/* News, Views */
.fpbluebox_news      {
background: #98dafc url(/img/CEP-latest-icon-fp.png) 50% 23% no-repeat;
width:20%;
height:11.0em;
}

.fpbluebox_news p      {
color:#40535c;
font:normal 100% 'Open Sans', 'Oswald', sans-serif;
text-transform:uppercase;
text-align:center;
border:1px solid #000;
position: relative;
top:60%;
transform: translateY(60%);
}

/* GWU brading */
.fpbluebox_gwu      {
background: #98dafc url(/img/CEP-latest-icon-fp.png) 50% 23% no-repeat;
width:20%;
height:11.0em;
}

.fpbluebox_gwu p      {
color:#40535c;
font:normal 100% 'Open Sans', 'Oswald', sans-serif;
text-transform:uppercase;
text-align:center;
border:1px solid #000;
position: relative;
top:60%;
transform: translateY(60%);
}
Slick812Commented:
I do not really get what you are trying to do with the set up of your "Sizing" of the fpbluebox, , and the very different Length of TEXT in the various <p> elements, you can not hope to size one fpbluebox for one amount of text, and do the same size box for another amount of text? Here is some CSS and HTML that is the best concept I can come up with, I literally have to have the box height change with the amount of text in the <p>, especially with the amount of text in -
    "gwu graduate school of education and human development"
ther's no way I can have the boxes as same height and cram all of that text in them.
Here is my tested set-up -
<!doctype html><html lang="en"><head><meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<title>Blue Boxes</title> 

<style>
body {background-color: #fff; height: 100%;}

.testContainer {
max-width: 1100px;
margin: 0 auto;
border:1px solid #0a0;
padding: 1px;
}

.CEP_National_Local_State_Levels {
background-color: #fff;
border:1px solid #000;
text-align: center;
}

.fpbluebox	{
display:inline-block;
position: relative;
vertical-align: top;
background: #98dafc url(http://www.cep-dc.org/img/CEP-latest-icon-fp.png) 50% 18px no-repeat;
margin: 4px 1.2%;
width:21%;
/* height:12.0em; */
}

.fpbluebox p	{
color:#40535c;
font-family: 'Open Sans', 'Oswald', sans-serif;
text-transform:uppercase;
border:1px solid #b00;
/* position: absolute;
bottom:3px; */
margin: 0;
margin-top: 120px;
}

.database	{
background: #98dafc url(http://www.cep-dc.org/img/CEP-database-icon-fp.png) 50% 10px no-repeat;
}

.news	{
background: #98dafc url(http://www.cep-dc.org/img/CEP-news-icon-fp.png) 50% 13px no-repeat;

}

.gwu	{
background: #98dafc url(http://www.cep-dc.org/img/CEP-gwu-icon-fp.png) 50% 15px no-repeat;
}

.br800 {display: none;}

@media screen and (max-width: 790px){.br800{display: inline;} .fpbluebox{width:43%;} }

</style>
</head>

<body><h3>Blue Boxes</h3>

<div class="testContainer">
<div class="col_12 CEP_National_Local_State_Levels"><!-- ====== OPEN col_12 National, Local, State Levels ====== -->

<div class="fpbluebox">
<p>latest publications</p>
</div>

<div class="fpbluebox database">
<p>cep publications database</p>
</div>
<br class="br800" />
<div class="fpbluebox news">
<p>news, views, & events</p>
</div>

<div class="fpbluebox gwu">
<p>gwu graduate school of education and human development</p>
</div>

</div>
</div>
</body></html>

Open in new window

maybe this can help ?

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Eric BourlandAuthor Commented:
Slick, this is really helpful. I will be able to take a closer look at your recommendations and ideas this evening. I really appreciate your time and expertise. Hope your day is going great. Eric
Eric BourlandAuthor Commented:
Slick, I went with this solution: http://www.cep-dc.org/test.cfm

I just put the boxes into columns, and then made the columns wider.

I'm still working on a few things, obviously. But I think I have resolved this particular problem. I really appreciate your time and attention and expert help.

Marco, thank you as well for your advice. I'm deeply grateful for your time.

Gentlemen, have a great evening.

best from Eric
Marco GasiFreelancerCommented:
You're welcome, Eric. Good luck with your project.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.