position blocks next to each other within a container

Thank you for all the hard work!

I've been struggling to figure out how to align blocks next to each other within a div. It may not be that difficult, but I just can't seem to find an elegant solution...

Here is the HTML code snippet: 

<div class="test">
   test
   <div class="container">
      <div class="row">
         <div id="header_logo"></div>
         <div id="tmsearch" class="clearfix">
            <span class="btn-toogle active"></span>
            <form id="tmsearchbox">
               <input name="controller" value="search" type="hidden">
               <input name="orderby" value="position" type="hidden">
               <input name="orderway" value="desc" type="hidden">
               <input class="tm_search_query form-control ac_input" id="tm_search_query" name="search_query" placeholder="What are you shopping for today ?" value="" autocomplete="off" type="text">
            </form>
            <button class="submit-buttons" id="search-bar-button" type="submit">Search</button>
         </div>
      </div>
   </div>
</div>

Check out this JSFiddle link for more: https://jsfiddle.net/x7juoq64/6/

I would greatly appreciate some guidance from the front-end developer community and please forgive me for my novice question.

javascripthtmlcss

Answer №1

If you want to show elements side by side, just add display: flex to the parent element.

.flex {
  display: flex;
}
<div class="test flex">
   test
   <div class="container">
      <div class="row">
         <div id="header_logo"></div>
         <div id="tmsearch" class="clearfix flex">
            <span class="btn-toogle active"></span>
            <form id="tmsearchbox" class="flex">
               <input name="controller" value="search" type="hidden">
               <input name="orderby" value="position" type="hidden">
               <input name="orderway" value="desc" type="hidden">
               <input class="tm_search_query form-control ac_input" id="tm_search_query" name="search_query" placeholder="What are you shopping for today ?" value="" autocomplete="off" type="text">
            </form>
            <button class="submit-buttons" id="search-bar-button" type="submit">Search</button>
         </div>
      </div>
   </div>
</div>

Answer №2

Include this line in the block style attribute of every element: float:left;

Answer №3

Is this what you're looking for?

#search-bar-button,
.tm_search_query
{
  float: left;
}
<div class="test">
  test
  <div class="container">
    <div class="row">
      <div id="header_logo"></div>
      <div id="tmsearch" class="clearfix">
        <span class="btn-toogle active"></span>
        <form id="tmsearchbox">
          <input name="controller" value="search" type="hidden">
          <input name="orderby" value="position" type="hidden">
          <input name="orderway" value="desc" type="hidden">
          <input class="tm_search_query form-control ac_input" id="tm_search_query" name="search_query" placeholder="What are you shopping for today ?" value="" autocomplete="off" type="text">
        </form>
        <button class="submit-buttons" id="search-bar-button" type="submit">Search</button>
      </div>
    </div>
  </div>
</div>

Answer №4

Form acts as a block level element similar to a div tag.

I have made some modifications to your fiddle to address the issue: Check it out here

All I did was:

form { display: inline-block; }

This addition in the CSS ensures that your inputs are displayed inline.

Update* Please be aware that the display:flex property may not be supported by all browsers at this time. Learn more about it on W3CSchools

I hope this solution proves to be helpful for you.

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

vee-validate remains consistent in its language settings

Having trouble changing the error message in vee-validate, any suggestions on how to fix this? import VeeValidate from "vee-validate"; import hebrew from "vee-validate/dist/locale/he"; Vue.use(VeeValidate, { locale: "he", dictionary: { he: { me ...

javascriptvue.jsvee-validate

What is the best way to align the navbar items at the center in Bootstrap when mx-auto is not working?

<nav class="navbar navbar-expand-sm navbar-light"> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls ...

htmlcssbootstrap-4react-bootstrap

applying conditional rendering in vue.js

I'm currently working on developing a chat application using the guidelines outlined in this tutorial: https://socket.io/get-started/private-messaging-part-1/ One of my goals is to customize the appearance of the messages, so that when a message is s ...

cssvue.js

utilize ajax success method to extract json data

I'm currently working on displaying and parsing JSON data in the success function of an AJAX call. This is what I have so far: AJAX: data = "Title=" + $("#Title").val() + "&geography=" + $("#geography").val(); alert(data); url= "/portal/getRe ...

javascriptjqueryjsonajax

Basics of CSS border-image explained

Although it seems simple, I'm struggling to figure out what the issue might be. I am attempting to create a div with a specific border on an ASP.Net webpage. CSS: .ResourcesDiv { border-image:url(http://blogrope.com/wp-content/uploads/2013/06/003-w ...

htmlcssborder

What is the best way to pass the record ID of the row when the user clicks on the edit button?

The substance ID saved to the session is always the last record ID in the table. I need to send the record ID of the row when the user presses the edit button. Currently, every time a button is selected, the record ID sent is the last one in the table. I ...

phphtml

Issue with installing vscode-ripgrep during VSCode build/run process

After attempting to build and run VSCode on my Ubuntu 17.10 by following the instructions from this guide: https://github.com/Microsoft/vscode/wiki/How-to-Contribute#build-and-run, I encountered an issue when installing dependencies using yarn. The error m ...

javascriptnode.jsnpmvisual-studio-code

What is the best way to enhance a state's capabilities in Machina.js?

When using Machina.js (version 0.3.6), how can I instantiate a modified FSM constructor where both the child and parent FSMs define behaviors in the same states? Here is the code snippet: var _ = require('lodash'); var machina = require('m ...

javascriptnode.jsinheritancemachina.js

Error: The function 'check' is not defined and cannot be called when the 'on

My aim is to display the "expandrepeat" div when a specific select option is chosen. Unfortunately, the code below doesn't seem to be working as intended: <script> window.check=function(elem) { if (elem.selectedIndex == 1) { documen ...

javascripthtmlvue.js

Is it possible to create a masonry-style layout with two columns that is responsive without

Is there a way to organize multiple divs of varying heights into two columns that display immediately one after the other, without relying on JavaScript or libraries like packery or masonry? I've experimented with using display: inline-block in this ...

htmlcssflexbox

Guide on inserting HTML text box form input into Express route parameter

I'm currently working on implementing a feature that allows users to search through my mongo database using an endpoint structured like this: app.get('/search/:input', function(req, res){ console.log(`get request to: /members/${req.params ...

javascripthtmlnode.jsmongodbexpress

ASP.NET MVC does not automatically refresh when changes are made to the CSS file

Currently, I am diving into the world of Bootstrap 4 within an ASP.NET MVC project, exclusively making changes to the index.cshtml file in JetBrains Rider. However, I've encountered a strange issue that has me stumped. Each day, when I begin writing ...

css.netasp.net-mvcbootstrap-4rider

What could be causing my AJAX code to fail in retrieving information from an API?

Hey everyone, I'm new here and hoping to get some help with an issue I'm facing. I've written a code to fetch data from an API and display it on my HTML page, but for some reason the AJAX code isn't working. There's nothing showing ...

javascriptajaxasp.net-web-api

Assign a property to an array of objects depending on the presence of a value in a separate array

Looking to manipulate arrays? Here's a task for you: const arrayToCheck = ['a', 'b', 'c', 'd']; We have the main array as follows: const mainArray = [ {name:'alex', code: 'c'}, ...

javascripttypescriptecmascript-6

Modifying the content of JSON key values

In my application, I am using MongoDB, Express, and MongoDB. When receiving data on the server side, it comes in the form of an array of objects (JSON) named upProbations. For example, let's say I find information about Max: [ { Name ...

javascriptnode.jsarraysjsonmongodb

Is it possible to extract information from a string that includes HTML code within a browser using CSS selectors without actually generating the DOM elements?

I've been struggling with this basic task for hours. I can't find any libraries that work and none of the questions here address my specific issue. Here's what I need to do: The entire page's markup is in a string format. I must use ...

javascriptcssxml-parsingweb-scrapinghtml-parsing

Problem uploading files with ajax in Laravel version 6

I am encountering an issue while attempting to save a PDF file along with other input values using Ajax in Laravel 6 without utilizing the form HTML element. The error message "Call to a member function getClientOriginalExtension() on null" keeps popping u ...

javascriptjqueryajaxlaravellaravel-5

Prevent memory leakage by utilizing Angular's $interval feature in countdown processes

I have a controller set up to handle a countdown feature: var addzero; addzero = function(number) { if (number < 10) { return '0' + number; } return number; }; angular.module('theapp').controller('TematicCountdownCo ...

javascriptangularjsmemory-leaks

Show values in an angular template using an array

I want to showcase values of an array using *ngFor const blockData = [ {text: sampleText1, array: [val1]}, {text: sampleText2, array: [val2, dat2]}, {text: sampleText3, array: [val3, dat3]} ] <div *ngFor="let data of blockData"> ...

javascripthtmlangular

Send the Post model along with 2 checkbox lists to the controller using Jquery's Ajax function

How can I efficiently send 2 lists containing values of checked checkboxes along with my model using JQuery Ajax from an EditorTemplate used as a partial view? Here's the code snippet: @model EsdpExport.View_Models.ProductLineCreateViewModel @using E ...

c#javascriptjqueryajaxasp.net-mvc