CODEWITHSUNDEEP
htmlcss
John Hamlett IV
John Hamlett IV

Reputation: 495

<p> not adding page break

I am trying to create a grid image, that shows the path through a maze.

I have everything working except for the grid system doesn't page break.

Example

Example

The desired result would be like this without space between the rows

Desired

Here is the source code (Note: this will be auto-generated by the app when I can get the display correct)

.centered {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transform: -webkit-translate(-50%, -50%);
    transform: -moz-translate(-50%, -50%);
    transform: -ms-translate(-50%, -50%);
}

.block {
    float: left;
    width: 20px;
    height: 20px;
    border: 1px solid rgba(0, 0, 0, .2);
}

.red {
    background: red;
}

.white {
    background: white;
}

.green {
    background: green;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="assets/style/form_styles.css">
    <meta charset="UTF-8">
    <title>Title</title>
</head>
    <body>
        <p>
            <div class="block red"></div>
            <div class="block red"></div>
            <div class="block red"></div>
            <div class="block red"></div>
            <div class="block red"></div>
            <div class="block red"></div>
            <div class="block red"></div>
            <div class="block red"></div>
            <div class="block red"></div>
            <div class="block red"></div>
        </p>
        <p>
            <div class="block red"></div>
            <div class="block green"></div>
            <div class="block green"></div>
            <div class="block green"></div>
            <div class="block white"></div>
            <div class="block red"></div>
            <div class="block white"></div>
            <div class="block white"></div>
            <div class="block white"></div>
            <div class="block red"></div>
        </p>
        <p>
            <div class="block red"></div>
            <div class="block white"></div>
            <div class="block red"></div>
            <div class="block green"></div>
            <div class="block red"></div>
            <div class="block red"></div>
            <div class="block white"></div>
            <div class="block red"></div>
            <div class="block white"></div>
            <div class="block red"></div>
        </p>
        <p>
            <div class="block red"></div>
            <div class="block white"></div>
            <div class="block red"></div>
            <div class="block green"></div>
            <div class="block red"></div>
            <div class="block red"></div>
            <div class="block white"></div>
            <div class="block red"></div>
            <div class="block white"></div>
            <div class="block red"></div>
        </p>
        <p>
            <div class="block red"></div>
            <div class="block white"></div>
            <div class="block red"></div>
            <div class="block green"></div>
            <div class="block green"></div>
            <div class="block green"></div>
            <div class="block green"></div>
            <div class="block red"></div>
            <div class="block green"></div>
            <div class="block red"></div>
        </p>
        <p>
            <div class="block red"></div>
            <div class="block white"></div>
            <div class="block red"></div>
            <div class="block white"></div>
            <div class="block red"></div>
            <div class="block red"></div>
            <div class="block green"></div>
            <div class="block red"></div>
            <div class="block green"></div>
            <div class="block red"></div>
        </p>
        <p>
            <div class="block red"></div>
            <div class="block white"></div>
            <div class="block white"></div>
            <div class="block white"></div>
            <div class="block white"></div>
            <div class="block red"></div>
            <div class="block green"></div>
            <div class="block green"></div>
            <div class="block green"></div>
            <div class="block red"></div>
        </p>
        <p>
            <div class="block red"></div>
            <div class="block red"></div>
            <div class="block red"></div>
            <div class="block red"></div>
            <div class="block red"></div>
            <div class="block red"></div>
            <div class="block red"></div>
            <div class="block red"></div>
            <div class="block red"></div>
            <div class="block red"></div>
        </p>
    </body>
</html>

I have tried removing the
and I get the straight line.

How can I get the rows to actually be rows?

Upvotes: 0

Views: 41

Answers (1)

disinfor
disinfor

Reputation: 11533

As Alon Eitan pointed out <p> tags aren't probably the best here. If you have control over the markup output, I would suggest changing the wraps to <div> or something similar:

<div class="rowwrap">
            <div class="block red"></div>
            <div class="block red"></div>
            <div class="block red"></div>
            <div class="block red"></div>
            <div class="block red"></div>
            <div class="block red"></div>
            <div class="block red"></div>
            <div class="block red"></div>
            <div class="block red"></div>
            <div class="block red"></div>
        </div>
        <div class="rowwrap">
            <div class="block red"></div>
            <div class="block green"></div>
            <div class="block green"></div>
            <div class="block green"></div>
            <div class="block white"></div>
            <div class="block red"></div>
            <div class="block white"></div>
            <div class="block white"></div>
            <div class="block white"></div>
            <div class="block red"></div>
        </div>
        <div class="rowwrap">
            <div class="block red"></div>
            <div class="block white"></div>
            <div class="block red"></div>
            <div class="block green"></div>
            <div class="block red"></div>
            <div class="block red"></div>
            <div class="block white"></div>
            <div class="block red"></div>
            <div class="block white"></div>
            <div class="block red"></div>
        </div>
        <div class="rowwrap">
            <div class="block red"></div>
            <div class="block white"></div>
            <div class="block red"></div>
            <div class="block green"></div>
            <div class="block red"></div>
            <div class="block red"></div>
            <div class="block white"></div>
            <div class="block red"></div>
            <div class="block white"></div>
            <div class="block red"></div>
        </div>
        <div class="rowwrap">
            <div class="block red"></div>
            <div class="block white"></div>
            <div class="block red"></div>
            <div class="block green"></div>
            <div class="block green"></div>
            <div class="block green"></div>
            <div class="block green"></div>
            <div class="block red"></div>
            <div class="block green"></div>
            <div class="block red"></div>
        </div>
        <div class="rowwrap">
            <div class="block red"></div>
            <div class="block white"></div>
            <div class="block red"></div>
            <div class="block white"></div>
            <div class="block red"></div>
            <div class="block red"></div>
            <div class="block green"></div>
            <div class="block red"></div>
            <div class="block green"></div>
            <div class="block red"></div>
        </div>
        <div class="rowwrap">
            <div class="block red"></div>
            <div class="block white"></div>
            <div class="block white"></div>
            <div class="block white"></div>
            <div class="block white"></div>
            <div class="block red"></div>
            <div class="block green"></div>
            <div class="block green"></div>
            <div class="block green"></div>
            <div class="block red"></div>
        </div>
        <div class="rowwrap">
            <div class="block red"></div>
            <div class="block red"></div>
            <div class="block red"></div>
            <div class="block red"></div>
            <div class="block red"></div>
            <div class="block red"></div>
            <div class="block red"></div>
            <div class="block red"></div>
            <div class="block red"></div>
            <div class="block red"></div>
        </div>

CSS: 

.centered {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transform: -webkit-translate(-50%, -50%);
    transform: -moz-translate(-50%, -50%);
    transform: -ms-translate(-50%, -50%);
}

.rowwrap {
  margin: 15px 0;
}

.rowwrap::after {
  content: '';
  display: block;
  clear: both;
}

.block {
    float: left;
    width: 20px;
    height: 20px;
    border: 1px solid rgba(0, 0, 0, .2);
}

.red {
    background: red;
}

.white {
    background: white;
}

.green {
    background: green;
}

Because all your blocks float, you'll also need to clear them before the next row. I added a pseudo element to the rowwrap to do that.

Fiddle with working example: https://jsfiddle.net/zjedzyje/

Upvotes: 2

Related Questions