Member Avatar for Silviu_1

This is what I have now:

Click Here

How can I use CSS or HTML or both to

1.move "Total number of subordinates" on the right top corner of that textarea;
2. put some space between them
3. align it with the next which should fit the screen area? :D

  • 2 Contributors
  • 2 Replies
  • 126 Views
  • 35 Minutes Discussion Span
  • Latest Post Latest Post by Silviu_1

Dani AI

Generated

A compact, reliable fix is to group the label and the counter into a small header above each textarea (or overlay the counter inside the textarea container), and use modern layout rules instead of floats. As hinted, the HTML structure matters — using Flexbox or Grid prevents the common float/clear issues that make the next rows “drop” when widths or margins exceed the container.

A minimal Flexbox pattern (keeps the counter at the top-right of the field header, textarea full-width):

<div class="field">
  <div class="field-head">
    <label for="notes">Notes</label>
    <span class="counter" id="notes-count">Total number of subordinates</span>
  </div>
  <textarea id="notes" aria-describedby="notes-count"></textarea>
</div>
.field-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.field textarea { width: 100%; box-sizing: border-box; padding: 8px; }
.counter { font-size: .9em; color: #666; }

For a tighter visual (counter pinned over the top-right of the textarea), wrap the field with position: relative and absolutely position the counter. Give the textarea a little top padding or the counter a white background to avoid overlap and maintain legibility. Add aria-describedby to keep the counter available to assistive tech.

Common causes for the “next rows move down” symptom: combined column widths + padding exceed 100%, floats not cleared, or missing box-sizing: border-box. A quick troubleshooting checklist: inspect computed widths in DevTools, set * { box-sizing: border-box; }, and switch floats to Flexbox/Grid. For reference, Flexbox and positioning documentation: Flexbox basics and position.

Recommended Answers

All 2 Replies

Member Avatar for gabrielcastillo

looks like your html is broken.. but to answer your question you should use some div's.
for the section you are talking about I would split into two divs and float them next to one another.

Example:

#left-div {float:left; width:50%;}
#right-div {float:left; width:50%}
.clearFix {clear:both;}


<div id="left-div">
    <label>TEXT</label>
    <textarea cols="" rows="" name=""></textarea>
</div>
<div id="right-div">
    <label>TEXT</label>
    <textarea cols="" rows="" name=""></textarea>
</div>
<div class="clearFix"></div>

Looking at your code I would sugest reading up on some modern html technics and refactoring your code abit.

Member Avatar for Silviu_1

I did something along your lines but the next rows just moved down a bit.. :-?

It is a bit in a hurry, i have a deadline for tomorrow, and i started the voyage into web design this Monday so yeah.. i know it's a bit messy, but at least to get the things done :) thank you, btw

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.