CODEWITHSUNDEEP
htmlcss
Joie
Joie

Reputation: 141

Make child divs expand and compress within parent

I have a top-bar of pages set up, and I would like to make the width of each "button" (.contain) expand or compress when a browser is made larger or smaller.

I saw a very good solution to this that used a float, but in my case this doesn't work, because adding this causes the buttons to stop showing up side-by-side; something I solved with an inline block.

I need a way to both keep the buttons side-by-side and make their widths adjust with a browser window. Any suggestions? My code is as follows:

#topbar {
  width: 100%; 
  height: 38px;
  border-bottom: 1px solid #e2c4ff;
  position: fixed;
  z-index: 10;
  top: 0px;
  left: 0px;
  text-align: center;
}

.toppage {
  white-space: nowrap;
  position: absolute;
  left: 0%;
  top: 50%;
  transform: translate(0%, -50%);
}

.contain {
  display: inline-block;
  white-space: normal;
  padding-left: 12px;
  padding-right: 12px;
  height: 38px;
  background-color: #fff;
  border-right: 1px solid #e2c4ff;
}
<div id="topbar">
  <div class="toppage">
    <div class="contain">hello</div>
    <div class="contain">goodbye</div>
    <div class="contain">what are we doing?</div>
    <!---->
    <div class="contain">what are we doing?</div>
    <div class="contain">what are we doing?</div>
    <div class="contain">what are we doing?</div>
    <div class="contain">what are we doing?</div>
    <div class="contain">what are we doing?</div>
    <div class="contain">what are we doing?</div>
    <div class="contain">what are we doing?</div>
    <div class="contain">what are we doing?</div>
    <div class="contain">what are we doing?</div>
    <div class="contain">what are we doing?</div>
    <div class="contain">what are we doing?</div>
    <div class="contain">what are we doing?</div>
  </div>
</div>

Upvotes: 2

Views: 914

Answers (4)

Lucian
Lucian

Reputation: 1713

Don't use position: absolute for .toppage. For .contain use some width in percentage. It should work.

Upvotes: 0

Chaitanya
Chaitanya

Reputation: 729

Container's contraction is useful as long as the content (text, in your case) inside it doesn't go out. You can use Media Queries to make responsive containers but the text inside will remain the same size. That is why when page size decreases, the container slips down, as text inside is of same font-size.

As I came up with, this problem can be solved in two ways:

1: Hard code CSS media queries to change font-size

This will require a lot of guess work and you'll have to use many @media rules to work it out. Use this only if you don't want to include script in your page.

2: Use JavaScript to handle font-size

This is the best solution I can think of. You can use JS(I use jQuery) to change font-size of text inside your contain div. Though this method also requires little hard coding. Here is the example code:

HTML:

<div id="container">
    <div class="contain">Button</div>
    <div class="contain">Button</div>
    <div class="contain">Button</div>
    <div class="contain">Button</div>
    <div class="contain">Button</div>
    <div class="contain">Button</div>
    <div class="contain">Button</div>
    <div class="contain">Button</div>
    <div class="contain">Button</div>
    <div class="contain">Button</div>
</div>

Keep in mind: When you change font-size of any text by 1px, all characters composing the text increases by 1px in size. Therefore:

JavaScript:

$(document).ready(function() {
    $(window).resize(function() {
        var window_width = $(window).width();
        var contain_count = 10*6; // 10 contain elements * 6 characters of text 'button'
        var ratio = window_width/contain_count;
        $('.contain').css('font-size',ratio+'px')
    });
});

So if you wanna have buttons side-by-side no matter what, you also have to decrease their font-size.

Upvotes: 1

Ilya Novojilov
Ilya Novojilov

Reputation: 889

I believe if you give display: flex; justify-content: center;width: 100%; to the .toppage , this will work.

Upvotes: 1

Joie
Joie

Reputation: 141

I decided to settle on this: http://www.w3schools.com/css/css_navbar.asp . It doesn't do quite what I was thinking, but it looks very clean, and the code is neater than what I originally had.

Upvotes: 0

Related Questions