Member Avatar for skald89

<div id="mailsort">
<div><a class="mailsort" style="width:175px;" height"auto" > From </a></div>
<div><a class="mailsort" style="width:61px;" height"auto"> Date </a></div>
<div><a class="mailsort" style="width:248;" height"auto"> Subject </a></div>
</div>

I want a right thin solid border on the right of "from" "date" "subject"

I think its suppose to be
<div style="border-right: " border- "> from </div>

I just cant figure it out :/

  • 4 Contributors
  • 4 Replies
  • 199 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by staciejortega

Dani AI

Generated

A few quick, practical notes that fill gaps in the thread and make the fix robust.

  • The original markup from contains a couple of errors: missing units on widths (for example width:248 needs px or another unit) and height"auto" is malformed. Inline styles were used; as pointed out, move rules into a stylesheet for maintainability.
  • Two modern, reliable options follow: (1) make each column a flex child so borders span the full column height, and (2) use a pseudo-element separator so the visual line does not change the box size.

Example: anchors as full-width columns (flex solution)

<div id="mailsort">
  <a class="col" href="#">From</a>
  <a class="col" href="#">Date</a>
  <a class="col last" href="#">Subject</a>
</div>

#mailsort { display:flex; align-items:stretch; }
#mailsort .col {
  display:block;
  flex:0 0 175px;   /* adjust widths as needed */
  padding:8px 12px;
  box-sizing:border-box;
  border-right:1px solid #ddd;
  text-decoration:none;
}
#mailsort .col.last { border-right:none; }

Alternate: pseudo-element separator (keeps width unchanged)

#mail .col { position:relative; padding:8px 12px; flex:0 0 175px; box-sizing:border-box; }
#mail .col:not(:last-child)::after {
  content:"";
  position:absolute;
  top:6px; bottom:6px; right:0;
  width:1px; background:#ccc;
}

Final tips: prefer external CSS, always include units (px/rem), use box-sizing:border-box so borders don’t inflate widths, and remove the right border on the last column using :last-child or .last. ’s table-cell approach is a valid fallback for very old browsers, but flex (or grid) is simpler for modern layouts.

Recommended Answers

All 4 Replies

Member Avatar for MagicMedia

<div id="mailsort">
<div><a class="mailsort" style="width:175px;" height"auto" > From </a></div>
<div><a class="mailsort" style="width:61px;" height"auto"> Date </a></div>
<div><a class="mailsort" style="width:248;" height"auto"> Subject </a></div>
</div>

I want a right thin solid border on the right of "from" "date" "subject"

I think its suppose to be
<div style="border-right: " border- "> from </div>

I just cant figure it out :/

<div style="border-right:5px solid red;">

BTW inline is a really bad idea. You should really put it in an external CSS file.

Member Avatar for skald89

<div style="border-right:5px solid red;">

BTW inline is a really bad idea. You should really put it in an external CSS file.

True

I could create a css just for those 3 <div> that says it has a solid thin black right border.
For the multiple widths I have to do it inline?

Btw Thank you

Edited by skald89 because: n/a
Member Avatar for RoyalElite96

No, you could try something like this:

<div class="cell">Home</div>
<div class="cell">Contact</div>
<div class="end">About</div>

And in your CSS file:

.cell{
border-right: 5px solid red;
display: table-cell;
width: 200px;
}
.end{
display: table-cell;
width: 200px;
}

Member Avatar for staciejortega 
<div style="border-right:5px solid blue;">

</div>
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.