how to make a text ele to the right of a left floated ele automatically occupy the rest width?


Tags: css

Problem :

<div style="width:<?php echo $w; ?>">
    <div style="float:left;margin-right:10px;width:200px">whatever</div>
    <h2 style="border-bottom:solid 1px black">title</h2>
</div>

By default, the width of h2 would be $w, and the bottom border will strike the inner div, I want the h2 to automatically occupy the rest width, no matter what $w's value is, the h2's width should be $w - 200 - 10. How to achieve this in pure CSS?

PS: if I set css h2{float:left}, h2's width would depend on its inner text's length. To have the h2 element occupy the rest of the width (so that I can have a beautiful bottom border) I have to manually set a width value for h2, which is what I'm trying to avoid.



Solution :

From the spec,

The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap the margin box of any floats in the same block formatting context as the element itself.

Therefore, you can just add

h2 {
  overflow: hidden;
}

div {
  width: 500px; /* $w */
}
div > div {
  float: left;
  margin-right: 10px;
  width: 200px;
}
h2 {
  border-bottom: solid 1px black;
  overflow: hidden;
}
<div>
  <div>whatever</div>
  <h2>title</h2>
</div>

You may also want to style the outer div with overflow: hidden just in case the floated element is taller than the h2.


    CSS Howto..

    how to prevent datepicker css from changing

    After adding a “current” class to an active item in a menu using jQuery, how can css changes be made to the container of the item?

    How to use externel CSS and (static) images in Go, Google App Engine

    W3.CSS how to make container centered inside another container

    Auto-scaled image not shown correctly with IE 10

    How do i style a list within a list?

    How to create an enumerated tabular environment in HTML/CSS?

    Building a DOS-feel script. How to make the command line?

    How to overlay “transformed” element?

    jquery/css: how to implement a wipe left animation on background-color of a div

    How to apply StyleSheet to MVC3 website?

    How to prevent HTML elements from being pushed down the page

    How to set display none on tag using css?

    How can I force an image to be no larger than the section it's in?

    How to filter and show only applied CSS in Chrome Developer Tools (like Firebug in Firefox)

    CSS how to make a perfectly alligned left (or right) border?

    How to get access to file css in JSF 2.0

    How to add spacing to text start in css

    How to refresh div using ajax refresh?

    How To Create A Responsive Horizontal Layout Using CSS?

    PostCSS: How to conditionally add a new rule based on declaration in current rule?

    How to stretch items in menu (from right to left) - HTML and CSS

    How can I make the contents of a table cell overflow vertically without also expanding the table cells height?

    How can I show a loading screen while a really large image is loading?

    How do I avoid gap when using z-index in CSS?

    How to see CSS boxes in firefox inspector

    Search type links in Yahoo - how to implement similar behaviour

    How to catch this nth-child() with css

    How to remove the margin at the top of my page

    Switching styles (Class) on a function that show and hide a div tag content