There seems to be an issue with the border displaying correctly within the div element

I am currently working on developing a tag input system, but I am encountering some CSS issues.

What I am aiming for is to have a green border that surrounds and contains the 2 divs inside it, however, this is not happening as expected. You can see the fiddle for reference.

I am following this link to implement the tag-like system:

This is the code snippet I am using:

<div class="master" style="border: 1px solid #3ef001; width: 200px;">
    <div class="tagCont" style="float: left;">
        <span>HTML</span>
        <span>CSS</span>
        <span>PHP</span>
    </div>

    <div class="inputElem" style="float: right;">
        <input type="text" />
    </div>
</div>

Aside from a solution, I would appreciate any insights on where my misunderstanding lies in terms of the CSS aspect, as I am still learning and improving in this area.

javascripthtmlcss

Answer №1

To achieve the desired border effect, make sure to include display:inline-block; in the styles for your .master div.

<div class="master" style="border: 1px solid #3ef001; width: 200px; display:inline-block;">
    <div class="tagCont" style="float: left;">
        <span>HTML</span>
        <span>CSS</span>
        <span>PHP</span>
    </div>

    <div class="inputElem" style="float: right;">
        <input type="text" />
    </div>
</div>

https://jsfiddle.net/m3shyss6/

The key issue you are facing is due to the div not adjusting its size based on its contents. By setting its display property to inline-block, this problem can be resolved effectively.

Answer №2

To properly structure your code, don't forget to include a clearfix:

Check out this JsFiddle example for reference

.master::after {
  content: "";
  display: table;
  clear: both;
}
<div class="master" style="border: 1px solid #3ef001; width: 200px;">
  <div class="tagCont" style="float: left;">
    <span>HTML</span>
    <span>CSS</span>
    <span>PHP</span>
  </div>

  <div class="inputElem" style="float: right;">
    <input type="text" />
  </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

Firefox throwing XML parsing error when SVG is encoded as data URI

Check out my codepen demo showcasing the issue: codepen.io/acusti/pen/mJmVRy Encountering an error when trying to load svg content in Firefox: XML Parsing Error: unclosed token Location: data:image/svg+xml;utf8,<svg%20viewBox='0%200%20120%2 ...

cssfirefoxsvg

Creating Location-Specific Customer Data using AngularJS similar to Google Analytics

Looking to create a user registration map similar to Google Analytics without actually using Google Analytics. Can anyone provide assistance with this task? I am utilizing MVC, C#, Sql Server-2014, AngularJS, and jQuery for this project. Despite my efforts ...

javascriptc#angularjssql-serverasp.net-mvc-4

What could be causing my externally hosted React component to malfunction when being imported via NPM?

After successfully creating a standalone component within my original project, I decided to explore the possibility of releasing it as an NPM module. To kick off this process, I attempted to load the library from another repository using NPM in a new proje ...

javascriptreactjsnpm

Choosing images based on aspect ratio in CSS

I am looking to add a specific class to image elements, but only for those that are in landscape format. Is there a way to target images in my HTML with a width/height ratio greater than 1, similar to how media queries work with the "device-pixel-ratio" f ...

cssimagecss-selectorsless

Concealing the parent template in Vue Router when the child is displayed

Having some trouble setting up Vue.js with the router, specifically dealing with view display issues. I've created a router.js file with child routes for breadcrumbs and route clarity purposes. Each individual route loads perfectly fine when opened. ...

javascriptvue.jsvuejs2

Improve code efficiency by streamlining a function and using more effective syntax techniques

I've been learning how to condense code with jQuery. Can this script be written in a more concise manner without everything being on one long line? items.push('<li id="' + key + '">' + ' (key: ' + key + ')&apo ...

javascriptjquerysyntaxcoding-style

Unable to access ng-model values within ng-repeat loop

I'm having trouble setting ng-model values within an ng-repeat statement. When I repeat this div with an array of JSON objects, I am able to print the 'ID' value of the object in any element. However, I can't use that as the ng-model v ...

javascriptangularjsangularjs-ng-repeatangular-ngmodel

Adjust the placement of image when changing the size of the window

Is there a way to prevent an image with a fixed position from covering up page content when the browser window is resized? <div > <img id="img1" class="wrapperImage"></img> </div> <style type="text/css"> .wrapperImag ...

htmlcss

Need to battle with... its own contradictions in a direct manner

I've integrated APIs for my bot, expecting them to work smoothly. However, I'm still struggling to figure out why the server keeps aborting itself... Here is the error output, code, and a screenshot. Any help would be greatly appreciated. Error: ...

javascriptexpressserverbackend

What are the steps to update your profile picture using Angular?

In my Angular 6 application, I am implementing an image upload feature with the following code: Html: <img [src]="url ? url : 'https://www.w3schools.com/howto/img_avatar.png'"> <br/> <input type='file' (change)="onSelec ...

javascripthtmlcssangulartypescript

Is there a way to solely adjust the color of a -box-shadow using jquery?

Looking for a way to incorporate tinycolor, a color manipulation framework, into setting a box-shadow color. Instead of directly setting the box-shadow with jQuery, you can use tinycolor on an existing color variable. $("CLASS").css("box-shadow", "VALUE") ...

javascriptjquery

Steps for retrieving the currently selected text inside a scrolled DIV

An imperfect DIV with text that requires a scroll bar For example: <div id="text" style='overflow:scroll;width:200px;height:200px'> <div style='font-size:64px;'>BIG TEXT</div> Lorem Ipsum is simply dummy text of th ...

javascriptjqueryhtmlcssdom

Having trouble navigating to the end of a webpage while using Python for web scraping and Spotify's web player?

I am working on a Python program that can extract a list of track names from a Spotify playlist when given the link. Here is my current progress: from bs4 import BeautifulSoup from selenium import webdriver url="https://open.spotify.com/playlist/1xXEN6Uh ...

javascriptpythonhtmlseleniumweb-scraping

What is the best way to link HTML transformations across several classes?

Is it possible to combine multiple transforms in a single element to create a unique end result? It seems that when applying multiple transform properties to an element, only one of them will be recognized. For example, trying to transform a div with bot ...

javascripthtmljquerycsstransform

What is the relationship between font size adjustments and the dimensions of the surrounding parent div element?

I've come across an issue that involves having the following code snippet in the body of an HTML file: html, body { width: 99%; height: 99%; margin: 0px; overflow: hidden; } #container1 { display: flex; gap: 2%; width: 90%; heigh ...

htmlcssmargin

What is the process for accessing an image via localhost on the same computer?

I created a program that saves images locally and stores their URLs in a database. When retrieving this data via ajax, the URLs are fetched and appended to a div class using the following code: $( document ).ready(function() { $.ajax({ url: "/ ...

jqueryhtmlimage

Ensure a button is automatically highlighted within an active class script

I have created a set of buttons that allow users to change the font family of the text. I would like the border and text color to update automatically when a specific option is selected. Currently, the JavaScript code works well, but when the page first l ...

javascriptcssonclick

Is it Possible to Stack Multiple Rows of Images with HTML5/CSS3?

I am struggling to arrange images in rows, but I'm facing unexpected outcomes. The images only break to a new line when the page is filled. I attempted to use overflow:hidden, however, the expanding images end up hidden under white space. I can't ...

htmlcssimage

Separate every variable with a comma, excluding the final one, using jQuery

I've developed a script that automatically inserts checked checkboxes and radio options into the value() of an input field. var burgerName = meat + " with " + bread + " and " + onion + tomato + cheese + salad; $('#burger-name').val(burger ...

javascriptjquery

Tips on deleting specific elements from an array by utilizing the splice method

Here are the details of my first array: [ { members: [ '60ee9148104cc81bec3b97ab' ] } ] And this is the second array: [{"_id": "60ee9148104cc81bec3b97ab","username": "user1", "email": "< ...

javascriptnode.jsexpress