CSS fill remaining width

by

Use calc!

https://jsbin.com/wehixalome/edit?html,css,output

HTML:

<div class="left">
  100 px wide!
  </div><!-- Notice there isn't a space between the divs! *see edit for alternative* --><div class="right">
    Fills width!
  </div>

CSS:

.left {
  display: inline-block;
  width: 100px;

  background: red;
  color: white;
}
.right {
  display: inline-block;
  width: calc(100% - 100px);

  background: blue;
  color: white;
}

Update: As an alternative to not having a space between the divs you can set font-size: 0 on the outer element.

More Related Contents:

  1. How to create one vertical column in between rows in Flexbox [closed]
  2. How can i make this wave effect on both bottom and top
  3. How to apply a CSS filter to a background image
  4. Why is a flex item limited to parent size?
  5. What does !important mean in CSS?
  6. Transparent text cut out of background
  7. CSS3 selector :first-of-type with class name?
  8. Remove blue border from css custom-styled button in Chrome
  9. How do I use /deep/ or >>> or ::v-deep in Vue.js?
  10. React.js inline style best practices [closed]
  11. Internet Explorer’s CSS rules limits
  12. Pure CSS checkbox image replacement
  13. CSS: Set a background color which is 50% of the width of the window
  14. Does element width include padding?
  15. Cols, colgroups and css “:hover” pseudoclass
  16. Why does the linear-gradient disappear when I make an element position:absolute?
  17. Usage of display property of flex box items
  18. Disable zoom on a div, but allow zoom on the page (an alternate div)
  19. CSS Selector for
  20. bootstrap button shows blue outline when clicked
  21. Make scrollbars only visible when a Div is hovered over?
  22. How to Decrease Image Brightness in CSS
  23. Is CSS Turing complete?
  24. Maintain div aspect ratio according to height
  25. display:block inside display:inline
  26. How to display and hide a div with CSS?
  27. Can I define a class name on paragraph using Markdown?
  28. Check scrolling with CSS
  29. Are alternate nested styles possible in CSS?
  30. Continuous CSS rotation animation on hover, animated back to 0deg on hover out

Leave a Comment