Tips on neatly wrapping both input fields and buttons inside a div element

Can you assist me?

I'm struggling to understand why my elements are displaying incorrectly. I want them to be centered within a div with a background color, but for some reason, the div is pushed to the back and it seems like my elements are outside of the div tag.

I have included a picture and I am using IE 10.

Below is the code snippet:

<!--        BUTTONS         -->
<div style="width: auto; margin-top: 5px; background-color: rgb(223,223,223); border: 1px solid rgb(128,128,128); padding: 5px;">


        <div style="float: left;"><input type="button" value="<<"></div>
        <div style="float: left;"><input type="button" value="<"></div>
        <div style="float: left;"><input type="text"></div>
        <div style="float: left;">of</div>
        <div style="float: left;"><input type="text"></div>
        <div style="float: left;"><input type="button" value=">"></div>
        <div style="float: left;"><input type="button" value=">>"></div>



</div>

htmlcss

Answer №1

Make sure to insert a <div style="clear:both"> right after the final input field

Answer №2

By using the float property in your styling, you are causing elements to break out of the flow of their parent div. To resolve this issue, simply add the overflow: hidden property.

Adding overflow: hidden to the parent div will fix the problem and maintain the layout as intended.

<div style="width: auto; margin-top: 5px; background-color: rgb(223,223,223); border: 1px solid rgb(128,128,128); padding: 5px; overflow: hidden;">
    <div style="float: left;"><input type="button" value="<<"></div>
        <div style="float: left;"><input type="button" value="<"></div>
        <div style="float: left;"><input type="text"></div>
        <div style="float: left;">of</div>
        <div style="float: left;"><input type="text"></div>
        <div style="float: left;"><input type="button" value=">"></div>
        <div style="float: left;"><input type="button" value=">>"></div>

You can see a live demonstration here: http://jsbin.com/zixepizi/1/

Answer №3

To ensure the proper alignment, make sure to clear the float as shown below:

<!--        BUTTONS         -->
<div style="width: auto; margin-top: 5px; background-color: rgb(223,223,223); border: 1px solid rgb(128,128,128); padding: 5px;">


        <div style="float: left;"><input type="button" value="<<"></div>
        <div style="float: left;"><input type="button" value="<"></div>
        <div style="float: left;"><input type="text"></div>
        <div style="float: left;">of</div>
        <div style="float: left;"><input type="text"></div>
        <div style="float: left;"><input type="button" value=">"></div>
        <div style="float: left;"><input type="button" value=">>"></div>


        <!-- Add this here to clear the floats -->
        <div style="clear:both"></div>
</div>

Check out the solution on jsFiddle

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

Displaying a preloaded image on the canvas

Once again, I find myself in unfamiliar territory but faced with the task of preloading images and then displaying them on the page once all elements (including xml files etc.) are loaded. The images and references are stored in an array for later retrie ...

javascripthtmlcanvas

The widths of inputs vary between FireFox and Chrome

I've been investigating why the widths in FireFox and Chrome show a significant difference. This variation is causing a problem with my Modal in the views. Chrome: https://i.sstatic.net/D0lgu.png FireFox: https://i.sstatic.net/do4YU.png Upon comp ...

htmlcsswidthpixel

Instructions on creating a Superfish menu with a vertical layout in the first level and a horizontal layout in the second level

Currently, I am using the Superfish menu in Drupal7 and have designed my first item level to be vertical. However, I now want to style my second item level horizontally. I have tried various CSS approaches and added some class names via jQuery like $(&apo ...

javascripthtmlcssmenusuperfish

persistent image in HTML affecting the layout of the header

I have been struggling with positioning a sticky image above my navigation bar. Here is the code for the sticky image: img.sticky { position: -webkit-sticky; position: sticky; top: 0; width: 200px; z-index: 1000; } <div> <a href=" ...

javascripthtmlcss

Protecting against CSRF and XSS attacks in Single page applications can be achieved without relying on cookies

We have a unique setup on our mobile website where it functions as a single page application using cfmanifest to load cache. However, we are facing an issue after login when users navigate between 5 to 10 pages and need to submit confidential data through ...

javascriptjqueryhtmlxsscsrf

Verifying the "select" dropdown option prior to final submission

My website features multiple select dropdowns that require validation before submission. For instance, there may be a situation where seven select dropdowns are present as described below. My desired validation criteria is: If there are 5 or more "sel ...

javascriptphpjqueryhtml

Unable to retrieve the data-id for each div element containing a data attribute

I am having trouble retrieving the ids from the data-id attribute of each div inside a specific container. Strangely, I am getting [7,7,7,7] even though there are only 3 divs with different data-ids? Below is my HTML structure: <div id="activated_bloc ...

jqueryhtml

The title tag's ng-bind should be placed outside of the element

When using ng-bind for the title tag inside the header, it seems to produce unexpected behavior. Here is an example of the code: <title page-title ng-bind="page_title"></title> and this is the resulting output: My Page Sucks <titl ...

javascripthtmlangularangular7ng-bind

Retrieving information from an API and incorporating it into JSX results in displaying text within the HTML element

I have retrieved data from an API with the following response: { "name": "family: woman, woman, girl, girl", "unicode": "1F469 200D 1F469 200D 1F467 200D 1F467", "html": "&#128 ...

htmlreactjsapijsx

Tips for Customizing the Width of Your Material UI Alert Bar

At the moment, I have refrained from using any additional styling or .css files on my webpage. The width of the Alert element currently spans across the entire page. Despite my attempts to specify the width in the code snippet below, no noticeable change ...

javascriptcssreactjstypescriptmaterial-ui

Creating CSS wrappers around div elements of varying sizes

I am looking for a way to "wrap" different divs of varying sizes, similar to how Microsoft Word wraps text around an image. I have a simplified structure outlined below: <div id = "div1"></div> <div id = "div2"></div> <div id = ...

csshtmlcss-float

Issues with refreshing the content in form fields

I am encountering issues with reloading fields, especially the datepicker in a form. The website is live at , and when I attempt to search using the search form, it works fine the first time. However, if I press the reset button before searching again, th ...

phpjqueryhtml

Guide on adjusting the darkness of a MaterialUI Avatar component image and adding text to it

I'm currently working with the Avatar component from Material UI along with Tailwind CSS. I found that by simply adding the image URL to the src, it displays the avatar successfully. <Avatar alt="Cindy Baker" src="https://mui.com/sta ...

javascriptcssreactjsmaterial-uitailwind-css

A guide on displaying names individually in AngularJS

HTML <ul class="ul_nav"> <li ng-repeat="teams in teamArray" style="-webkit-animation-delay: {{$index * 150}}ms"> {{teams.team_name}} </li> </ul> In this section, I am able to sh ...

angularjshtmlcssangularjs-ng-repeat

Browser behavior for animating background-position varies

check out this interactive demo - The objective is to create a unique perspective effect while scrolling, specifically on the background. The effect functions properly on Chrome and IE7, IE8 versions; however: Issues arise with IE9, where the background ...

jquerycsscross-browser

What could be causing the issue with the functionality of third-level nested SortableJS drag-and-drop?

I am currently utilizing SortableJS to develop a drag-and-drop form builder that consists of three types/levels of draggable items: Sections, Questions, and Options. Sections can be dragged and reorganized amongst each other, Questions can be moved within ...

javascripthtmldrag-and-dropsortablejs

Styling a dynamically-injected div using an AJAX request (xhrGet)

Hello everyone, currently I am using the code below to fetch updated content after receiving a "push" event from a server. The new content is then used to replace the existing div/content. However, I'm facing an issue where none of my styles from the ...

javascripthtmlcssajaxdojo

Understanding the user's preference for text alignment and managing how the text is displayed in a text area (or text field) within a ReactJS application

My latest project is an app that features multiple text areas. Personally, I use the app with two languages - English and another language that is aligned to the right. However, the default setting has the text-areas aligning to the left. To change this ...

htmlcssreactjstext-align

Grid is failing to adjust its size to accommodate the width of the items

Is there a way to adjust the width of each grid box based on the content nested inside? For instance, in the case of the second testimonial where the item has a max-width of 500px, but the grid box remains unchanged. I attempted to set widths and max-wid ...

htmlcss

What are the steps to creating a webpage with scrolling in HTML?

Essentially, I have a question that may sound similar to others, but please hear me out. What I am looking for is the ability to have one photo fixed in place while being able to scroll within it. To provide a better understanding, here is an example: www. ...

htmlcss