-2

I have done a lot of looking around and cant quite mine to work, i was hoping with my specific code people would be able to help. here is the html:

<body>
<!-- <h3> Website Title </h3> -->
<ul id="navigationBarList">
  <li><a href="#About">About</a></li>
  <li><a href="#Bookings">Bookings</a></li>
  <li><a href="#Blog">Blog</a></li>
  <li><a href="#Pricing">Pricing</a></li>
</ul>

<div id="element2"> Sign in </div>



</body>

and here is the css:

#navigationBarList{
    display: inline-block;
    margin: 0;
    margin-right: 10px;
    padding: 10px;
    background-color: black;    
    font-size: 25px;
    color: red;
    width: 100%;
}
#navigationBarList li{
    display: inline;
    width: 100px;
    margin-right: 20px;
}
#element2{
    display: inline;
    width: 100px;
    background-color: red;
}

and simply i want the sign in link to be on the same line as the list items. (the reason i have not included it in the list is that i want the list to have equal space in between each element and then a wider gap with the sign in button shoved to the right of the screen but could not work it out so figured i should separate them)

so far this code is just shoving it underneath

Mike Jones
  • 53
  • 2
  • 6
  • You should look into how to use the css float property. float-left and float-right – medium Jan 06 '15 at 17:15
  • 1
    is [this](http://jsfiddle.net/lalu050/efr8tkm2/) what you want??? – Lal Jan 06 '15 at 17:17
  • possible duplicate of [vertical alignment of elements in a div](http://stackoverflow.com/questions/79461/vertical-alignment-of-elements-in-a-div) – Sleek Geek Jan 06 '15 at 17:18
  • 1
    Your problem is that you set your `
      ` element as 100% width. How do you plan on fitting in the `Sign in` link?
     – Phylogenesis Jan 06 '15 at 17:18
  • @Lal sort of but i want the sign in to be same height as the black nav bar – Mike Jones Jan 06 '15 at 17:22
  • @Phylogenesis I want it go over the top of it or inside it if you see what i mean. so it's sort of encapsulated. – Mike Jones Jan 06 '15 at 17:24
  • You can `position` the `#element2` element `absolute` like [this](http://jsfiddle.net/rjaa32bb/). Is that the look you're after? – Phylogenesis Jan 06 '15 at 17:27
  • @Phylogenesis yeh that's good. would you be able to explain to me how i can get it to look like your example but have 'sign in' as part of the original list? i.e. chose the individual space between each item in a horizontal list? – Mike Jones Jan 07 '15 at 10:44

1 Answers1

1

You need to add to add float: right to #element2 and remove width: 100%; from #navigationBarList, then add font-size: 25px; to #element2. 

#navigationBarList{
    display: inline-block;
    margin: 0;
    background-color: black;    
    font-size: 25px;
    color: red;
}
#navigationBarList li{
    display: inline;
    width: 100px;
    margin-right: 20px;
}
#element2{
    display: inline;
    float: right;
    font-size: 25px;
    background-color: red;
}
<body>
<!-- <h3> Website Title </h3> -->
<ul id="navigationBarList">
  <li><a href="#About">About</a></li>
  <li><a href="#Bookings">Bookings</a></li>
  <li><a href="#Blog">Blog</a></li>
  <li><a href="#Pricing">Pricing</a></li>
</ul>

<div id="element2"> Sign in </div>



</body>

A cleaner approach could look like this

#navigationBarList{
    margin: 0;
    padding: 0
    /*
    display: inline-block; 
    margin: 0;
    margin-right: 10px; add this to the list
    padding: 10px; add this to anchors
    background-color: black; add this to the list    
    font-size: 25px; you can add this to #element2,#navigationBarList
    color: red;  add this to anchors
    width: 100%; you don't need this
    */
}
#navigationBarList li{
    float: left;
    list-style: none;
    background-color: black
}
#navigationBarList a{
    margin-right: 10px;
    color: red;
    padding: 20px;
}
#element2{
    float: right;
    background-color: red;
}
#element2,#navigationBarList{
    font-size: 25px;
    display: inline-block;
}
<!-- <h3> Website Title </h3> -->
<ul id="navigationBarList">
  <li><a href="#About">About</a></li>
  <li><a href="#Bookings">Bookings</a></li>
  <li><a href="#Blog">Blog</a></li>
  <li><a href="#Pricing">Pricing</a></li>
</ul>

<div id="element2"> Sign in </div>
Gildas.Tambo
  • 22,173
  • 7
  • 50
  • 78