CODEWITHSUNDEEP
htmlcss
azaria.dee
azaria.dee

Reputation: 83

How to get images and other elements to stay in place

I am currently working on a webpage that requires me to have a total of 4 images on the page;
the first two side by side and the same for the second but underneath the first two.
My issue is that when I resize my web browser, everything else stays in place, but the images begin to overlap each other the more I resize the page. I have tried wrapping everything in a container, position absolute, fixed, width:100%, you name it...
I still can't seem to get everything to look the exact same, but smaller on a resize..
When I go onto professional websites, all of the page's contents stay intact.
Please someone help me out, I've literally been working on this all day.

body {
  padding: 0px;
  margin: 0px;
}
#dLand {
  position: absolute;
  top: 300px;
  left: 95px;
}
#sunset {
  position: absolute;
  top: 300px;
  right: 95px;
}
#griff {
  position: absolute;
  top: 750px;
  left: 100px;
}
#samo {
  position: absolute;
  top: 750px;
  right: 100px;
}

<div class='container'> 
  <div id='main_menu'>
    <div class='logo_area'>
      <a href='#'><img src='img/cabear.jpg' alt='CA state bear'></a>
    </div>
    <div class='inner_main_menu'>
      <ul>
        <li><a href='#'>About</a></li>
        <li><a href='#'>Pricing</a></li>
      </ul>
    </div>
  </div> 

  <img id='dLand'  src='img/calidisney.jpeg' alt='Disneyland, CA'       style='width: 40%'>
  <img id='sunset' src='img/sunset.jpg'      alt='Sunset Strip'         style='width: 40%'>
  <img id='griff'  src='img/griffith.jpg'    alt='Griffith Observatory' style='width: 40%'>
  <img id='samo'   src='img/samopier.jpg'    alt='Santa Monica Pier'    style='width: 40%'>
</div>

Upvotes: 0

Views: 55

Answers (3)

symlink
symlink

Reputation: 12209

You're better off achieving this in a way that doesn't remove the images from the natural flow of the page. Grid is a good way to go:

body {
  padding: 0px;
  margin: 0px;
}

#main_menu {
  display: flex;
  margin-bottom: 20px;
}

.inner_main_menu>ul {
  list-style-type: none;
  display: flex;
  padding: 0 0 0 10px;
}

.inner_main_menu>ul>li {
  margin-right: 20px;
}

.images{
   background: lightblue;
   display: grid;
   grid-template-columns: 1fr 1fr;
   margin-bottom: 40px;
}

.images > img{
   width: 100%;
   margin-bottom: 40px;
}

.images > img:nth-last-child(-n+2){
   margin-bottom: 0;
}
<div class='container'>
  <div id='main_menu'>
    <div class='logo_area'>
      <a href='#'><img src='http://placekitten.com/50/50' alt='CA state bear'></a>
    </div>
    <div class='inner_main_menu'>
      <ul>
        <li><a href='#'>About</a></li>
        <li><a href='#'>Pricing</a></li>
      </ul>
    </div>
  </div>
  <div class="images">
    <img id='dLand' src='http://placekitten.com/1000/1000' alt='Disneyland, CA'>
    <img id='sunset' src='http://placekitten.com/1200/1200' alt='Sunset Strip'>
    <img id='griff' src='http://placekitten.com/900/900' alt='Griffith Observatory'>
    <img id='samo' src='http://placekitten.com/1100/1100' alt='Santa Monica Pier'>
  </div>
</div>

Upvotes: 0

Johannes
Johannes

Reputation: 67768

One thing you can do (since you already used percentage values for the image widths) is to also use percentage values for the left and right position parameters of the images, in such a way that widths, left and right add up to 100% (so in this example, left and right are 10% each, the widths 40%: 2 x 40% and 2 x 10% = 100%)

(Still, I would recommend NOT to use absolute positions for a basically easy situation like this: You can use the same parammters except margin-top instead oftopand withoutposition: absolute` and get a very similar but definitely more reliable responsive result)

body {
    padding: 0px;
    margin: 0px;
}

#dLand {
    position: absolute;
    top: 300px;
    left: 10%;
}

#sunset {
    position: absolute;
    top: 300px;
    right: 10%;
}

#griff {
    position: absolute;
    top: 750px;
    left: 10%;
}

#samo {
    position: absolute;
    top: 750px;
    right: 10%;
}
 
    <div class='container'> 
        <div id='main_menu'>
            <div class='logo_area'>
                <a href='#'><img src='img/cabear.jpg' alt='CA state bear'></a>
            </div>

            <div class='inner_main_menu'>
                <ul>
                    <li><a href='#'>About</a></li>
                    <li><a href='#'>Pricing</a></li>
                </ul>
            </div>
        </div> 

        <img id='dLand' src='http://placehold.it/300x450/fa0' alt='Disneyland, CA' style='width: 40%'>
        <img id='sunset' src='http://placehold.it/300x450/0fa' alt='Sunset Strip' style='width: 40%'>
        <img id='griff' src='http://placehold.it/300x450/f0a' alt='Griffith Observatory' style='width: 40%'>
        <img id='samo' src='http://placehold.it/300x450/a0f' alt='Santa Monica Pier' style='width: 40%'>

    </div>

Upvotes: 1

Libra
Libra

Reputation: 2595

I recommend you use a css-grid structure, just keep in mind that for this to work, the container needs to be of fixed width.

CodePen

HTML

<div class="container">
  <img src="path/to/img">
  <img src="path/to/img">
  <img src="path/to/img">
  <img src="path/to/img">
</div>

CSS

.container{
  width: 200px;
  display: grid;
  grid-template-columns: auto auto;
  grid-gap: 10px;
}

Upvotes: 1

Related Questions