Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Ryan Rassoli
Ryan Rassoli
3,365 Points
Posted by Ryan Rassoli
Ryan Rassoli
3,365 Points

Relative and Absolute - HTML & CSS

I have the div's - pic, info, and socials. The pic consists of a picture which I want to be on the left side of my container. The info is an ol that I want to be on the right of the container. The socials is a set of three images that link to my social media accounts. I want the picture to be placed relative to the container and the info to be placed relative to the container but also have the socials relative to the info. When i make the container absolute and the picture relative and enter a percentage as a margin value, the percentage is relative to the body not the container. I also don’t know how to make the info both absolute and relative. Here is a link to what I want it to look like: https://imgur.com/5vQy3Vi. I know it's a long explanation but I would really appreciate any help I can get! Thanks in advance.

<container>
          <div id="myinfo">
            <ol>
              <li id="myname"><b>Johny Appleseed/b></li>
              <li><b>Phone:</b> (123) 456-7890</li>
              <li><b>Email:</b> <a href="mailto:johnyappleseed@yahoo.com">johnyappleseed@yahoo.com</a></li>
            </ol>
          </div>
          <div id="socials">
            <a target="_blank" href="https://www.facebook.com/"><img id="fb"src="images/facebook.png" alt="facebookicon" width="50" height="50"/></a>
            <a target="_blank" href="https://twitter.com/"><img id="tw" src="images/twitter.png" alt="twittericon" width="50" height="50"/></a>
            <a target="_blank" href="https://www.instagram.com/"><img id="ig" src="images/instagram.png" alt="instagramicon" width="40" height="40"/></a>
          </div>
          <div id="pic">
            <img id="profile" src="images/profile.png" alt="myheadshot" width="100px" height="auto"/>
          </div>
      </container>

2 Answers

Ling Lei
Ling Lei
6,099 Points
Ling Lei
Ling Lei
6,099 Points

You've got it backwards the container needs to be relative and the picture absolute.

Absolute positioning is based off the body or a relative object.

Here is a link to a codepen I made to show you:

https://codepen.io/wenlinglei/pen/BgmgyV

Ryan Rassoli
Ryan Rassoli
3,365 Points
Ryan Rassoli
Ryan Rassoli
3,365 Points

The only problem with that is that I want the container to be positioned relative to the body. Also, how do I position the socials div if the info div is already absolute?

Ling Lei
Ling Lei
6,099 Points
Ling Lei
Ling Lei
6,099 Points

Create a few wrapper divs. Have the wrappers be relative and the contents be absolute. Would probably require some trail and error.

I'd suggest have the main container as a flex item for the body and then absolute position your items relative to the container.

Ryan Rassoli
Ryan Rassoli
3,365 Points
Ryan Rassoli
Ryan Rassoli
3,365 Points

Ok, I'm going to try that. One last question, if I set the width or padding of an item thats absolute to the container, will it be for instance 10% of the container or the body?

Ling Lei
Ling Lei
6,099 Points
Ling Lei
Ling Lei
6,099 Points

It will be 10% of the container.

Ryan Rassoli
Ryan Rassoli
3,365 Points
Ryan Rassoli
Ryan Rassoli
3,365 Points

Also, how do I vertically center the pic div. I tried setting it to absolute and set the display to block with the top and bottom on auto but it's not doing anything.

Ling Lei
Ling Lei
6,099 Points
Ling Lei
Ling Lei
6,099 Points

Do you mean in the center of the space? Or the center of the Y axis.

For the center of the space this example should help. 

<div id = "main">
  <div id = "square">
  </div>
</div>

#main{
  width: 300px;
  height: 300px;
  position: relative; 

  background-color: red;
}

#square{
  display: block;
  position: absolute;

  width: 20%;
  height: 20%;

  background-color: black;

  left: 40%;
  top: 40%;
}

This places a black square in the center of a red square. For just placing it in the center of the Y AXIS you'd only need to set the top to 40%.

In your case if you have set the image to take up 10% you will want the top to be 45% (as 45%(top) + 10%(image)+45%(remaining space) = 100% of the container.

Hope that helps.