Divide Width of Element Between Child Divs with CSS

Divide Width of Element Between Child Divs With CSS

You can use display:table-cell on your inner divs to do this. For the browser to make the inner divs behave like table cells, it also needs two layers of containing elements: one to acts as the table, and another to act as the table-row.

For a structure like this:

   <div class="outer">
       <div class="middle">
          <div class="inner">Item 1</div> 
          <div class="inner">Item 2</div> 
          <div class="inner">Item 3</div> 
          <div class="inner">Item 4</div> 
       </div>
   </div>

Use this CSS:

div.outer {display:table;}
div.middle {display:table-row;}
div.inner {display:table-cell;}

A nice structure to use is a UL wrapped in a DIV: the DIV acts as a table, the UL as a row, and the LI's as table-cells.

This technique is not well supported in older browsers - for anything older than IE8, you're out of luck entirely.

Let me know if you need more sample code than that!

Split divs by width to fill parent div

You're putting some extra " in there - after inline-block. Also take into account that line endings add an extra space, so your containers' total width would be 33% + 33% + 33% + 2 extra spaces.

You might want to try using display: flex;

<style>
.progressPercent {
    color: #000!important;
    background-color: green!important;
    border-radius: 0.5px;
    text-align: right;
    height:100%;
    font-weight: bolder;
}
</style>
<div style="display: flex;">
    <div class="progressPercent" style="flex-basis: calc( 100% / 3 );">33%</div>
    <div class="progressPercent" style="flex-basis: calc( 100% / 3 );">33%</div>
    <div class="progressPercent" style="flex-basis: calc( 100% / 3 );">33%</div>  
</div>

I'm using calc( 100% / 3 ) as it's more accurate than using 33% tree times, which is 1% short of 100%.

css divide width 100% to 3 column

A perfect 1/3 cannot exist in CSS with full cross browser support (anything below IE9). I personally would do: (It's not the perfect solution, but it's about as good as you'll get for all browsers)

#c1, #c2 {
    width: 33%;
}

#c3 {
    width: auto;
}

How to divide parent div's height between child divs

To spread the childs horizontally, we use display: table-cell and to spread the childs vertically, we can use display: table-row. But display: table-row needs some content in it, which I am providing through pseudo element as you can see in the below example.

Try to add more childs, they spread and fit inside the parent container automatically.

.parent {
    height: 100px;
    width: 100px;
    display: table;
    border: 1px solid black;
}
.child {
    display: table-row;
    width: 100px;
    background-color: tomato;
}
.child:nth-child(2n) {
    background-color: beige;
}
.child::after {
    content:"";
}

Working Fiddle

Split available width between two divs

Make use of overflow:hidden (or overflow:auto - as long as overflow isn't set to visible [the default]) to trigger block formatting contexts to fill remaining width

(I have assumed a fixed width of 100px for div1 and div4)

FIDDLE

Markup

<div class="div1">DIV 1</div>
<div class="container">
    <div class="div2">DIV 2</div>
    <div class="div3">DIV 3</div>
</div>
<div class="div4">DIV 4</div>

CSS

html,body,div
{
    height: 100%;
}
.div1 {
    float:left;
    width: 100px;
    background: aqua;
}
.container
{
   overflow: hidden;
   padding-right: 100px;
   box-sizing: border-box;
    background: green;
}
.div2 {
    background:yellow;
    float:left;
}
.div3 {
    background:brown;
    overflow: hidden;
}
.div4 {
    position: absolute;
    right:0;
    top:0;
    background:pink;
    width: 100px; 
}

Allocate equal width to child elements with css

Assuming the following sample markup:

<div class="wpr">
    <div></div>
    <div></div>
    <div></div>
</div>

Solution #1 - Flexbox

.wpr {  display: flex;  width: 400px;}
.wpr div {  flex: 1 1 0;  border: 1px solid yellow;  background: pink;  text-align: center;  min-height: 40px;}

<div class="wpr">  <div></div>  <div></div>  <div></div></div>
<div class="wpr">  <div></div>  <div></div></div>
<div class="wpr">  <div></div>  <div></div>  <div></div>  <div></div>  <div></div>  <div></div></div>

CSS - Divide width to percentage of parent

1. You can do using flex.(hope this is not an issue)
2. float has become old as of now.
3. I have moved px to random % for min-width feel free to modify this.

fiddle to playaround.

body {  background-color: #4efa6d;}
.wrap {  width: 100%;  border: 1px solid white;  display:flex;}
.date, .month {  min-width: 2%;  width: 6.25%;   border: 1px solid red;  margin: 5px;  padding:5px;}
.task {  min-width: 10%;  width: 67.5%;  margin: 5px; padding:5px;   border: 1px solid red;
}
.status {  min-width: 5%;  width: 12.5%;  border: 1px solid red;  margin: 5px;  padding:5px;}

<html>  <body>    <div class = "wrap">      <div class="date">Date</div>      <div class="month">Month</div>      <div class="task">Task</div>      <div class="status">Status</div>    </div>  </body></html>

divide width evenly between child with hidden overflow x and scroll y and a preview div

Some bad news for you:

Note: The overflow property only works for block elements with a specified height.

https://www.w3schools.com/cssref/pr_pos_overflow.asp

The 50% issue is caused by box-sizing and default styling of text-area elements; it is overflowing its .editor container, making it look larger than 50%;

Here is some code to do what I believe you're trying to do:

.wrap {
  display: flex;
  background: gray;
}

.content {
  overflow-x: hidden;
  overflow-y: auto;
/* without specifying a height, the content will never scroll vertically when using overflow-y:auto, because it will continue to grow to it's content's height otherwise */
  max-height: 150px;
}

.editor textarea {
  width: 100%;
  height: 100%;
  resize: none;
  box-sizing:border-box; /* prevents drawing outside it's parent */
}
/* without forcing 50% width, flex will let a container's content grow to its content's size. Try with/without */
.editor, .preview {width: 50%}

.editor {
  flex: 1;
}

.preview {
  flex: 1;
}

<div class='wrap'>
  <div class='editor'>
    <textarea></textarea>
  </div>
  <div class='preview'>
    <div class='content'>
      THISCONTENTGETSCUTOFF_X_LongcontentLongcontentLongcontentLongcontentLongcontentLongcontentLongcontentLongcontentLongcontent

THIS CONTENT WRAPS AND SCROLLS 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac fermentum nunc. In vestibulum suscipit quam, ac mattis velit convallis quis. Phasellus ut justo id nunc placerat varius. Curabitur feugiat vulputate facilisis. Nulla est leo, posuere aliquet ligula at, ultricies placerat felis. Curabitur nec tincidunt arcu, sit amet varius nunc. Cras varius risus a tellus auctor egestas. Pellentesque sagittis tortor ac massa facilisis porta. Proin arcu nisl, facilisis non orci ut, tempor tincidunt arcu. Aenean luctus lacinia sapien, at sagittis enim pharetra non. Phasellus blandit pharetra hendrerit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Aliquam at feugiat diam, ut porttitor quam.
    </div>
  </div>
</div>

---

Related Topics