Member Avatar for davy_yg

index.html

<h4>Latest News</h4>
<p style="border-bottom: 2px dotted #FF0000; width: 620px;"></p><br />
		<div class="post">
						
            <img src="images/pic1.png" ALT="picture1" ALIGN=LEFT><div id="ptitle">Lorem ipsum <div id="pdate">- 14 Jan 2011</div></div><p> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce porta diam in quam consectetur elementum. Vestibulum iaculis pellentesque mauris, non sodales erat egestas nec. Proin sed elit sed ligula ullamcorper adipiscing. Quisque pellentesque sapien odio. Phasellus nec elit ligula. Ut tempus urna ut lectus ullamcorper imperdiet. Quisque vitae massa sem, sed cursus sapien. Ut mi lorem... <a href="#">read more ></a></p>
<p style="border-bottom: 2px dotted #FF0000; width: 700px;"></p><br />

style.css

#content #main .post #ptitle {
	font:Arial, Helvetica, sans-serif; font-size: 14px; color:red;
	}
			
#content #main .post #pdate {
	font:Arial, Helvetica, sans-serif; font-size: 14px;
	}

The print out:

Lorem ipsum
- 14 Jan 2011
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce porta diam in quam consectetur elementum. Vestibulum iaculis pellentesque mauris, non sodales erat egestas nec. Proin sed elit sed ligula ullamcorper adipiscing. Quisque pellentesque sapien odio. Phasellus nec elit ligula. Ut tempus urna ut lectus ullamcorper imperdiet. Quisque vitae massa sem, sed cursus sapien. Ut mi lorem... read more >

I prefer:

Lorem ipsum - 14 Jan 2011
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce porta diam in quam consectetur elementum. Vestibulum iaculis pellentesque mauris, non sodales erat egestas nec. Proin sed elit sed ligula ullamcorper adipiscing. Quisque pellentesque sapien odio. Phasellus nec elit ligula. Ut tempus urna ut lectus ullamcorper imperdiet. Quisque vitae massa sem, sed cursus sapien. Ut mi lorem... read more >

How to do so ?

  • 3 Contributors
  • 2 Replies
  • 117 Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by rotten69

Dani AI

Generated

Quick summary for : the date is wrapping because of the current HTML structure and default element behavior. Rather than changing text content, fix the markup and use CSS to place the title and date on the same line while keeping semantics and accessibility intact. Avoid deprecated attributes like ALIGN=LEFT, do not put block elements inside a <p>, and prefer classes over repeated IDs.

Example (modern, semantic, and robust):

<div class="post">
  <img class="thumb" src="images/pic1.png" alt="picture1">
  <div class="content">
    <div class="meta">
      <span class="title">Lorem ipsum</span>
      <time class="date" datetime="2011-01-14">- 14 Jan 2011</time>
    </div>
    <p class="excerpt">Lorem ipsum dolor sit amet... <a href="#">read more &gt;</a></p>
  </div>
</div>
.post { display: flex; gap: 12px; align-items: flex-start; }
.thumb { flex: 0 0 auto; width: 80px; }
.content { flex: 1; }
.meta { display: flex; gap: 8px; align-items: baseline; }
.title { color: #c00; font: 14px/1 Arial, Helvetica, sans-serif; }
.date  { color: #666; font-size: 0.9em; }

Notes and troubleshooting: use the <time> element for machine-readable dates; it improves semantics and future parsing. If you need older-browser fallbacks, set the meta container to behave like inline elements and adjust vertical-align (watch for inline-block whitespace). Check for invalid nesting or unclosed tags — browsers will reflow corrected HTML and that can move elements unexpectedly. As observed, block-level elements affect flow; as noted, merging title and date works but loses semantic separation.

Further reading: time element (MDN) and Flexbox guide (MDN).

Recommended Answers

All 2 Replies

Member Avatar for hericles

Either use <span></span> to hold your date (removing the <div>) or change the divs to use display: inline-block. Either one will make the two display side by side.
Divs are block elements by default which means they don't lie side by side unless you style them to do so.

Member Avatar for rotten69

Well, why don't you put the text "Lorem ipsum" and the date in one div. For example,

<div id="pdate">Lorem ipsum- 14 Jan 2011</div>

Shouldn't that fix the problem?

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.