CSS question -- center inside a div using percentages

Otherwise you have to use media queries to set the text size for each screen size range.

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

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%);
}

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

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

You're welcome, Eric. Good luck with your project.