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?
Jump to Post<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>
Jump to Post<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>
<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>
<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>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 :)
Please tell us what errors you facing there.
Let us try to sort out.
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>It works fine for me here in IE8.
What browser you are using?
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
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.
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.