CODEWITHSUNDEEP
htmlcss
user3452524
user3452524

Reputation: 21

how do i float these elements

I am trying to float my four links so that it is lineal and one next to the other. I am fairly new to CSS, so please bear with me. I have endlessly tried different positions properties and yet can not achieve what I want. Thanks

<!DOCTYPE html>
  <html>
   <head>
  <style>
    body{
         margin:  1px;
         background:green;
        }
 . topbar
      {
         background:url(topbar.gif);
         position:absolute;
         top: 5px;
         right: 15px;
         margin: 2px;
         width: 1200px;
         height: 100px;

       }

 .navbar
       {
        position:absolute;
        float:right;
        width:1200px;
        height:100px;
        border-style:groove;
        }


 a:link {text-decoration:none;color:yellow;}
 a:hover{color:red;}
#titlename
        {
        position:relative;top:10px;
        text-align:center;

        }

</style>
  </head>
    <body>

       <div class="topbar">
       </div>

         <div id="titlename">
         </div>

    <img src="title.gif" alt="title">
    </div>

     <div class="navbar">
      <div class="button"><a href="#" target="_blank">HOME</a>
      <div class="button"><a href="#" target="_blank">ABOUT</a>
      <div class="button"><a href="#" target="_blank">LINKS</a>
      <div class="button"><a href="#" target="_blank">CONTACT</a>
     </div>

   </body>
    </html>

Upvotes: 1

Views: 62

Answers (4)

Kheema Pandey
Kheema Pandey

Reputation: 10265

There are various methods to inline the elements.

1. using Flex Method
2. using table method
3. using float method
4. using display method.

Here you can check the Demo link. includes all possibility.

Upvotes: 1

redwar
redwar

Reputation: 81

I don't know if you've noticed since posting your question, but each of your button DIVs is missing it's closing DIV tag. This means that any CSS applied will not have the expected effect. Once you've fixed the HTML, you can use the following CSS to have each navigation item on the same line, spaced out equally, with the menu occupying the full width:

.button {
    float: left;
    width: 25%;
}

If you don't want the menu to occupy the full width, use padding or margin instead of specifying 25% for the width attribute, e.g:

.button {
    float: left;
    padding: 0 20px;
}

Upvotes: 1

Binita Lama
Binita Lama

Reputation: 1278

Working Fiddle

.button{
display:inline-block;
}

Upvotes: 0

Dhiraj
Dhiraj

Reputation: 1871

You can use either use float: left; or display: inline to achieve what you want.

DEMO

Just add following style to your anchor tags:

.navbar a { 
    float:left; 
    margin-right: 15px;
}

Upvotes: 0

Related Questions