What is the best way to structure the <button> element to prevent it from breaking right after a textarea?

Suppose I have a form with fields for Name, Email, and Message. But the "send message" button is not aligning properly and appearing between the textarea and the last input field. What could be causing this issue?

Here is a snippet of my HTML form:

<form class="form-contact">
<div class="labels">
<label for="name">Name:</label><input name="name" type="text" />
<label>Email:</label><input name="name" type="text" />
<label>Message:</label><textarea name="name" type="text"></textarea>
<button>send</button>
</div>
</form>

Here is the accompanying CSS:

.form-contact { 
    width:100%;
    margin:auto; 
}
label { 
    text-align:right;
    width:300px;
    float:left; 
    font-size:24px; 
    margin-top:27px; }
.labels {
    margin-top:36px;
    float:
}
form { 
    display:inline; 
    margin:0; 
}
input {
    float:left; 
    margin-top:28px; 
    margin-left:27px; 
    height:23px; 
    line-height:23px;
    font-size:23px; 
    color:#01a4c0; 
    width:309px; 
}
textarea { 
    float:left;
    margin-top:28px;
    margin-left:27px;
    height:23px;
    line-height:23px; 
    font-size:23px;
    color:#01a4c0;
    width:309px; 
    height:134px;
}
button {
    width:88px; 
    height:29px; 
    border:none; 
    background:#01a4c0; 
    color:#FFF; 
    font-size:22px; 
    text-align:center;
    float:left; 
    cursor:pointer; 
    margin-top:13px; 
    display: block;
}

Answer №1

To ensure elements are cleared, add the CSS property clear:both;

<button style="clear:both">send</button>

For a demonstration, visit http://jsfiddle.net/yzK2k/

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

Dynamically populate select options using Spring Boot Ajax technology

Hey everyone, I need some help with populating a select tag with a list of objects in JavaScript. Here's an example of the code: @RequestMapping(value="/getAllIndustries") @ResponseBody public List<IndustryModel>getAllIndustries() { return ...

What is the best way to ensure my arrow text remains properly positioned when using fullpage.js?

Seeking guidance from the web development community. I am currently working on a client's website that utilizes fullpage.js and encountering a persistent issue. On slide1 of the website, I am struggling to display the correct text next to the arrows. ...

Preventing Canvas Image Disappearance with JavaScript's onload Event

My current issue involves adding an Image to my webpage. However, every time I hit the refresh button, the image disappears. After researching on Stack Overflow, it was suggested to include window.onload=yourDrawFunction() in the code. Despite following th ...

My goal is to extract the usernames of all sellers from the Poshmark webpage using a combination of JavaScript, Cheerio, and Axios

After experimenting with various methods, I've come close to the solution, but it only retrieves one of the div elements I'm looking for... Although I managed to retrieve multiple divs at one point, when I attempted to extract text using the .te ...

What is the best way to adjust the CSS of an element within the #shadow-root (open) in web development?

When dealing with a "#shadow-root (open)" element, it appears that manipulating the style using only CSS is not feasible. The shadow-root was generated by a third-party JavaScript script and displays an element as an overlay on the page that I am trying to ...

unable to submit Angular form via post method

I'm encountering an issue with the code I wrote in HTML. The error message says, "The page you are looking for cannot be displayed because an invalid method (HTTP verb) is being used." This is how my HTML code looks: <form name="payment" action ...

Attempting to extract only the text content from a specific div using XPath

I am currently facing a challenge in writing a script to extract the title element from a poorly coded webpage. The developer who created this website did not use any classes, only div elements. Below is a snippet of the source code I am trying to scrape: ...

Enhancing a validation form with the 'onblur' event handler

Exploring the realm of JavaScript, I find myself intrigued by the concept of creating a validation form that activates upon clicking out of the input field. Implementing various techniques to integrate this feature into an existing form has been both chall ...

Is a table cell's border considered as part of its content?

A discrepancy is observed in the rendering of a document on Firefox and Chrome browsers: <!DOCTYPE html> <html> <head> <title>Testing table rendering</title> <style> table { ...

The clickable functionality of buttons and text labels in Vue is currently not working

When I try to input text into the registration page in vue, nothing happens when I click the register/login button. However, if I press TAB and then enter my password followed by another TAB and ENTER, it works. This is the code snippet for the login-box: ...

When it comes to creating a CSS drop-down menu, don't forget to incorporate an additional <ul

I've created a drop-down menu using CSS with 5 visible list items. When hovering over one of the list items, it highlights and triggers a drop-down effect to display another list underneath. Essentially, you have an initial set of options, and upon ho ...

Css animations not functioning properly in Chrome

I've been working on this animation project, here is the link: http://codepen.io/Zeaklous/pen/dIomg It seems to work perfectly fine on Firefox but not on Chrome. Here is the code snippet: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/ ...

Copying content from one website to another using JavaScript

Currently, I am working on a website which stores data and I require assistance in transferring this data to another site. If you have any suggestions using Javascript or other methods, please let me know. ...

Create a rectangular container with text using CSS

Looking to achieve a square box design using CSS with specific dimensions? Want to insert text inside the square and ensure it is horizontally centered within the square? Check out this code snippet: #myid { width: 100px; height: 100px; ...

barchart rendered in SVG without the use of any external libraries

Creating a stacked barchart with SVG and HTML without relying on any third-party library has been quite a challenge. Despite searching extensively online, I have not come across a single resource that demonstrates how to build a stacked bar chart using pla ...

Switching up the default font style within TinyMCE

After successfully changing the default font within the editor using the guidelines provided here, I have encountered a new issue. The original default font no longer appears in the font drop-down list. The previous default font was Verdana, and the new d ...

Showing Text Information from a distant web server's jQuery.getJSON() script

I am currently working on a personal project that involves displaying data from a remote server. The HTML code I am using looks like this: <script> jQuery.getJSON("http://someurl.com/something.cgi? AJZ=1&STOCK=S", function(data) { if (data.inform ...

Achieve full height for the span tag within a div using CSS styling

I am facing a particular scenario: In a bootstrap row with 2 columns: - the first column contains a table with a button to add new rows - the second column has a label and a span (although it doesn't have to be a span) Both columns have equal hei ...

Position a component in relation to another component using AngularJS

Utilizing ng-show and ng-hide, I created a descriptive box that appears below text when clicked. However, there is an issue as the description box does not align directly under the text, similar to what is shown in this image https://i.stack.imgur.com/phBh ...

Changing the visual appearance of an alert in JavaScript and HTML

My knowledge in JavaScript is limited, but I have a script that retrieves a query from a Python service to a Mongodb database. The query is returned in the following format: [{CHAIN: "STREET ELM, ELMER", CODE: "1234"}, {CHAIN: "STREET LM, LMAO", CODE: ...