• Status: Solved
  • Priority: High
  • Security: Public
  • Views: 42
  • Last Modified:

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
0
Neil Thompson
Asked:
Neil Thompson
  • 2
  • 2
1 Solution
 
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
 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: CompTIA Healthcare IT Tech

This course will help prep you to earn the CompTIA Healthcare IT Technician certification showing that you have the knowledge and skills needed to succeed in installing, managing, and troubleshooting IT systems in medical and clinical settings.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now