Creating a navigation and search box using CSS

I'm struggling with getting my navigation menu to align on the left side and the search box on the right side within the navigation bar. My CSS code doesn't seem to be working properly. Can someone please assist me in resolving this issue?

Here is my HTML Code:

<html>
    <head>
        <body>

            <div id= navigation>
                <ul>
                    <li> <a href="index.html">Home</a></li>
                    <li><a href="Contact.html">Contact Us</a></li>
                </ul>  
                <div id= form>
                    <form method = post action="" >
                        <input type="text" class= "form control" placeholder="Search">
                        <button class="button" type="Submit">Submit</button>  
                    </form>
        </body>
 </html>   

CSS code :

#body{#width:500px}
#navigation { 
    float:left;
    background: #1b1c1d;
    width: 960px;
}
#navigation ul { 
    list-style: none;
    list-style-position: outside;
    font-size: 25px;
    font-        weight: 200;  
}
#navigation ul li {
    display: inline; padding: 8px 12px;
    line-height: 40px;
}
#navigation ul li a {
    color: #d5d4d4;
    text-decoration: none;
}
#navigation ul li a:hover,
#navigation ul li.active a {
    color: #fff;
    text-decoration: none;
    line-height: 40px;
}
#from{
    width:280px;
    float: right;
    padding-top: 20px;
}

Answer №2

Insert this snippet into your CSS file and test if it functions correctly:

#menu ul{
    float: right;
    width: 250px;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Updating div visibility based on form content in PHP

I am struggling to find a way to filter a page filled with divs based on form input to determine whether they should be displayed or not. The layout is akin to a collection of articles, where each div showcases an image and some text that links to the comp ...

Ways to display an icon with an underline effect upon hovering over text

I have implemented a CSS effect where hovering over text creates an underline that expands and contracts in size. However, I now want to display an icon alongside the text that appears and disappears along with the underline effect. When I try using displa ...

Give a class to the element contained within an anchor tag

One way to add a class to the <a>-tag is through this line of code. $("a[href*='" + location.pathname + "']").addClass("active"); However, I am looking to add the class to an li element inside the <a>-tag. What would be the best ap ...

Tips for incorporating line breaks into a contenteditable div using the key combination of ctrl + enter

$("#contenteditable").keydown(function(e) { var last = false; if (e.keyCode == 13) { if (e.ctrlKey) { let brNode = document.createElement('br'); let range = window.getSelection().getRangeAt(0); ...

Placing a materialUI circular progress bar on top of the circular icon

I'm striving to add a circular progress bar that surrounds a circular icon with a visible space between the two elements, just as depicted in the image below. Although I successfully positioned the circular progress bar around the icon, creating adequ ...

Retrieving CSS properties of an element using JavaScript

How can I efficiently retrieve all CSS rules associated with a specific element using JavaScript? I am not seeking a particular solution, just looking to capture all CSS rules for the given element. For example, consider the following HTML code: <div ...

Combining the p class with flexbox for optimal layout design

I have four flexed container boxes and I am looking to add text below them in a row. Does anyone have suggestions on how I can achieve this alignment, as well as tips for optimizing the code? .container { display: flex; flex-direction: row; just ...

Integrate a PHP form that includes a redirect feature and an optional opt-in box

I'm a beginner and I'm trying to enhance this code by adding some extra features. When the form is submitted, I want the page to redirect to an external URL like www.google.com The checkbox should be automatically checked and when the client re ...

The banner <div> appears in Chrome but is not visible in IE9

I'm facing an issue with a banner div under my navigation. It seems to show up in Google Chrome but doesn't appear in IE9. Below is the HTML and CSS code: HTML: <div class="content"> <div class="slide-banner"></div> ...

Creating dynamic PDFs with automatically adjusting heights in DOMPDF Learn how to make

It seems like this question may not have a straightforward answer, but let's give it a shot. My goal is to collect various information from users on my website and display it in an HTML template file that will later be converted into a PDF. With user ...

Issue with Color Attribute in Heading within an Ionic Content Element

The color attribute doesn't seem to be working in Ionic 2. It works fine with normal Ionic tags, but not with HTML tags. Can someone help me with this? The code is provided below. <ion-content> <div class="page-home"> <h1 color="second ...

Creating an image using tiles in HTML

I have divided an image into 48 tiles (8x6) using a method similar to "Cutting an Image into 9 pieces C#". Now, I want to reconstruct the original image in HTML. What is the most effective approach to achieve this? Initially, I attempted to use a table wi ...

The 'order' property in the bootsrap 4 grid is malfunctioning on Safari IOS and not producing the desired outcome

I have encountered an issue where this code performs perfectly on a Windows desktop, but when tested in Safari on iOS, the third column always collapses and jumps to a new line. Here is the code snippet causing the problem: <div class="container"> ...

Tips for incorporating the numerous values of a one-to-many relationship into an HTML template using Django

I am facing an issue with a one-to-many relationship in my Django project. Here is how it is structured: class Listing(models.Model): title = models.CharField(max_length=60) class Images(models.Model): listing = models.ForeignKey(Listing, on_delet ...

How can I eliminate the padding from an image button in Bootstrap 5?

I am facing an issue with removing padding from a button that has an image inside it. I have tried using style="padding: 0px !important" and the p-0 class, but it doesn't seem to work. Switching the <button> to <a> removes the padding, but ...

What methods can I use to prevent a number from becoming negative?

I am currently developing a game where players collect resources, spend them to create more resources, and engage in various activities. However, I'm facing an issue where the resource count goes into negative numbers when too much of a certain item i ...

Using JavaScript to delete the initial option from a dropdown menu

Below is the code snippet: <select id="List" name="UserType" onChange ="hide"> <option value="0" disabled="disabled" selected="selected">User Type</option> <option value="1" onclick="hide">Administrator</option> ...

Angular 8 is facing an issue where classes defined dynamically in the 'host' property of a directive are not being properly applied to the parent template

In my Angular 8 application, I am working on implementing sorting using the ng-bootstrap table. I referred to the example available at . In the sample, when I hover over the table header, it changes to a hand pointer with a highlighted class applied as sho ...

What is the best way to alter the background-color of an element that is contained within a GatsbyJS component, depending on the specific page where the component is being utilized?

As a first-time GatsbyJS website builder, I am working on creating reusable components for my site. One of these components is the footer, and I have already structured it. Now, I have a dilemma - I want to change the color of a specific <div> within ...

Discovering the data-id value in an HTML element by clicking it with JavaScript and returning that value through a for loop

this is my unique html content <ul class="dialogs"> {% if t_dialogs %} <li class="grouping">Today</li> {% for item in t_dialogs %} <li class=&qu ...