CODEWITHSUNDEEP
htmlimagecss
Joie
Joie

Reputation: 141

Sizing elements with each other

So I'm working on a sidebar which contains an image, a box below it for pagination, and some buttons below that. With just the image and the box, everything in the sidebar stayed the same width, adjusting with the image when it was made larger or smaller, but with the added button div below it (when the text within it gets to a certain length), the box above is being stretched in the sidebar.

This is a visual of what's going on. The red is my sidebar div.

Here's the code I have:

HTML:

body {
  color: #ffffff;
}
.sidebar {
  position: fixed;
  top: 179px;
  left: 100px;
  min-width: 100px;
  max-width: 120px;
}
.pages {
  background-color: #ffffff;
  width: -moz-calc(100% - 2px);
  width: -webkit-calc(100% - 2px);
  width: calc(100% - 2px);
  height: 30px;
  position: relative;
  left: 0px;
  top: -4px;
  border-left: 1px solid #E2C4FF;
  border-right: 1px solid #E2C4FF;
  border-bottom: 1px solid #E2C4FF;
  text-align: center;
}
.dots {
  position: absolute;
  left: 50%;
  top: 0%;
  transform: translate(-50%, -70%);
  color: {
    color: Link Color Type 1
  }
  ;
  font-family:'Questrial',
  sans-serif;
}
.custom-links {
  background-color: #000000;
}
#avatar {
  min-width: 100px;
  max-width: 120px;
}
<div class="sidebar" style="background-color:red;">
  <img id="avatar" src="http://i1380.photobucket.com/albums/ah161/joanwatson/138_zps4tytysv0.png" />
  <div class="pages">
    <a href="#" class="page-arrow">«</a>
    <p class="dots">
      .&nbsp;&nbsp;.&nbsp;&nbsp;.&nbsp;&nbsp;.&nbsp;&nbsp;.
    </p>
    <a href="#" class="page-arrow">»</a>
  </div>
  <div class="custom-links">
    I should size with the image
  </div>
</div>

Anyone know how I might fix this?

Upvotes: 0

Views: 46

Answers (3)

dippas
dippas

Reputation: 60563

That's because you are using a small image (100px) which is smaller than 120px set for max-width

so you can:

  • use a image no smaller than 120px

or

  • use display:table in .sidebar

NOTE: don't use inline styles, use CSS instead

body {
  color: #ffffff;
}
.sidebar {
  position: fixed;
  /* top: 179px; - removed for demo*/
  left: 100px;
  min-width: 100px;
  max-width: 120px;
  background-color:red
}
.pages {
  background-color: #fff;
  height: 30px;
  position: relative;
  left: 0px;
  border:  solid #E2C4FF;
  border-width:0 1px 1px;
  text-align: center
}
img {
  display: block
}
.dots {
  position: absolute;
  left: 50%;
  top: 0%;
  transform: translate(-50%, -70%);
  color:white;
  font-family: 'Questrial', sans-serif;
}
.custom-links {
  background-color: #000;
}
#avatar {
  min-width: 100px;
  max-width: 120px;
}
<div class="sidebar">
  <img id="avatar" src="//lorempixel.com/200/200" />
  <div class="pages">
    <a href="#" class="page-arrow">«</a>
    <p class="dots">
      .&nbsp;&nbsp;.&nbsp;&nbsp;.&nbsp;&nbsp;.&nbsp;&nbsp;.
    </p>
    <a href="#" class="page-arrow">»</a>
  </div>
  <div class="custom-links">
    I should size with the image
  </div>
</div>

Upvotes: 2

G-Cyrillus
G-Cyrillus

Reputation: 105893

you may use display table properties so it expand with the longest content.

max and min-width should be applied to children since it won't be avalaible with the display:table property on the .sidebar container.

body {
  color:#ffffff;
}
.sidebar {
    /* position: fixed; snippet purpose */
  display:table;
    top:179px;
    left:100px;
  width:10px;/* dmo set at 10px but could be 0 or 100px */
}

.pages {
    background-color:#ffffff;
    height:30px;
    position:relative;
    left:0px;
    top:-4px;
    border-left: 1px solid #E2C4FF;
    border-right: 1px solid #E2C4FF;
    border-bottom: 1px solid #E2C4FF;
    text-align:center;
}

.dots {
    position: absolute;
    left: 50%;
    top: 0%;
    transform: translate(-50%, -70%);
    color:{color:Link Color Type 1};
    font-family: 'Questrial', sans-serif;
}

.custom-links {
    background-color:#000000;
}

#avatar, .custom-links {
    min-width:100px;
    max-width:120px;
}
<div class="sidebar" style="background-color:red;">
    <img id="avatar" src="http://i1380.photobucket.com/albums/ah161/joanwatson/138_zps4tytysv0.png"/>
    <div class="pages">
        <a href="#" class="page-arrow">«</a>
   <p class="dots">
   .&nbsp;&nbsp;.&nbsp;&nbsp;.&nbsp;&nbsp;.&nbsp;&nbsp;.
   </p>
        <a href="#" class="page-arrow">»</a>
    </div>
    <div class="custom-links">
    I should size with the image
    </div>
    </div>

Upvotes: 4

Asons
Asons

Reputation: 87191

Remove the max-width

body {
  color:#ffffff;
}
.sidebar {
    position: fixed;
    top:17px;
    left:100px;
    min-width:100px;
}
.pages {
    background-color:#ffffff;
    height:30px;
    position:relative;
    left:0px;
    top:-4px;
    border-left: 1px solid #E2C4FF;
    border-right: 1px solid #E2C4FF;
    border-bottom: 1px solid #E2C4FF;
    text-align:center;
}
.dots {
    position: absolute;
    left: 50%;
    top: 0%;
    transform: translate(-50%, -70%);
    color:lime;
    font-family: 'Questrial', sans-serif;
}
.custom-links {
    background-color:#000000;
}
#avatar {
    min-width:100px;
    width: 200px;
}
<div class="sidebar" style="background-color:red;">
  <img id="avatar" src="http://i1380.photobucket.com/albums/ah161/joanwatson/138_zps4tytysv0.png" />
  <div class="pages">
    <a href="#" class="page-arrow">«</a>
    <p class="dots">
      .&nbsp;&nbsp;.&nbsp;&nbsp;.&nbsp;&nbsp;.&nbsp;&nbsp;.
    </p>
    <a href="#" class="page-arrow">»</a>
  </div>
  <div class="custom-links">
    I should size with the image
  </div>
</div>

Upvotes: 2

Related Questions