CSS - Align two divs inline, positioning the first div to the left and the second div to the center

We are looking to create two inline divs where the first div is aligned to the left and the second div is centered on the same line.

   <div style="margin-top:200px;">
        <div align="left" style="display:inline;">
            <label>Restrict to Primary Location:</label>
            @(Html.Kendo().DropDownList()
                                                         .Name("ddl_restictToPrimaryLoc")
                                                         .DataTextField("Text")
                                                         .DataValueField("Value")
                                                         //.Events(e => e.Change("restictToPrimaryLocChange"))
                                                         .BindTo(new List<SelectListItem>() {
                  new SelectListItem() {
                      Text = "Yes",
                      Value = "1"
                  },
                  new SelectListItem() {
                      Text = "No",
                      Value = "0"
                  }})
                                .Value("1")
                                .HtmlAttributes(new { style = "width: 5%", @class = "form-control" }))
        </div>
        <div align="center" style="display:inline;">
            <button type="button" value="button" id="btn_AddSelection" class="jqButton  margin-bottom10">Add Selection</button>
        </div>

    </div>

This setup currently displays both the divs aligned to the left. Any suggestions for achieving the desired alignment?

jqueryhtmlcssstylestext-align

Answer №1

If you decide to utilize flexbox, the challenge lies in maintaining the alignment of the second div at the center without knowing whether you desire the center of the entire line or the center of the remaining empty space.

.container{
  display:flex;
}
.center-div{
  flex-grow:1;
  text-align:center;
}
<div style="margin-top:150px;" class="container">
        <div align="left" style="display:inline;" class="left-div">
            <label>Restrict to Primary Location:</label>      
        </div>
        <div style="display:inline;" class="center-div">
            <button type="button" value="button" id="btn_AddSelection" class="jqButton  margin-bottom10">Add Selection</button>
        </div>

    </div>

Answer №2

To achieve a responsive design for your interface across different screen sizes, you can specify the width for each division based on percentages. If we consider the full-screen width as 100%, then a left div would take up around 33.33%, the center div another 33.33%, and the right div the remaining 33.33%. By setting these division sizes accordingly, you can style the left and center divs using the classes below.

#container {
    width:100%;
    text-align:center;
}

#left {
    float:left;
    width:33.33%;
    height: 20px;
}

#center {
    display: inline-block;
    margin:0 auto;
    width:33.33%;
    height: 20px;
}
<div id="container">
  <div id="left">
      <div class="form-group">
          <label class="col-md-4 control-label" for="dropdown">Restrict to Primary Location:</label>
      </div>
  </div>
  <div id="center">
      <label class="col-md-4 control-label" for="btn_AddSelection"></label>
      <div class="col-md-4">
          <button id="btn_AddSelection" name="btn_AddSelection" class="btn btn-primary">Add Selection</button>
      </div>
  </div>
  
</div>

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

What is the correct method to properly encode JSON that may include HTML when displaying it in an HTML file?

After searching through numerous questions, none seem to address this specific scenario. app.get('/', function(req, res) { res.set('Content-Type', 'text/html'); res.send(`<html> <body> Hello, World! </body&g ...

javascripthtmljson

Use JavaScript to transfer list values to a textbox area

<!doctype html> <html> <head> <meta charset="utf-8"/> <title>My Title</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <s ...

javascripthtmllisttextbox

Tips for Keeping Sub Menu Visible Without Having to Click

I am working on an HTML navigation menu that opens submenus on click like this... $("#nav_evnavmenu > li > a").click(function () { // bind onclick if ($(this).parent().hasClass('selected')) { $("#nav_evnavmenu .selected div div ...

javascriptjqueryhtml

Square div with side arrow using CSS

I have a div containing an image that should only appear when an element is hovered over. I would like to add a side arrow pointing towards the direction of the hovered element. Below is the code for generating the square div: <div id="image-thumb ...

javascriptjqueryhtmlcss

Adjust the height of a division dynamically

I have the following HTML snippet: <div id="container"> <div id="feedbackBox"></div> </div> The #feedbackBox div is initially not visible. To center the div, the CSS code is used: #container { position: absolute; widt ...

jqueryhtmlcssresize

Technique for Retrieving Hyperlinks from HTML Resulting in Repetitive

I have been working on a web-crawler and encountered an issue while parsing the HTML content to extract links. The method I am using seems to be returning duplicate links, even though the HTML content is correct. Here is the code snippet: public static Ar ...

javahtmlmethodshyperlink

execute function once eventlistener completes running

I've implemented a code snippet to detect the availability of a gyroscope for user interaction. Here's how it works: function check_user_hardware(){ window.addEventListener("devicemotion", function(event){ if(event.rotationRate.alpha ...

javascriptjquerycallbackthree.js

Determining the window height using jQuery when overflow is set to hidden

I've built a full screen web application that I don't want to scroll, so I used this code: $("body").css("overflow", "hidden"); However, after adding a resize listener: $(window).resize(function(){ console.log("Inner height: " + $(window). ...

jqueryhtmlcss

Angular 7: Easily Mark All Fields as Touched in Template-Driven Forms

When working with template-driven forms in Angular 7, I encountered a challenge with marking all fields as touched when the user blurs out of the last required field. Currently, I am manually passing each field to mark it as touched, which is not ideal. I ...

htmlangularformsvalidationangular-material

Troubleshooting: Issue with JQUERY and Select box not syncing with database

I have a set of 3 checkboxes that are dynamically populated from a PHP database. I need help with implementing JQUERY functionality so that when any of the checkboxes are changed, the selected value is sent to a PHP file for processing and a response is re ...

phphtmljqueryforms

Certain issues arise when adjusting the padding within the background color of solely the inline text element

Appreciate your time. I'm working on adding background color to the TEXT exclusively, and have successfully done so by styling .post-title { text-transform:capitalize; margin-top:4px; margin-bottom:1px; font-size:22px; background-color:#FFF; dis ...

htmlcssbackground

Footer not adhering to the bottom of specific pages

I have been using the code snippet below to ensure that most of my pages stick to the bottom. However, I've noticed that the ones that don't are sub-menu items that contain a contact form with captcha. I'm not sure what's causing this i ...

css

Is there anyone who can assist in refining the padding and margin issues within this Galleria.js implementation?

I am struggling to understand why the padding and margins around the images in this slideshow theme on PregoApp are uneven. Despite my attempts to adjust the CSS, the issue persists. You can view the site here. Another website using the same implementati ...

jquerycssslideshow

Different hover effects for Material-UI [v0.x] RaisedButton

Is there a way to customize the hover styling of a Material-UI RaisedButton? It seems that the design guidelines dictate what happens on hover, but is there a method to modify the button's color and background-color specifically for when it is being h ...

cssreactjsmaterial-ui

Overflow on flex layout causes line breaks

I am facing an issue with two divs in a flex container where I want them to be displayed on separate lines when they overflow .container { background: wheat; padding: 10px; width: 300px; display: flex; justify-content: space-betwee ...

css

jQuery - Event cannot be triggered on the 'deselect' or 'focusout' of <option> tag

Check out the demo here Hello there, I have a situation where I need an input box to appear below a select option, only if the user selects "Other". The code currently uses the .click() function on the option, but now I am trying to make the input box di ...

javascriptjqueryhtml

Jquery executes b.fn.b.init[102] and displays the output

My task involves selecting multiple elements, all of which have the class "org-box". Within each box, there is a link that I need to capture the href from. Here is my code: $("a.org-box").click(function (e) { e.preventDefault(); var link = $(this).attr( ...

jqueryhtmljquery-selectorsweb

How to target the DIV elements that have at least one unordered list (UL) inside using CSS selector or JavaScript

Imagine a hierarchy structured like this: <div class="first_level"> <div class="second_level_1"> <div class="third_level_1"> <div class="fourth_level_1"> <ul><li></li><li></li></ ...

htmlcsscss-selectors

I am currently developing a custom alert box component in Angular 9. While trying to modify the alert type, I have encountered an issue where the appropriate CSS class is not being assigned

I'm currently working on Angular 9 and facing an issue while trying to create a reusable alert component. The problem lies in the alert-box selector where setting the alert type does not change its appearance. Instead, only plain text is displayed wit ...

cssangulartypescript

Display Navigation upon clicking a designated button

Seeking a way to automatically navigate to the second tab after submitting content in the first tab using nav-link. <ul class="nav nav-tabs" id="myTab" role="tablist"> <li class="nav-item"> <a class="nav-link active" id="home-tab" dat ...

javascriptjquerybootstrap-4