Member Avatar for Jon_7

On my page (http://www.50allstars.com/2017/10/test.html) I'm attempting to align some divs, but the middle div shifts downward whenever I view it on mobile. I've tried adjusting widths, maybe it has something to do with the device-width property, but I really have no clue. Any help would be great. I've included screenshots of both desktop and mobile, and you can view the source code on the page. THANKS!

PS This is my absolute first time experimenting with doing any sort of layout that didn't include a TABLE. I was told by folks on this site that I needed to update my knowledge to this century, so I'm giving it a go. It's very difficult, but I've come so far in just one day. So be easy on me please :-)

ATTACHMENTS:

desktop.png 232.07 KB
  • 1 Contributor
  • 1 Reply
  • 1K Views
  • 2 Weeks Discussion Span
  • Latest Post Latest Post by Jon_7

Dani AI

Generated

This is the classic inline‑block baseline issue — good catch, . By default inline-block elements line up on the text baseline, so when adjacent boxes differ in height (or contain images/text with descenders or different line-height) the middle one can appear pushed down. Adding vertical-align: top forces all inline-block boxes to start at the same top line, which is why your quick fix worked.

Practical options to apply immediately:

/* quick fix for inline-block columns */
.column { display: inline-block; vertical-align: top; }
/* more robust modern approach (recommended) */
.row { display: flex; align-items: flex-start; }
.column { flex: 1; /* or set widths as needed */ }

Troubleshooting checklist if it still behaves oddly: inspect computed styles in mobile/dev tools to confirm display and vertical-align; check for stray whitespace or line-height differences between elements; confirm images are not adding extra descender space (set img { display:block; } or vertical-align); and include the responsive meta tag so the layout scales on phones:

<meta name="viewport" content="width=device-width, initial-scale=1">

Note: vertical-align only affects inline-level or table-cell elements. For predictable, responsive layouts consider flexbox or CSS grid — they avoid baseline surprises and make vertical alignment explicit.

Member Avatar for Jon_7

I figured it out eventually. Adding vertical-align:top to one of the containers worked like a charm.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.