How to position a logo and search box in perfect alignment with CSS styling

I'm struggling to align a logo and a search box next to each other. The logo should be on the left and the search box on the right.

header {
                background:#383838;
                height: 130px;
                border-top:10px solid #2C2C2C; border-bottom:1px solid #2C2C2C;
                }
    
        .wrap-header {
               width:960px;
               position:relative;
               margin: 0px auto;
                }
    
        header #logo {
               position:absolute;
               top:40px;
               left: 30px;
               width: 100%;
               }
    
        header #search,
     
        header #submit {...}

The issue I'm facing is that the submit button for the search box is inside the text area of the search box.

htmlcss

Answer №1

Update the CSS for the header #search class to achieve the desired look:

header #search {
    padding: 5px 9px;
    height: 20px;
    margin-right: 90px;
    width: 300px;
    border: 1px solid #a4c3ca;
    background: #f1f1f1;
    border-radius: 50px 3px 3px 50px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
}

This update should fulfill the requirements effectively. See the preview below.

Modification Complete

Answer №2

It's important to include the min-width property in your header element.

Check out this functional jsfiddle link: http://jsfiddle.net/odpzc669/

Answer №3

 <header> 
        <div class="wrap-header">
            <div id="logo" class="inline-div">
                <a href="index.php"><img src="./images/logo.png"/></a>
            </div>
            <div class="inline-div">
                <form id="searchbox" action="search.php" method="post">
                    <input id="search" type="text" placeholder="Type here" name="search">
                    <input name="submit" type="submit" id="submit" formmethod="POST" value="Search">
                </form>
            </div>
        </div>
    </header>

CSS:

.inline-div{
    display:inline-block;
}

I placed the form and logo in div containers with specific classes, then styled them both using inline-block property in CSS.

Let me know if you have any questions.

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

The functionality of alpine.js x-for update is not functioning as intended

I have implemented a basic x-for loop on data from the Alpine Store (need it to be global). My objective is to modify a specific row after the table has been rendered by the x-for. Codepen: https://codepen.io/roniwashere/pen/oNMgGyy <div x-data> ...

javascripthtmlalpine.js

Tips for positioning D3 circles along a half-circle arc

I'm trying to align a series of radios in a semi-circle formation, created from circles. The number of radios will vary and I need to ensure they stay centered. Here is my current setup: UPDATE: I just noticed that the order of the radios in the scre ...

javascripthtmlreactjssvgd3.js

What is the process for using AJAX and PHP to upload an image file?

I'm facing an issue where I want to insert an uploaded image into a database with user details for a profile picture. The output I receive currently shows {"current_field":null,"field_count":null,"lengths":null,"num_rows":null,"type":null}. How can th ...

javascriptphphtmlajax

The SetInterval notifications remain stagnant without any alterations

I am currently working on designing a loading screen for a game using HTML and JavaScript. My goal is to have different messages displayed every three seconds. Despite using the setInterval function successfully for other tasks (like triggering an alert ...

javascripthtmlsetinterval

The issue with the CSS background gradient is that it fails to completely cover the entire

Despite attempting several solutions recommended in similar questions, I am still unable to resolve the issue. Using the CSS background gradient generator at Ultimate CSS, I found that the gradient only extends halfway down the page on www.ncentertain.com ...

cssbackgroundgradient

Connect the blade.php file with CSS in Laravel version 5.x

I placed my view.blade.php file in resources\views\admin\login\view.blade.php and used the following code to link it to the CSS file: <link href="{!! HTML::style('css/style.css') !!}" rel="stylesheet">. My CSS file is lo ...

phpcsslaravellaravel-blade

Switch up div containers with JavaScript based on the set array order of elements?

As I work on creating a list that calculates the sum of selected numbers, I encountered an issue with rearranging the items. Despite successful functionalities like adding images with names, changing languages, and performing calculations, the page keeps r ...

javascripthtml

Is there a way to shift this structure to the right without relying on the float property?

Here's the HTML and CSS I have - .font-size-add-class { background-color: #2f2f2f; color: #f9f7f1; } .font-sizes { text-align: right; display: table; margin-top: 15px; cursor: pointer; } .font-sizes > .small { font-size: 12px; } .font ...

css

Seamless Gradient Transition Effect on SVG Hover

I am facing an issue with the transition of a linear gradient in an SVG hover effect. The gradient itself is working fine, but I'm struggling to apply a smooth transition to my path. PS: I would like to achieve this effect using only one path, withou ...

htmlcsssvgtransition

When selecting filter options, the posts/images now overlap before transitioning into a masonry view upon resizing the window

I have implemented a filter on my posts to arrange them based on popularity, style, and country. Screenshots: Screenshot 1: Everything looks good when the page loads, displaying all posts/images properly in masonry layout. Screenshot 2: Issue occurs whe ...

phpcssajaxfiltermasonry

Uncovering the hidden gems within a data attribute

Trying my best to explain this clearly. What I have is a data-attribute that holds a large amount of data. In this case, I need to extract each individual basket product ID and display them as separate strings. The challenging part for me is locating thi ...

javascriptjqueryhtml

Can Selenium be used to retrieve a list of pinned IDs from a website?

I am currently developing a web scraper that is required to open multiple tabs of items with filled icons. Specifically, each page that needs to be opened contains the div class="course-selector-item-pinned" in its source code. <dropdown-conte ...

htmljquerycssseleniumselenium-chromedriver

Achieving equal height rows in Bootstrap to fill the page height

I'm facing a challenge with my code that consists of 8 bootstrap row elements. I want these rows to have equal height so that when combined, their height is equal to the screen height. Additionally, I need all the rows to be visible without any scroll ...

htmlcssbootstrap-5

Tips on choosing the initial h4 element within the same parent element but at different levels of depth

Consider the following code snippet: <div class="main-element"> <h4>Title 1</h4> <ul> <li></li> <li></li> <li> <h4>Title2</h4> & ...

htmlcsscss-selectors

Modify the background color of a div by selecting a hex code from a dropdown menu

Is there a way to utilize jQuery in order to alter the background of a <div> by choosing the HEX code from a separate dropdown menu? HTML <select id="target"> <option value="#c2c2c2">Grey</option> <option value="blue">Bl ...

javascriptjquerycss

Modify the styling of multiple divs using a loop when the page is first loaded

I am working on a loop that generates multiple boxes with masonry layout containing post excerpts. <div class="box"> <div class="image"> <img src="" /> </div> <div class="info"> <h3>//title output with ...

jquerycss

Creating tilted divs with dynamic height to perfectly fit the content

I'm struggling to incorporate this design into my webpage; I can't seem to get the right div's height to match the left div as depicted in the second image. Can someone offer some assistance? Additionally, when viewed on mobile, the squares ...

htmlcssbootstrap-4

In Android Kitkat 4.4.4, the Ionic navbar displays icons vertically when using the <ion-buttons end> feature

When viewing in the browser with ionic serve, everything looks fine. However, on an Android Kitkat device running version 4.4.4, the buttons on the right side of the navbar are displaying vertically instead of horizontally. <ion-navbar> <ion-ti ...

cssionic-framework

Strange Data List Phenomenon

Presented here are two distinct datalists, one containing patient filenumbers and the other containing states. <input type="list" class="form-control" name="patient" list="patient-list" placeholder="Enter Patient file number"> <datali ...

htmlinputhtml-datalist

Dealing with a divided image in a separate thread: What you need to know

I am facing a challenge with incorporating a LARGE image into a website, which is affecting performance. My solution is to divide the image into smaller pieces and stitch them together using a grid upon loading. The only issue is that it must be in the ba ...

htmlimagecsscss-grid