Member Avatar for itsjareds

I can't seem to get the word "FrankenBot" aligned correctly with the image above it. I want the word to be to the RIGHT of the image, but for some reason it is being bumped off to the next line even though the image (and the div surrounding it) is only 125 px wide.

Here is my design:

Any suggestions?

  • 4 Contributors
  • 5 Replies
  • 112 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by seodomainnames

Dani AI

Generated

A few focused checks and fixes for the kind of problem discussed by (and noted as browser-dependent by and ):

  • Common causes: the image or its wrapper is not floated, the label is inside a block-level element (100% width), a clearing rule is applied, or padding/border makes the total width exceed the parent. Also watch for browser-specific quirks in old IE.

A reliable float-based fix (works in very old and modern browsers):

.container { /* parent of image + label */
  overflow: hidden; /* contains floats */
}
.logo { float: left; width: 125px; margin-right: 10px; }
.title { margin: 0; line-height: 1.2; }

If changing layout is acceptable, a simpler modern approach is flexbox:

.row { display: flex; align-items: center; gap: 10px; }
.row img { width: 125px; height: auto; }
.row .label { margin: 0; }

Quick troubleshooting checklist: open DevTools and inspect computed display, float, clear, width, and box-sizing; temporarily outline elements (outline: 1px solid red) to see real widths; look for display:block on the label or an explicit clear; confirm the sum of widths + padding + borders fits the container. If differences appear only in old IE, try zoom: 1 (to trigger hasLayout) or display: inline as a targeted workaround.

For background reading on layout options see MDN: float and MDN: Flexbox basics.

Recommended Answers

All 5 Replies

Member Avatar for itsjareds

edit: Nevermind I fixed it, thanks.

Edited by itsjareds because: n/a
Member Avatar for zukilover

:)) it's all right .

Member Avatar for Dani

I am using Internet Explorer and I see Frankenbot appearing below the image?

Member Avatar for itsjareds

I am using Internet Explorer and I see Frankenbot appearing below the image?

Really? I cannot check for sure since I am using Linux, but I ran IE6 under Wine (a program that runs Windows executables) and the page looks alright.

The page was under continuous changes over the past day, maybe you checked while I was working on it? Thanks for replying :)

p.s. I really like the redesign of the site, I haven't been here in about a year and I reached this site through Google and was shocked :D

Member Avatar for seodomainnames

I am using Firefox, and it looks clean. Frankenbot link seems to be in the "middle column" in your code. It is above the paragraph. Looks fine to me, unless you are wanting a different look. Look at your source code, to see where it is located. Pretty clean page. You do have 18 errors on validator.w3.org, but not bad.

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.