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

    View post on imgur.com

    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 7 years, 2 months 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.

    Thread Starter skadiog

    (@skadiog)

    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)
  • The topic ‘How to Break Space inside Div Box’ is closed to new replies.