Aligning items

HTML & CSS
1

In the Pure Css Crossword, how would you put the two <dl> classes for the across and down clues side by side in html and css? Would you use flexbox?

Reference:
https://www.sitepoint.com/how-built-pure-css-crossword-puzzle/

2

I don’t see the dl in that article (by skimming), but don’t have time to fully study it.

I have been known to use floats on the dt in a dl to get the dt and dd side-by-side.
The reason for float is, it can handle the dd being longer and wrapping to new lines.

2 Likes
3

I think the OP just wanted 2 DLs side by side.:wink:

Maybe like this

4

Yes!! Thanks.

5

Why is the opening tag different than the closing tag, just asking?
Can put position that div, with the across and down clues, to another part of html, say on want the clues to appear on the side or under puzzle?

6

Whoops sorry :blush: that was a typo from trying to code on a mobile. I should have known better. Changed now.

7

Yes you can place it where you like but we would need to know the structure of the code that goes before it.

You’ve been shown how to put things side by side so you can just use the same logic where you need to if you build the right structure for it to happen.

It may be worth you taking a little time to play around with flexbox just to get the hang of it as this seems to be a coding practice for you anyway and I feel guilty just to hand out solutions. This should be a learning process so that you can do this for yourself so I would like to see you try yourself first and then we can point out where you went wrong (or right). :slight_smile:

1 Like
8

Ok
Thanks

9

I tried the codepen shown above in Post 3 and I get two columns, but they are stacked, instead of side by side and all the type is left justified

10

Post your code that is causing problems. Just make a small stand alone test case with enough of your code to show the problem.

Use the following page with the code from post#3.
Edit the page with the code your using and then re-post it so we can see what your doing.


<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test Page</title>
<style>
.clues {
  display: flex;
}
.clues dl {
  margin: 1rem;
  min-width: 200px;
  max-width: 300px;
  background: #f9f9f9;
  padding: 5px;
}
.clues dt {
  font-weight: bold;
  margin: 0 0 1rem;
}
.clues dd {
  margin: 0;
  padding: 5px 10px;
}
</style>
</head>

<body>

<div class="clues">
  <dl class="across">
    <dt>Across</dt>
    <dd>Clue 1</dd>
    <dd>Clue 2</dd>
    <dd>Clue 3</dd>
    <dd>Clue 4</dd>
    <dd>Clue 5</dd>
    <dd>Clue 6</dd>
    <dd>Clue 7</dd>
    <dd>Clue 8</dd>
    <dd>Clue 9</dd>
  </dl>
  <dl class="down">
    <dt>Down</dt>
    <dd>Clue 1</dd>
    <dd>Clue 2</dd>
    <dd>Clue 3</dd>
    <dd>Clue 4</dd>
    <dd>Clue 5</dd>
    <dd>Clue 6</dd>
    <dd>Clue 7</dd>
    <dd>Clue 8</dd>
    <dd>Clue 9</dd>
  </dl>
</div>

</body>
</html>
11

Screen
Screen1600Ă—900 492 KB

This is where I inserted the code into the CSS Crossword. I followed the same format in making the classes, but comes out left justified and not two columns. I used the same CSS u gave earlier.
Thanks

12

Your <dl> element has an extra class crossword-clues__list , that was not used in the examples given to you.

Obviously you have some extra styles in your CSS that it is picking up. So your code is different from the examples.

When we ask you to post your code in the CSS forum that means post your html and css since they work together.

We are not able to reproduce your problems from screenshots.

Once again, post all your relevant code for the clues, HTML and CSS. Use the code tag to post it, the “Preformatted text” icon </>

2 Likes
13

Your first <dl> is not closed properly. You have a second <dl> opening tag instead of a closing </dl> tag.

First step with any issue is to run your code through the validators to check for typos and other errors.

For HTML: https://validator.w3.org

For CSS: https://jigsaw.w3.org/css-validator/

1 Like
14

How would you code 2 columns side by side in html/css:
Across Down

  1. Clue word 1. Clue word
15

@PaulOB gave you one method in post 3.

If that still isn’t working for you, then post the full HTML and CSS code which you are using (code, not screenshots) so we can see the issue.

2 Likes
16

Did you mean something else because we already answered that question in your first post?

Hmm not sure what that is supposed to represent as its a little confusing :slight_smile:

The more accurate information you give us then strangely enough the better replies you will get :wink:

2 Likes
17

Ok. True dat!!
As in a crossword puzzle, you have two columns, across and down side by side. And there are clues for each and each clue is numbered, hence the diagram in post14.
In your earlier post, there were the titles, across and down and the words clue 1, but I want 1. Clue
I tried an ordered list, but that results in consecutive numbers and in a crossword numbered clues are not always consecutive. Does that make sense?.:blush:

18

It you want the clue number beside the clue (which makes perfect sense), why can’t you just enter it in the <dd>?

<dd>1. The first clue</dd>

19

Yes I understand now :slight_smile:

As @TechnoBear said the easiest way is just to number them yourself as there is no logical order. I would use a b element and set it to inline-block and give it a width large enough for the numbers you are using to keep the column uniform.

I’ve updated the codepen with an example.

Or a much more complicated example using CSS grid and display:contents (as subgrid is not supported yet).

The above is for example only and not ready for primetime but does away with magic numbers.

1 Like
20

A post was split to a new topic: Showing message on completion of puzzle