Trying to align divs inside a div horizontally

HTML & CSS
1

I’m trying all the divs inside the row class div to align horizontally nicely using the following JS Fiddle. But it all seems to be messed up. What am I doing wrong here in terms of CSS?

2

The problem is you are limiting the block width to just 100px. That is not big enough to hold the content you put in there.

3

Thanks. I modified it and now it’s better as shown here

what if I have to reduce the space between the button and the last text input for Ending Lane # ?

4

That looks better, but on a narrow screen the bocks don’t fit at the 600px you give them.
It may be better to leave the width at auto and use justify-content and gap deal with the spacing.

1 Like
5

Try deleting the two <br> tags and using this CSS:

.row {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: end;
}
.block {
  padding: 5px 1%;
}
input, select {
  display: block;
}

If you drag the width of the ‘result’ area in JSFiddle down to 320 pixels (the width of smallest smartphones) you will see that the result is responsive due to the wrapping.

2 Likes
6

Thanks. Yes, looking better: https://jsfiddle.net/y67vep34/

7

Increase this width of .block using min-width: 100px;. change the .row to justify-content: space-around; by which the blocks spread evenly. also add flex-wrap:wrap; to .row, it handle blocks in smaller screens.

1 Like
8

One issue I’m facing after adding a select2 library. So if I don’t use the library, the layout is looking like this:

image
image804×148 2.63 KB

However, if I use the library, the Select Dropdown: text is moving on the left hand side instead of staying on top as shown in this JSFiddle

image
image784×86 2.43 KB

Any idea why this is happening and if it’s possible to fix it?

9

The CSS from the select2 library is givng the select element absolute positioning.
It will be difficult to override because their CSS makes liberal use of !important

10

Insert <br> here:
<label class="label" for="startLane">Select Dropdown:<br></label>

2 Likes
11

Thanks. That worked. Is it possible to make the input text box of starting Lane # and Ending Lane # look like the Select Dropdown one using CSS? I believe I need to add a rounded border to the other two text boxes. It’s kind of looking bigger than the other two.

12

Try deleting:

input, select {
  display: block;
}

and replacing it by:

input {
  display: block;
  height: 22px;   /* so same height as select */
  border-radius: 4px;
}
input[type="submit"] {
  height: 28px;  /* so button is same height as select and inputs */
  }
select {
  width: 150px;  /* so --Please Select-- text is all visible */
}

Paul will not like the magic numbers :grinning:.

2 Likes
13

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.