Member Avatar for warlord902

I have a some words that I want display in the footer, I want 2 words to be left aligned and rest to be right aligned.

I have my code something like this:

<div class="footer">
    MyWebsite             <!--This should be left aligned-->

    <!--Things below should be right aligned-->
    <a href="">Contact Me</a>
    <a href="">Help</a>
    
</div>

I want it to be displayed in a single line not to distribute in two different lines. Any way to do this by Html/css?

  • 3 Contributors
  • 8 Replies
  • 532 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by jalarie

Dani AI

Generated

Nice quick answers from and — floats work and explain why NetBeans complained (you cannot place a block-level <div> inside a <p>). For a cleaner, more robust solution that keeps everything on one line and avoids layout hacks, use semantic markup and CSS Flexbox. Flexbox centers vertically, keeps the brand left and links right, and won't collapse the parent like floated children can.

Example (semantic, accessible, and single-line):

<footer class="site-footer" role="contentinfo">
  <span class="brand">MyWebsite</span>
  <nav class="footer-nav" aria-label="Footer links">
    <a href="#">Contact Me</a>
    <a href="#">Help</a>
  </nav>
</footer>
.site-footer {
  display: flex;
  justify-content: space-between; /* brand left, links right */
  align-items: center;            /* vertical alignment */
  padding: 8px 12px;
  flex-wrap: nowrap;              /* force single line; remove if you want wrapping */
}
.footer-nav a { margin-left: 12px; text-decoration: none; }

If you must support an old workflow or prefer floats, remember to clear them so the footer height contains the floated children. A minimal clearfix:

.footer::after { content: ""; display: table; clear: both; }

Practical tips: don’t nest block elements inside a <p> (NetBeans is correct to warn); use inline <span> if you need to keep a paragraph tag, or switch the outer <p> to a <div>/<footer>. Consider using a <ul> for lists of links for better accessibility, and avoid forcing nowrap on very small screens unless you handle responsive behavior (e.g., stack links with a media query).

Recommended Answers

All 8 Replies

Member Avatar for jalarie

<div class="footer">
<span style="float:left;">MyWebsite</span> <!--This should be left aligned-->

<!--Things below should be right aligned-->
<span style="float:right;">
<a href="">Contact Me</a>
<a href="">Help</a>
</span>

</div>

Member Avatar for tqmd1 
<html>
</head>
	<style type="text/css">
	.footer{
	width:600px;background:#e3eeff;border:1px solid orange;
	}
</style>
</head>

<body>

<div class="footer">
<div style="float:left;">MyWebsite</span> <!--This should be left 

aligned-->

<!--Things below should be right aligned-->
<div style="float:right;">
<a href="">Contact Me</a>
<a href="">Help</a>
</div>

</div> 
</body>
</html>
Member Avatar for warlord902

Thanks jalarie and tqmd1 both works for me. But I preferred method given by jalarie as it allows me to use span tag within other html tags but when I do so with div it gives error. Also tqmd1, the code written by you contain 2-3 errors.

Anyways, thanks a lot guys :)

Member Avatar for tqmd1

Please tell us what errors you facing there.
Let us try to sort out.

Member Avatar for warlord902

Please tell us what errors you facing there.
Let us try to sort out.

It is when if I write something like this:

<div class="footer">
    <p>
        <div style="float:left">
            Hello World
        </div>
    </p>   <!-- this closing tag will give error that it cannot find starting <p> tag -->
</div>
Member Avatar for tqmd1

It works fine for me here in IE8.
What browser you are using?

Member Avatar for warlord902

It works fine for me here in IE8.
What browser you are using?

It may be working fine, but coding in Netbeans it show it as a error. So I think, may be it is not the standard way to code. Not sure

Member Avatar for jalarie

You can not properly put a "div" tag within a "p" tag. The "p" is in-line but the "div" is block level. IE sometimes gives a good result for bad code.

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.