How to make CSS width to fill parent?
EDIT:
Those three different elements all have different rendering rules.
So for:
table#bar
you need to set the width to 100% otherwise it will be only be as wide as it determines it needs to be. However, if the table rows total width is greater than the width of bar
it will expand to its needed width. IF i recall you can counteract this by setting display: block !important;
though its been awhile since ive had to fix that. (im sure someone will correct me if im wrong).
textarea#bar
i beleive is a block level element so it will follow the rules the same as the div. The only caveat here is that textarea
take an attributes of cols
and rows
which are measured in character columns. If this is specified on the element it will override the width specified by the css.
input#bar
is an inline element, so by default you cant assign it width. However the similar to textarea
's cols
attribute, it has a size
attribute on the element that can determine width. That said, you can always specifiy a width by using display: block;
in your css for it. Then it will follow the same rendering rules as the div.
td#foo
will be rendered as a table-cell
which has some craziness to it. Bottom line here is that for your purposes its going to act just like div#foo
as far as restricting the width of its contents. The only issue here is going to be potential unwrappable text in the column somewhere which would make it ignore your width setting. Also all cells in the column are going to get the width of the widest cell.
Thats the default behavior of block level element - ie. if width is auto
(the default) then it will be 100% of the inner width of the containing element. so in essence:
#foo {width: 800px;}
#bar {padding-left: 2px; padding-right: 2px; margin-left: 2px; margin-right: 2px;}
will give you exactly what you want.
CSS for fill parent width?
Have you tried: width: 100%;
?
Set the width of children to fill the parent
You can achieve this using flexbox properties.
Here is a demo:
.parent { display: flex; height: 120px; background: #000; padding: 10px; box-sizing: border-box;}
.child { height: 100px; background: #ddd; flex: 1; margin: 0 10px;}
<div class="parent"> <div class="child"></div> <div class="child"></div> <div class="child"></div></div>
<div class="parent"> <div class="child"></div> <div class="child"></div></div>
<div class="parent"> <div class="child"></div></div>
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%.
Make the anchor fill 100% of parent width and height
You should move the line padding: 1em 1.5em;
from the tabs to the anchors in it, otherwise the tabs will always be wider and taller than the anchors:
.tabs { font-size: 0;}
.tab { background-color: #19222a; color: white; display: inline-block; border: 1px solid #ddd; font-size: 14px; border-bottom: 0; top: 1px; left: 4em; position: relative; max-width: 215px;}
.tab a { color: white; text-decoration: none; display: block; padding: 1em 1.5em;}
.active { background-color: #206996; color: white; font-weight: bold;}
table { border-top: 1px solid #ddd; font-size: 14px;}
table tr:nth-child(even) { background-color: #faf7f7;}
table tr:nth-child(odd) { background-color: #f0f0f0;}
table th { background-color: #206996; color: white; padding: 5px;}
table tr td:nth-child(n+4),table tr td:first-child { text-align: center;}
table tr td:nth-child(-n+4) { padding: 5px;}
<div class="tabs"> <div class="tab" id="all"> <a href="?status=all">All tasks</a> </div> <div class="tab" id="running"> <a href="?status=running">Running tasks</a> </div> <div class="tab active" id="completed"> <a href="?status=completed">Completed tasks</a> </div></div><div class="table-wrapper"> <table id="running-tasks"> <tr> <th>ID</th> <th>Title</th> <th>Description</th> <th>Priority</th> <th>Done</th> <th>Update</th> </tr> <tr id="row9" class="done"> <td> 9 </td> <td> Learn Django </td> <td> Learn Django for work urgentl… </td> <td> High </td> <td> <input id="9" type="checkbox" name="done"> </td> <td> <a href="/todo/update/9/"><img src="/static/todo/img/edit-16.png"></a> <a href="/todo/delete/9/"><img src="/static/todo/img/delete-16.png"></a> </td> </tr> </table>
Multiple divs with margin to fill parent width
Flexbox got you :) :
Body {background:cyan;}.parent { text-align:center; margin:0px; width:100%; padding:0px; background:blue; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; } .child{ padding:15px 25px; background:#f00; list-style-type:none; width:inherit; margin:5px;}
.child:nth-child(2n) {background:green;}
<div class="parent"><div class="child">sometext</div><div class="child">somemoretext</div><div class="child">sometext</div><div class="child">sometext</div></div><div class="parent"><div class="child">somemoretext</div><div class="child">sometext</div></div><div class="parent"><div class="child">somemoretext</div><div class="child">somemoretext</div><div class="child">sometext</div></div
>
Related Topics
Disappearing Position Fixed Header in iOS7 Mobile Safari
How to Change the Style of a Ant-Design 'Select' Component
Css: What This Asterisk (*) Does
Font-Face Not Working in Ie, Otf Font
Why Is the # Selector of Lesser Specificity Than Anything
How to Center One Image Over Another
Which Is Superior, CSS Transparency or Png Transparency
Fontawesome Does Not Work When Served by Iis
Using Negative Integers with Implicit Rows in CSS Grid
CSS Selection Color Behaving Strangely on Chrome
CSS Font-Face with the Arabic Fonts
Css3 Flexbox Compatibility Problems with Firefox and Safari
Jquery Mobile Textarea: How Does It Use 'Rows' Attribute
How to Prevent Hidden Element to Be Shown When Focused in Chrome