Align a Heading and a Hyperlink in a single row

How to align a heading and a hyperlink or an image or some text in the same row (without using tables)?

Questions by anilprasad

Showing Answers 1 - 18 of 18 Answers

aravelli

  • Sep 14th, 2009
 

Code
  1. <style type="text/css">

    2. 

  2.         

    3. 

  3.         #container {

    4. 

  4.             border: 1px solid #ccc

    5. 

  5.             width: 500px

    6. 

  6.             height: 50px

    7. 

  7.         }

    8. 

  8.         

    9. 

  9.         #container h3, #container span {

    10. 

  10.             float: left

    11. 

  11.             width: 200px

    12. 

  12.             margin: 2px

    13. 

  13.         }

    14. 

  14.     </style>

    15. 

  15.     <body>

    16. 

  16.         <div id="container">

    17. 

  17.             <h3>Heading</h3>

    18. 

  18.             <span><a href="#">some text</a></span>

    19. 

  19.         </div>

    20. 

  20.     </body>

  Was this answer useful?  Yes

kriss141

  • Oct 29th, 2009
 

Code
  1. <html>

    2. 

  2. <head>

    3. 

  3. <title>krishna</title>

    4. 

  4. <style type="text/css">

    5. 

  5. .header{

    6. 

  6.  width:300px

    7. 

  7.  height:25px

    8. 

  8.  line-height:25px

    9. 

  9.  font:11px Verdana, Arial, Helvetica, sans-serif

    10. 

  10.  padding:0 10px

    11. 

  11.  background-color:#CCCCCC

    12. 

  12.  }

    13. 

  13. .header h1{

    14. 

  14.  font:11px Verdana, Arial, Helvetica, sans-serif

    15. 

  15.  font-weight:bold

    16. 

  16.  float:left

    17. 

  17.  margin:0

    18. 

  18.  padding:0

    19. 

  19.  color:#0099CC

    20. 

  20.  }

    21. 

  21. .header a{

    22. 

  22.  float:right

    23. 

  23.  color:#f90

    24. 

  24.  text-decoration:none

    25. 

  25.  }

    26. 

  26. </style>

    27. 

  27. </head>

    28. 

  28.  

    29. 

  29. <body>

    30. 

  30.  <div class="header">

    31. 

  31.      <h1>krishna</h1>

    32. 

  32.         <a href="#">krishna</a>

    33. 

  33.     </div>

    34. 

  34. </body>

    35. 

  35. </html>

  Was this answer useful?  Yes

aparna0503

  • Mar 26th, 2010
 

Genrally header having property display block so we have to give inline style like display:inline so that they can align in single row like

Code
  1.  <h1 style="DISPLAY: inline">header</h1>

    2. 

  2. <a href="someurl">Some URL</a>

  Was this answer useful?  Yes

mramreddy

  • Apr 23rd, 2010
 

The Correct Code is we need to give property as display: inline for

tag.

Code
  1. <html>

    2. 

  2. <head>

    3. 

  3. <title>krishna</title>

    4. 

  4. <style type="text/css">

    5. 

  5. #Container

    6. 

  6. {

    7. 

  7. background: #ffffff

    8. 

  8. float: left

    9. 

  9. }

    10. 

  10.  

    11. 

  11. #container h1

    12. 

  12. {

    13. 

  13. display: inline

    14. 

  14. }

    15. 

  15.  

    16. 

  16. </style>

    17. 

  17. </head>

    18. 

  18. <body>

    19. 

  19. <div id="Container">

    20. 

  20. <h1>Welcome</h1>

    21. 

  21. <a href="">Some Link</a></div>

    22. 

  22. </body>

    23. 

  23. </html>

  Was this answer useful?  Yes

websilt

  • May 8th, 2010
 

We will use h1 tag css like this 

Code
  1. h1 {float:left width:auto} then a {float:left width:auto}


We need to write width:auto; because both "h1" and "a" take 100% of width amount.

  Was this answer useful?  Yes

Give your answer:

If you think the above answer is not correct, Please select a reason and add your answer below.

 

Related Answered Questions

 

Related Open Questions