margin-right and left, margin, display:block/inline-block auto not working on div-CodePudding

I have a scenario in AEM which is on container level default AEM has the CSS of float: left which cannot be removed since the entire flow will be affected, but on the same div, I need to achieve max-width:1280px with center-aligned. The following code where the class container cannot be removed and I have to add an extra class for achieving it. The code I have tried so far. Note: I cannot remove float property since its core component. Any help will be appreciated !!

.custom-container{
  border: 1px solid red;
  max-width: 1280px;
  margin-left: auto;
  margin-right:auto;
  display: inline-block;
 }
.container{
    float: left;
    clear: none;
    width: 100%;
    box-sizing: border-box;
}

<div class="container custom-container">
<div class="sub-value">
 <p>is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  <p>is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  </div>
</div>

CodePudding user response：

Use some math to calculate the margin manually

.custom-container {
  border: 1px solid red;
  max-width: 1280px;
  margin: 0 max(0px, (100% - 1280px)/2);
  display: inline-block;
}

.container {
  float: left;
  clear: none;
  width: 100%;
  box-sizing: border-box;
}

<div class="container custom-container">
  <div class="sub-value">
    <p>is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived
      not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
      software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    <p>is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived
      not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
      software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  </div>
</div>

CodePudding user response：

You can try the following code of css as follows:

.custom-container {
border: 1px solid red;
max-width: 1280px;
margin-left: auto;
margin-right: auto;
display: block;
float: none !important;
}

CodePudding user response：

I don't know what you are allowed to change and what not but this may work:

<html>
  <head>
    <script>
      function changeWidth(newWidth) {
        document.getElementById("test").style.width = newWidth;
      }
    </script>
    <style media="all">
      .custom-container {
        max-width: 100%;  /* made it 100% */
        margin-left: auto;
        margin-right: auto;
        display: inline-block;
      }
      .container {
        float: left;
        clear: none;
        width: 100%;
        box-sizing: border-box;
      }
      .sub-value {
        border: 1px solid red;
        max-width: 1280px;   /* restricted */
        margin: 0 auto;     /* centering */
      }
    </style>
  </head>
  <body>
    <div class="container custom-container">
      <div class="sub-value">
        <p
          >is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
          been the industry's standard dummy text ever since the 1500s, when an unknown
          printer took a galley of type and scrambled it to make a type specimen book. It
          has survived not only five centuries, but also the leap into electronic
          typesetting, remaining essentially unchanged. It was popularised in the 1960s
          with the release of Letraset sheets containing Lorem Ipsum passages, and more
          recently with desktop publishing software like Aldus PageMaker including
          versions of Lorem Ipsum.</p
        >
        <p
          >is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
          been the industry's standard dummy text ever since the 1500s, when an unknown
          printer took a galley of type and scrambled it to make a type specimen book. It
          has survived not only five centuries, but also the leap into electronic
          typesetting, remaining essentially unchanged. It was popularised in the 1960s
          with the release of Letraset sheets containing Lorem Ipsum passages, and more
          recently with desktop publishing software like Aldus PageMaker including
          versions of Lorem Ipsum.</p
        >
      </div>
    </div>
  </body>
</html>

CodePudding user response：

Just copy paste .custom-container{ border: 1px solid red; max-width: 1280px; margin: auto; tex-align: center; }