What is causing the input tag and button tag to appear on separate lines instead of together?

Here is my HTML and CSS code:


<!DOCTYPE html>
<html>
<head>
 <title>assignment1</title>
 <meta charset="utf-8"> 
 <meta name = "description" content="assignment">
 <meta name = "keywords" content="php, assignment">
 <meta name = "author"   content="Kamal">
 <meta name = "viewport"   content="width=device-width, initial-scale = 1.0">
 <link rel="stylesheet" type="text/css"  href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
 <link rel="stylesheet" type="text/css" href= "css/assignment1.css">
</head>
<body>
  <div class="container"> 
     <div class="row">
        <div class = "col-xs-12 col-xm-6">
           <img class ="img1" src="images/logo.png">
        </div>
        <div class = "col-xs-12 col-xm-6">
           <u class ="new"><p class ="new1"> Login to My Account</p></u>
        </div>
     </div>
     <div class="row">
        <div class = "col-xs-12 col-xm-12" >
           <form class = "k1">
           <input class = "new2" type="text" id="namef" placeholder="Search entire story here...." name="Search">
           <button type = "submit" class = "new3"><img src="images/search.png"></button>
           </form>
        </div>
      </div>  
     <div class="row">
       <div class = "col-xs-12 col-xm-12">
         <hr class = "new4">
       </div>
     </div>
   </div>
</body>
</html>

CSS Code:

body{background-color: #d7e7f4}
div.container{width:954px; background-color: #FFFFFF}
img.img1{margin-top: 25px; margin-left: 22px}
u.new{color:#007BAF}
p.new1{color:#007BAF; margin-top:-50px; margin-right:22px; margin-left:790px; font-size:14px}
form.k1{margin-top:-15px; margin-left:705px; margin-right:22px}
input.new2{ padding: 2px; font-size: 13px; border: 1px solid #007BAF; width: 64%;}
button.new3{border: none; background-color:#FFFFFF }
hr.new4{margin-top:100px; margin-bottom:1000px; border-top:4px solid black; border-radius:50px; width:954px}

The issue I am facing is that the webpage does not look as expected, especially with the input tag and search box placement.

htmlcss

Answer №1

Give this a shot

<div class="row">
        <div class = "col-xs-12 col-xm-12" >
           <form>
           <div class="form-row">
                <div class="col-auto">
           <input class = "new2" type="text" id="namef" placeholder="Explore the entire story here...." name="Search">
                </div>

                <div class="col-auto">   
                    <button type = "submit" class = "new3"><img src="images/search.png"/>
                </div>
               </div> 
           </form>
        </div>
      </div>

Answer №2

Welcome to your fully designed webpage. Simply copy and paste the code below:

HTML

<html>
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
</head>
<body>
  <div class="fluid-container">
    <div class="container"> 
        <div class="row">
            <div class = "col-xs-12 col-md-6 logo">
                LOGO
            </div>
            <div class = "col-xs-12 col-md-6">
                <div class="float-right">
                <a href="#" class ="login">Login to My Account</a>
                <form class = "k1">
                    <input class = "search-box" type="text" id="namef" placeholder="Search entire story here...." name="Search">
                    <button type = "submit" class = "search-btn">SEARCH</button>
                </div>
            </div>
        </div>
        <div class="row">
            <div class = "col-xs-12 col-md-12">
                <hr class = "new4">
            </div>
        </div>
    </div>
</div>
</body>
</html>

CSS

.fluid-container{
    background:#d7e7f4;
    height:100vh;
}
.container{
    background:#FFF;
    height:100vh;
}
.logo{
        padding: 15px;
}
.login{
    color: #007BAF;
    text-decoration: underline;
    display: block;
    padding: 12px 0;
}
.search-box{
      font-size: 16px;
    min-width: 200px;
    padding-left: 5px;
}
.search-btn{
        background: #007BAF;
    border: 0;
    padding: 3px 15px;
    color: #FFF;
}

OUTPUT SCREENSHOT

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

Guide on displaying ajax data using PHP

I'm attempting to display the user-entered data by using AJAX to transfer it and then trying to print or echo it with PHP, but I'm having trouble getting it to work. enter code here Here is my code: <html> <head> <title> ...

javascriptphphtmlajaxecho

Exploring Techniques for Adjusting Website to User's Screen Resolution

My website is currently designed for a screen resolution of 1024x768. However, I am aware that when viewed on computers with smaller or larger screen resolutions, the layout starts to distort. Is there a way to make the website adaptable to any user&apos ...

javascriptcsshtmlresolution

Tips for avoiding the need to reload a single page application when selecting items in the navigation bar

I am in the process of creating a simple Single Page Application (SPA) which includes a carousel section, an about us section, some forms, and a team section. I have a straightforward question: How can I prevent the page from reloading when clicking on nav ...

javascriptjqueryhtmlcsstwitter-bootstrap

Persistent Footer while scrolling on Internet Explorer

Trying to achieve a consistent look across Chrome, IE(11), and FF for my responsive website has been a challenge. The main issue I'm facing in IE is that when the site's content extends beyond the viewport, the scrollbar fails to reach the end d ...

htmlcssinternet-explorer

Expanding the foundation of the HTML problem

I have my main page located at index.html and I am trying to transfer my template to base.html. In the index.html file, I used {% extends 'base.html' %}, but it is showing an error of *Unresolved template reference ''base.html'&apo ...

pythonhtmldjangojinja2

Retrieve the element (node) responsible for initiating the event

Is there a way to identify which element triggered the event currently being handled? In the following code snippet, event.target is only returning the innermost child node of #xScrollPane, with both event.currentTarget and event.fromElement being null. A ...

javascripthtml

Guide to generating a PDF file and utilizing a Node.js program for the download process

Seeking assistance in creating a button using my Node.js application to generate a downloadable PDF file filled with information from a PostgreSQL database. Any help is greatly appreciated! ...

javascripthtmlnode.jspostgresql

Expanding the outer div horizontally by using inner divs with scroll

Is there a way to ensure that all child divs are displayed on the same line within the outer div without wrapping to a second line? The width of the outer div should be fixed so that a scrollbar is visible, allowing us to scroll and view all inner divs. h ...

css

Implementing the sticky positioning property to keep a div container fixed at the bottom of the page

As Bootstrap 4 no longer supports .affix, I had to look for an alternative solution to keep a box fixed. I needed a div container to remain fixed as you scroll to it. My current workaround is using: .fixedcard{ position: sticky; top:75%; } However, th ...

javascriptjqueryhtmlcsstwitter-bootstrap

Is it feasible to exclusively apply Twitter Bootstraps .navbar-fix-to-top on mobile devices?

I am working on a website using Twitter Bootstrap 3 and I have implemented the following navbar: <div class="col-xs-12 col-md-10 col-md-offset-1"> <nav class="navbar navbar-inverse" role="navigation"> <div class="navbar-header"> ...

htmlcsstwitter-bootstrap

How can I customize the appearance of the container and items in a dropdown <select> menu?

Im using contact form 7 on wordpress, i don't want to use a plugin rather use plain css/js to bring the results if possible. Something like this : https://i.stack.imgur.com/VTWRg.jpg ...

javascriptcsswordpresscontact-form-7

Iterating through an array with ngFor to display each item based on its index

I'm working with an ngFor loop that iterates through a list of objects known as configs and displays data for each object. In addition to the configs list, I have an array in my TypeScript file that I want to include in the display. This array always ...

htmlarraysangularjstypescriptangular

Troubleshooting Display Problems when Switching Bootstrap Themes in ASP.NET MVC

I recently made changes to my MVC project by switching the default Bootstrap theme to Bootswatch - Cosmos. However, I am facing an issue with the Navbar as shown in the image below: View Header Display Issue Image Initially, I was using Bootstrap 3.0 and ...

cssasp.netasp.net-mvctwitter-bootstrapbootstrap-4

What is the functionality of CSS radio tabs?

Can anyone provide a breakdown of how the final section of this code operates? Specifically: [type=radio]:checked { } [type=radio]:checked ~ .content { z-index: 1; } I am brand new to CSS and wanted to experiment with creating interactive CSS tabs, whi ...

htmlcsstabsradio-button

Tips for positioning a div element within the body of a webpage to maintain a predetermined height and width

Currently, I am developing a single-page application using AngularJS. I have specific routes in mind where I want to introduce new HTML templates. To accomplish this, I have created a container labeled with the ID #main positioned between two navbars (he ...

javascriptjqueryhtmlcssangularjs

Equal-height rows and columns using Flexbox

I've been working on a row layout with two columns, each set to 50% width. The left column contains an image, while the right column displays text. Here is my HTML: .row{ display:flex; ...

htmlcssflexbox

Tips for enhancing the fluidity of animations after removing an item from a list

I'm working on a project where I have a list of elements that are removed with an animation when clicked. However, I noticed that when one element is removed, the rest of the elements just jump up instead of smoothly transitioning. Is there a way to m ...

javascriptjquerycss

Tips on confirming the completion of my form when the next button is pressed

I am working on a multi-step form with a jQuery script to split the forms. The first form has only one button - the next button, which takes the client to the next form. However, when I click on the next button in the first form, it moves to the next form ...

javascriptjqueryhtmlforms

Basic Search tool, displaying a <div>

Hey there, I've been searching for a solution for a while now and haven't found one yet. So here's my question: I created a simple website to display random recipes for those times when you're not sure what to make for dinner. I also w ...

javascripthtml

"Effortless alignment: Centralizing CSS styling across the entire

I need help placing a loading spinner in the center of my screen, ensuring it works on both mobile and desktop devices. Here is my current CSS code: .spinner { width: 100px; height: 100px; position:absolute; top: 50%; left: 50%; margin: 100px ...

htmlcssruby-on-rails-5