How to horizontally center a floating element of a variable width?

by

Assuming the element which is floated and will be centered is a div with an id="content"
… 

<body>
<div id="wrap">
   <div id="content">
   This will be centered
   </div>
</div>
</body>

And apply the following CSS:

#wrap {
    float: left;
    position: relative;
    left: 50%;
}

#content {
    float: left;
    position: relative;
    left: -50%;
}

Here is a good reference regarding that.

More Related Contents:

  1. How to Create Grid/Tile View? [duplicate]
  2. Why is a flex item limited to parent size?
  3. Floating elements within a div, floats outside of div. Why?
  4. CSS Floating Divs At Variable Heights [duplicate]
  5. CSS transition effect makes image blurry / moves image 1px, in Chrome?
  6. Bootstrap Center Vertical and Horizontal Alignment
  7. Center a column using Twitter Bootstrap 3
  8. Center a position:fixed element
  9. Why does overflow: hidden have the unexpected side-effect of growing in height to contain floated elements?
  10. How to create equal height columns in pure CSS [duplicate]
  11. Z-Index Relative or Absolute?
  12. How do I center an SVG in a div?
  13. Aligning two divs side-by-side [duplicate]
  14. How to vertically middle-align floating elements of unknown heights?
  15. Why does CSS float not change the width of the following div?
  16. Make child visible outside an overflow:hidden parent
  17. margin-top not working with clear: both
  18. Why “overflow: hidden” clears a float?
  19. Split Div Into 2 Columns Using CSS
  20. Why centering with margin 0 auto works with display:block but does not work with display:inline-block ?
  21. Make floating child visible outside an overflow:hidden parent
  22. CSS Centering with Transform
  23. Sizing and positioning elements based on window width
  24. Div side by side without float
  25. Expanding the parent container with 100% height to account for floated content
  26. CSS to stop text wrapping under image
  27. Creating CSS3 Circles connected by lines
  28. How to fix Internet explorer 7 bug when using percentage widths for layout?
  29. Stacking DIVs on top of each other?
  30. CSS: clean solution to the margin collapse issue when floating an element

Leave a Comment