Databases
StackOverflow2013
Postsdbo
POCSS floated div, not shrinking to content
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS floated div, not shrinking to content
    primarykey
    data
    text
    <p>This is very odd to me, and although I've searched, everyone seems to have the opposite problem to me (a floated div shrinking)!</p> <p>I have this page: <a href="http://www.tameside.gov.uk/test/news" rel="nofollow">http://www.tameside.gov.uk/test/news</a>, which uses PHP to generate the divs at the top for various news stories, and it works fine. However the items (which are floated divs) are in a div which is floated left, which for some reason isn't shrinking to those items (which are it's only contents).</p> <p>As far as I was aware, a floated div always shrunk to it's contents, but this particular one is expanding to 100% of the page it seems. I've coloured the background of the containing div in grey to show you what I mean.</p> <p>I want it to shrink to the contents so that I could use a centering trick, and it would then center the div no matter how many divs are in the top news items. But because it's not shrinking, the trick obviously isn't working.</p> <p>The CSS for each of the news item divs is below:</p> <pre class="lang-css prettyprint-override"><code>.news-top-item { border-radius: 10px; border-color: #3f7dae; border-style: solid; border-width: 2px; float: left; width: 19%; text-align: center; margin-right: 0.5%; height: 13em; padding-top: 0.5em; cursor: pointer; position: relative; } </code></pre> <p>They've also got a span inside that has a little CSS attached to it to make the whole thing a link:</p> <pre class="lang-css prettyprint-override"><code>.news-top-item span { display: inline; position:absolute; width:100%; height:100%; top:0; left: 0; z-index: 2; background-image: url('/tmbc_images/include/1pixel.gif'); cursor: pointer; } </code></pre> <p>I doubt that's interfering, but have put it in just in case.</p> <p>The outer div has only 'float: left' and the background colour applied to it.</p> <p>Any help would be much appreciated.</p> <p>Thanks,</p> <p>James </p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USEliran Malka
    1. USJames R
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POCSS floated div, not shrinking to content
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POCSS floated div, not shrinking to content
      1. This table or related slice is empty.
      1. VTApproveEditSuggestion
    1. COAny chance you could drop the relevant parts of the (rendered) HTML and CSS into a [JS Fiddle](http://jsfiddle.net/), with Lorem-ipsum-ed content if required? That way we can play with it, *and* see the code in one place.
      singulars
      1. POCSS floated div, not shrinking to content
      1. USDavid Thomas
    2. COHi, This is the JS Fiddle: http://jsfiddle.net/W8Dn6/, seems to be doing the same in there too.
      singulars
      1. POCSS floated div, not shrinking to content
      1. USJames R
    3. CORight, I've made the top-news-item divs fixed width and used JavaScript to dynamically set the width of the containing div and center it using margin: auto. I've no idea why the original idea isn't working, I was hoping to use this method: http://www.tightcss.com/centering/center_variable_width.htm to center it, thus not needing JavaScript and giving a liquid layout. But for some reason, even that method doesn't work when I make the top items a fixed width (and the float wraps as expected). If anyone can get it to work with a liquid layout, I'd really appreciate it.
      singulars
      1. POCSS floated div, not shrinking to content
      1. USJames R
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload