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

Posted by Grant Lacey
Grant Lacey
6,103 Points

Force one div to stay in view and slide on top of another div on window resize - Help Please

I'm missing something basic here. A simple contact page with 2 divs side by side A div with a world map as its background on the left; A div with ul elements containing contact info on the right. I am using absolute properties to fix divs above the map, therefore I need the map to remain a specific size. Im OK with the map having an overflow scroll bar if the viewport is not wide enough. HOWEVER I would like the "ContactPane div" to be fixed to the right of the viewport and stay there on window re-size, sliding on top of the map if theres not enough room.

Both the "Map div" and the "Contact Pane div" should be vertically aligned just below the header.

Ive tried 834 different combinations of display: float: width: position: left: etc with no success.

Heres the relevant code excerpt:

<body>
    <div id="total">
      <div id="map" class="group">
        <div class="NAmerica" id="USA" ></div>
        <div class="SAmerica" id="SA" ></div>
        <div class="Europe"></div>
        <div class="Africa" id="AF" ></div>
      </div>

      <div id="ContactPane" class="group">
          <ul class="NAmerica Africa group">
            <li>Grant Lacey</li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
          </ul>
          <ul class="SAmerica group">
            <li>Jose</li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
          </ul>
          <ul class="Europe group">
            <li>Europe Phil</li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
          </ul>
          <ul class="China group">
            <li>Jonathan</li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
          </ul>
      </div>
    </div>
</body>

html {
    min-width: 1400px
}

body {

    overflow: scroll;
}

#total {
    display: inline;
}
#map {
    min-height: 700px;
    width: 1160px;
    background: url('../img/worldMap.jpg') no-repeat center;
    background-size: cover;
    overflow: scroll;
}

#ContactPane {
    border: 1px solid red;
    margin: -500px 0 0 80%;
    width: 450px;
    height: 700px;
    float: right;
}

#ContactPane ul {
    border: 1px solid red;
    width: 200px;
    height: 100px;  
    margin: 0 0 0 0;
    position: relative;
}
.NAmerica {
    border: 1px solid red;
    width: 410px;
    height: 260px;
    margin: 95px 0 0 0%;
    position: absolute;
}

.SAmerica {
    border: 1px solid green;
    width: 250px;
    height: 270px;
    margin: 357px 0 0 184px;
    position: absolute;
}

.Europe {
    border: 1px solid gray;
    width: 190px;
    height: 291px;
    margin: 90px 0 0 420px;
    position: absolute;
}

.Africa {
    border: 1px solid yellow;
    width: 244px;
    height: 20%;
    margin: 380px 0 0 450px;
    position: absolute;
}
Chris Shaffer
Chris Shaffer
12,030 Points

You're overriding a lot of your positioning by defining the html and body tags at the top. This is unnecessary and will probably cause you a lot of headaches.

If I understand correctly, you want the full frame of the contact frame to move with the window but remain fixed to the right. I'm not sure I achieved exactly what you want as I don't know what your end layout should be, but this should get you started:

#total {
    display: inline;
}
#map {
    min-height: 700px;
    width: 1160px;
    background: url('../img/worldMap.jpg') no-repeat center;
    background-size: cover;
    overflow: scroll;
}

#ContactPane {
    border: 1px solid red;
    margin: -500px 0 0 80%;
    width: 450px;
    height: 700px;
    position: right;
}

#ContactPane ul {
    border: 1px solid red;
    width: 200px;
    height: 100px;  
    margin: 0 0 0 0;
    position: relative;
}

.contact-container {
    float: right;
}
.NAmerica {
    border: 1px solid red;
    width: 410px;
    height: 260px;
    margin: 95px 0 0 0%;
    position: absolute;
}

.SAmerica {
    border: 1px solid green;
    width: 250px;
    height: 270px;
    margin: 357px 0 0 184px;
    position: absolute;
}

.Europe {
    border: 1px solid gray;
    width: 190px;
    height: 291px;
    margin: 90px 0 0 420px;
    position: absolute;
}

.Africa {
    border: 1px solid yellow;
    width: 244px;
    height: 20%;
    margin: 380px 0 0 450px;
    position: absolute;
}

I also added a single class, "contact-container" and added to the DOM:

<div class="contact-container">
        <div id="ContactPane" class="group">
                <ul class="NAmerica Africa group">
                  <li>Grant Lacey</li>
                  <li></li>
...................

I wrapped your main ContactPane div with a new div order to control it's positioning.

I would strongly suggest looking at Bootstrap or Foundation and their grid systems as an easy fix to this. You could rack your brain trying to get it, or use something that works out of the box.

Grant Lacey
Grant Lacey
6,103 Points

Chris- If good for you would you copy this comment into an answer so I can "best answer" it? Thank you for pointing out the HTML and Body styling overriding. I will check out bootstrap, Ive heard it referenced too many times now. Im all for leveraging existing functionality. I do need to cut my teeth somewhere and once Ive taken on a task, even if basic and maybe never used again I do like to make sure I understand what hung me up so I can keep that nugget of knowledge. Your html and body styling feedback plus adding the "contact-container" helped me do just that in this instance. Thank you very much for your thoughtful reply.

1 Answer

Chris Shaffer
Chris Shaffer
12,030 Points

Done!

You're overriding a lot of your positioning by defining the html and body tags at the top. This is unnecessary and will probably cause you a lot of headaches.

If I understand correctly, you want the full frame of the contact frame to move with the window but remain fixed to the right. I'm not sure I achieved exactly what you want as I don't know what your end layout should be, but this should get you started:

#total {
    display: inline;
}
#map {
    min-height: 700px;
    width: 1160px;
    background: url('../img/worldMap.jpg') no-repeat center;
    background-size: cover;
    overflow: scroll;
}

#ContactPane {
    border: 1px solid red;
    margin: -500px 0 0 80%;
    width: 450px;
    height: 700px;
    position: right;
}

#ContactPane ul {
    border: 1px solid red;
    width: 200px;
    height: 100px;  
    margin: 0 0 0 0;
    position: relative;
}

.contact-container {
    float: right;
}
.NAmerica {
    border: 1px solid red;
    width: 410px;
    height: 260px;
    margin: 95px 0 0 0%;
    position: absolute;
}

.SAmerica {
    border: 1px solid green;
    width: 250px;
    height: 270px;
    margin: 357px 0 0 184px;
    position: absolute;
}

.Europe {
    border: 1px solid gray;
    width: 190px;
    height: 291px;
    margin: 90px 0 0 420px;
    position: absolute;
}

.Africa {
    border: 1px solid yellow;
    width: 244px;
    height: 20%;
    margin: 380px 0 0 450px;
    position: absolute;
}

I also added a single class, "contact-container" and added to the DOM:

<div class="contact-container">
        <div id="ContactPane" class="group">
                <ul class="NAmerica Africa group">
                  <li>Grant Lacey</li>
                  <li></li>
...................

I wrapped your main ContactPane div with a new div order to control it's positioning.

I would strongly suggest looking at Bootstrap or Foundation and their grid systems as an easy fix to this. You could rack your brain trying to get it, or use something that works out of the box.