CSS question -- center inside a div using percentages

Eric Bourland
Eric Bourland used Ask the Experts™
on
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;
}
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
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 GasiFreelancer
Top Expert 2010
Commented:
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 GasiFreelancer
Top Expert 2010

Commented:
Otherwise you have to use media queries to set the text size for each screen size range.
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Author

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

Author

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

Author

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

Author

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 GasiFreelancer
Top Expert 2010

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

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial