1

I am trying to do something like following, that is specify the width of inner div as a percentage of the parent div.

<div>
    <div style="width: 20%">
        some text
    </div>
    <div style="width: 80%">
        Some more text
    </div>
</div>

How to do this so that the inner divs stay inside the parent div? I tried adding float to the inner divs. if I did that the inner divs go outside the parent div. I do not wish to specify width as pixels.

I saw the following: Setting Inner Div width's percentage of parent

What I am trying to do could be a bit different. I am open to using something like bootstrap to achieve this.

user2125853
  • 1,265
  • 4
  • 13
  • 23
  • Try adding `style="position: relative;"` on the outer div? – Ollin Boer Bohan Nov 10 '18 at 19:35
  • Use the column structure for your divs. There are specific classes that adjusts the width are required. Also, provide with a jsfiddle/codepen link showing what you have made and what you want to achieve – krishna_tandon Nov 10 '18 at 19:35

3 Answers3

2

You can achieve this using flexbox! first off all we need to update your markup all little bit adding some class names

<div class="parent">
    <div class="child1">
        some text
    </div>
    <div class="child2">
        Some more text
    </div>
</div>

then you need to give to the parent div a display flex, you can add a height too

.parent{
  display: flex;
  height: 100px;
}

and for the last you give the child divs the width you want

.child1{
  width: 20%;
}

.child2{
  width: 80%;
}

Here you have a codepen if you want to check it, and here an article you can read about flexbox and how it works!

MartinBA
  • 797
  • 1
  • 5
  • 15
  • You don't have to set the width of the parent div. Divs have an automatic width of 100%. – symlink Nov 10 '18 at 19:52
  • Yes you are right, it's a habit that I have, but I don't think it's wrong to do it. – MartinBA Nov 10 '18 at 19:57
  • The problem is when you add padding and/or margin to your div. [See this question.](https://stackoverflow.com/questions/17468733/difference-between-width-auto-and-width-100-percent) – symlink Nov 10 '18 at 20:06
  • Thanks for that question, I've never paid attention to that because I always use boxing size: border-box, but I do not know if OP is using it, I'll keep it in mind in the future. – MartinBA Nov 10 '18 at 20:14
1

I am assuming you want the divs to appear inline? If my assumption is correct you can use float and inline-block.

  <div id="wrapper">
    <div id="div1">some text</div>
    <div id="div2">some more text</div>
  </div>

Following style:

div {
  display: inline-block;
}

#wrapper {
  width: 100%;
}

#div1 {
  background: pink;
  width: 20%;
  float: left;
}

#div2 {
  background: lightgrey;
  width: 80%;
}

See here: https://jsbin.com/xipinaj/edit?html,css,output

Vladimir Mujakovic
  • 650
  • 1
  • 7
  • 21
-1

If your using bootstrap its recommended to use the bootstraps feature for doing this. You can easily build this with bootstrap grid

https://getbootstrap.com/docs/4.0/layout/grid/

Pommesloch
  • 492
  • 5
  • 17