Support » Fixing WordPress » How to Break Space inside Div Box

  • hi i need help with my box, 95% done
    i just dont know how to break space the box.

    https://i.imgur.com/Pibl7GR.png
    https://i.imgur.com/uccM6IQ.png

    try this code – https://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    * {
        box-sizing: border-box;
    }
    .header, .footer {
        background-color: grey;
        color: white;
        padding: 15px;
    }
    .column {
        float: left;
        padding: 15px;
    }
    .clearfix::after {
        content: "";
        clear: both;
        display: table;
    }
    .menu {
        width: 118%;
    }
    .content {
        width: 125%;
    }
    .menu ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
    .menu li {
    
        padding: 18px;
        margin-bottom: 8px;
        background-color: #33b5e5;
        color: #ffffff;
    }
    .menu li:hover {
        background-color: #0099cc;
    }
    .containerMenu {
        display:flex;
    }
    
    .containerMenu #m1
    {
       order:1;
       margin-right:20px;
    }
    .containerMenu #m2
    {
       order: 2;
        padding: 2px;
        margin-bottom: 12px;
    }
    .containerMenu #m3 {
        order: 3;
       margin-right:20px;
    }
    .containerMenu #m4 {
        order: 4;
        padding: 2px;
        margin-bottom: 12px;
    }
    .containerMenu #m5
    {
       order:5;
       margin-right:20px;
    }
    .containerMenu #m6 {
        order: 6;
        padding: 2px;
        margin-bottom: 12px;
    }
    
    </style>
    </head>
    <body>
    
    <div class="header">
    </div>
    
    <div class="clearfix">
      <div class="column menu">
        <ul class="containerMenu">
       <p id="m2"><Strong> Test - text appear here testing testing testing test</strong></p>
       <p id="m4"><Strong> Test - text appear here testing testing testing test</strong></p>
        <p id="m6"><Strong> Test - text appear here testing testing testing test</strong></p>
          <li id="m1">Part 1</li>
          <li id="m3">Part 3</li>
          <li id="m5">Part 5</li>
    
        </ul>
      </div>
    </div>
    
    <div class="footer">
      <p>Welcome</p>
    </div>
    
    </body>
    </html>
    • This topic was modified 5 days, 11 hours ago by  skadiog.
Viewing 4 replies - 1 through 4 (of 4 total)
  • If I understand correctly, you’ll need to change your HTML too. What you have isn’t correct. Here’s an example of what I think you’re looking for:
    https://jsfiddle.net/kybwq22z/

    Your full, edited code below:

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    * {
        box-sizing: border-box;
    }
    .header, .footer {
        background-color: grey;
        color: white;
        padding: 15px;
    }
    .column {
        float: left;
        padding: 15px;
    }
    .clearfix::after {
        content: "";
        clear: both;
        display: table;
    }
    .menu {
        width: 118%;
    }
    .content {
        width: 125%;
    }
    .menu ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
    .menu li{
        display: block;
        clear: both;
    }
    .menu li span{
    
        padding: 18px;
        margin-bottom: 8px;
        background-color: #33b5e5;
        color: #ffffff;
        float: left;
        margin-right: 15px;
    }
    .menu li span:hover {
        background-color: #0099cc;
        cursor: pointer;
    }
    .containerMenu {
        display:block;
    }
    .menu li p{
        padding: 15px;
    }
    
    </style>
    </head>
    <body>
    
    <div class="header">
    </div>
    
    <div class="clearfix">
      <div class="column menu">
        <ul class="containerMenu">
          <li id="m1"><span>Part 1</span><p id="m2"><Strong> Test - text appear here testing testing testing test</strong></p></li>
          <li id="m3"><span>Part 3</span><p id="m4"><Strong> Test - text appear here testing testing testing test</strong></p></li>
          <li id="m5"><span>Part 5</span><p id="m6"><Strong> Test - text appear here testing testing testing test</strong></p></li>
    
        </ul>
      </div>
    </div>
    
    <div class="footer">
      <p>Welcome</p>
    </div>
    
    </body>
    </html>

    ^V

    @skadiog,

    It seem the site you have listed in your profile has some serious security issues:

    https://sitecheck.sucuri.net/results/mp3forest.com/

    Please help all here in the forums and remove that from your profile.

    thanks alot!!!
    and @swansonphotos how and why i got injected the ** what should i do

    Please stop using my tag here and start reading the forum instead of posting junk posts and providing a link to a malware littered mp3 site.

Viewing 4 replies - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.