css not keepng everything within a div proportioned when shrinking page size

Hi al, wonder if you could help please.

I have some content I would like to scale nicely using css. At present the code below looks fine in full screen, when the screen size reduces and it scales the outer container doesn't scale proportionally and stays very high. I've tried reducing the size to % or smaller pixels but then all that happens is i get a small box with everything outside it.

<!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>
<style>
.searchResultUser {
	width: 18%;
	height: 220px;
	background: #FFF;
	border: 1px solid #999;
	position: absolute;
	border-radius: 2%;
	position: relative;
	float: left;
	margin: 5px;
	padding: 10px;
	color: #333;
}
.searchResultUser .image img {
	position: absolute;
	left: 5%;
	top: 5%;
	width: 90%;
}
.searchResultUser .name {
	position: absolute;
	left: 5%;
	top: 80%;
	font-size: .8em;
	font-weight: bold;
}
.searchResultUser .details {
	position: absolute;
	left: 5%;
	top: 88%;
	font-size: .8em;
	color: #999;
}
</style>
</head>

<body>
<div class="searchResultUser">
  <div class="image"><img src="https://www.newton.ac.uk/files/covers/968361.jpg" /></div>
  <div class="name">Neil</div>
  <div class="details">England</div>
</div>
</body>
</html>

Open in new window


perfect:
perfect, all in place
scaled down, looks rubbish. I need all proportioned
height looks stupid
ideally like this:
perfect
LVL 3
Neil ThompsonSenior Systems DeveloperAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
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.

Snarf0001Commented:
You have to dump all of the absolute positioning.
position:absolute should not be used for standard positioning, you're going to make more and more problems for yourself doing it like this.

1) Remove all the position:absolute, left: top: etc...
2) Remove the height attribute on .searchResultUser and allow it to flow and grow as required
3) Add a margin-top to .name to add the vertical space between the image and text

<!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>
<style>
.searchResultUser {
	width: 18%;
	/*height: 220px;*/
	background: #FFF;
	border: 1px solid #999;
	position: absolute;
	border-radius: 2%;
	position: relative;
	float: left;
	margin: 5px;
	padding: 10px;
	color: #333;
}
.searchResultUser .image img {
	/*position: absolute;
	left: 5%;
	top: 5%;*/
	width: 100%;                /* changed from 90% as you're now also abiding by the padding from the containing element */
}
.searchResultUser .name {
	/*position: absolute;
	left: 5%;
	top: 80%;*/
    margin-top:10%;             /* set the margin to make some vertical space */
	font-size: .8em;
	font-weight: bold;
}
.searchResultUser .details {
	/*position: absolute;
	left: 5%;
	top: 88%;*/
	font-size: .8em;
	color: #999;
}
</style>
</head>

<body>
<div class="searchResultUser">
  <div class="image"><img src="https://www.newton.ac.uk/files/covers/968361.jpg" /></div>
  <div class="name">Neil</div>
  <div class="details">England</div>
</div>
</body>
</html>

Open in new window

0
Neil ThompsonSenior Systems DeveloperAuthor Commented:
genius, thank you so much.

 Is there any way I can keep them all the same height when in a row. As there are lots of these and some have slightly longer names they wrap leaving some short and some longer.
0
Snarf0001Commented:
Typically I use display:flex for things like this.  Incredibly flexible layout model.
There are a lot of other parameters to really bend the layout, but by just adding that to a container, by default it sizes to the same height.

<!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>
<style>
    .searchResultContainer{
        display:flex;
    }
.searchResultUser {
	width: 18%;
	/*height: 220px;*/
	background: #FFF;
	border: 1px solid #999;
	position: absolute;
	border-radius: 2%;
	position: relative;
	float: left;
	margin: 5px;
	padding: 10px;
	color: #333;
}
.searchResultUser .image img {
	/*position: absolute;
	left: 5%;
	top: 5%;*/
	width: 100%;                /* changed from 90% as you're now also abiding by the padding from the containing element */
}
.searchResultUser .name {
	/*position: absolute;
	left: 5%;
	top: 80%;*/
    margin-top:10%;             /* set the margin to make some vertical space */
	font-size: .8em;
	font-weight: bold;
}
.searchResultUser .details {
	/*position: absolute;
	left: 5%;
	top: 88%;*/
	font-size: .8em;
	color: #999;
}
</style>
</head>

<body>
    <div class="searchResultContainer">
        <div class="searchResultUser">
            <div class="image"><img src="https://www.newton.ac.uk/files/covers/968361.jpg" /></div>
            <div class="name">Neil</div>
            <div class="details">England</div>
        </div>
        <div class="searchResultUser">
            <div class="image"><img src="https://www.newton.ac.uk/files/covers/968361.jpg" /></div>
            <div class="name">Neil smoething much longer to increase flow</div>
            <div class="details">England</div>
        </div>
        <div class="searchResultUser">
            <div class="image"><img src="https://www.newton.ac.uk/files/covers/968361.jpg" /></div>
            <div class="name">Neil</div>
            <div class="details">England</div>
        </div>
        <div class="searchResultUser">
            <div class="image"><img src="https://www.newton.ac.uk/files/covers/968361.jpg" /></div>
            <div class="name">Neil smoething much longer to increase flow</div>
            <div class="details">England</div>
        </div>
    </div>
</body>
</html>

Open in new window

0

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
Neil ThompsonSenior Systems DeveloperAuthor Commented:
Superb, thanks so much for your help
0
Vijaya KumarCommented:
Check out this using media query....

<!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>
<style>
.searchResultUser {
      width: 18%;
      height: 220px;
      background: #FFF;
      border: 1px solid #999;
      position: absolute;
      border-radius: 2%;
      position: relative;
      float: left;
      margin: 5px;
      padding: 10px;
      color: #333;
}

@media (max-width:500px){ .searchResultUser {width: 50%;}}

.searchResultUser .image img {
      position: absolute;
      left: 5%;
      top: 5%;
      width: 90%;
      height:60%
}
.searchResultUser .name {
      position: absolute;
      left: 5%;
      top: 80%;
      font-size: .8em;
      font-weight: bold;
}
.searchResultUser .details {
      position: absolute;
      left: 5%;
      top: 88%;
      font-size: .8em;
      color: #999;
}
</style>
</head>

<body>
<div class="searchResultUser">
  <div class="image"><img src="https://www.newton.ac.uk/files/covers/968361.jpg" /></div>
  <div class="name">Neil</div>
  <div class="details">England</div>
</div>
</body>
</html>
1
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.