In my code snippet below:
<html>
<body>
<div style="width: 700px;">
<span>test</span>
<input style="width: 100%;"></input>
</div>
</body>
</html>
I am facing an issue where the span and input elements inside the div do not behave as I expected. Ideally, I want both the span and input to occupy 100% of the width of the div, with the input starting right after the span and extending till the end of the div without wrapping to a new line. How can I achieve this desired layout?
For a design with fluid width that works properly:
Check out: http://jsfiddle.net/kxEML/
CSS Code:
.inputContainer {
width: 300px;
border: 1px dashed #f0f
}
.inputContainer label {
float: left;
margin-right: 5px;
background: #ccc
}
.inputContainer div {
overflow: hidden;
}
.inputContainer input {
width: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: block
}
HTML Code:
<div class="inputContainer">
<label>test</label>
<div><input /></div>
</div>
It's clear that the current setup is not functioning correctly. The input field is taking up the full 700px width.
<div style="width: 700px;">
<span style="width:20%">test</span>
<input style="width: 80%;"></input>
</div>
Adjusting the widths in this way should lead to a better result.
To make them sit side by side on the same line, ensure that their combined width is less than 100% or 700px to fit within the div. By setting their widths totaling around 100% and using the float property, you are instructing the browser to align them flush left, resulting in them being displayed next to each other on the same line. :D
<html>
<body>
<div style="width: 700px;">
<span style="width: 49%; float: left; background-color: blue;">test</span>
<input style="width: 49%; float: left; background-color: green;"></input>
</div>
</body>
</html>
Applying width:100% to the input element sets it to 700px. By adjusting the width of the text accordingly, the row becomes wider, causing the input to wrap onto the next line. To prevent this, consider changing the width of the input to 95% for a better fit.
Try it: http://jsfiddle.net/q75C8/
Alternatively, a jQuery solution could be implemented as shown below:
$("input").width(($("div").width()-10)-$("span").width());
See it in action: http://jsfiddle.net/q75C8/2/
Remember, there's no need to include </input>.
Here's a different approach you can try:
<html>
<head>
<style type="text/css">
div { width: 700px; }
label { display: block; text-align: right; }
label > input { width: 50%; }
</style>
</head>
<body>
<div>
<label for="user-name">User Name: <input name="user" id="user-name" /></label>
</div>
</body>
</html>
Opting for using a LABEL instead of a SPAN ensures better accessibility, especially for visually impaired users.
By setting "display: block" on the LABEL, it will expand to fill the entire width of its container (the DIV) and appear on a new line.
The "width: 50%" attribute on the INPUT element allows it to take up half of the LABEL's width.
Applying "text-align: right" aligns the label text to the right edge of the INPUT field.
Remember to use the ID of the INPUT element in the FOR attribute of the LABEL, not its NAME. This adjustment makes the connection clear between the two elements.
<html>
<style type="text/css>
.left {
float:left;
width:15%;
margin:0px auto;
padding:0px;
}
.right {
float:right;
width:85%;
margin:0px auto;
padding:0px;
}
.clearthis {
width:100%;
margin:0px auto;
padding:0px;
clear:both;
}
</style>
<body>
<div style="width: 700px;">
<div class="left">
<span>sandbox</span>
</div>
<div class="right">
<input style="width: 100%;"></input>
</div>
<div class="clearthis"></div>
</div>
</body>
</html>
something in this format could possibly function
I utilized table elements to achieve the desired layout:
<html>
<body>
<div style="width: 700px;">
<table border="0" style="width: 100%;">
<tr>
<td><span>example text</span></td>
<td style="width: 100%;"><input style="width: 100%;"></input></td>
</tr>
</table>
</div>
</body>
</html>
If you're looking for an alternative to using Div and CSS, consider utilizing a table structure:
<table>
<tr>
<td><span>Username</span></td>
<td><input id="username" name="username" value="" type="text" autocomplete="on" placeholder="Username">
</td>
</tr>
<tr>
<td><span>Password</span></td>
<td><input id="password" name="password" value="" type="password" placeholder="Password">
</td>
</tr>
<tr>
<td colspan="2">
<button type="submit">Login</button>
</td>
</tr>
</table>
Seeking assistance in creating a basic subscriber email form where users can input their email addresses. Upon submission, I would receive an email notification indicating a new subscription and the client would be informed that we will get in touch with t ...
When attempting to load a HTML page inside the div, I encountered the following issue: <a href="#1" title="" class="base-banner" page="www.google.com for example"> <img src="images" alt=""></a> <div id="landingpage"> </div> ...
I'm having trouble arranging multiple divs in a single line on my website. Utilizing float isn't an option for me due to the dynamic number of divs generated by Django posts. Here is the code I am currently using: Index.html <!DOCTYPE html&g ...
When it comes to tables, there's a <caption>, and for figures, there's a <figcaption>. But what tag should be used for pre? (The goal is to provide a caption for a listing, but since the <listing> tag has been removed, <pre& ...
My task involves creating a table using div elements. The layout of the table includes two columns structured as follows: <div> <div class = "columnborder"><span>Some text for column 1</span></div> <div><span>Some ...
When visiting the emberjs.com homepage, you will find an example of a todo list using Ember.js and Handlebars.js. Within the todo list, there is an extension for a .hbs file. I am curious - what exactly is a .hbs file? And how can I include a .hbs script ...
I am working with Bulma CSS and trying to ensure that all my buttons are the same size. Currently, each button appears to have a different size based on the text content. I have looked into using the "is-fullwidth" option, but it makes the buttons too la ...
Recently, I came across this code snippet: jQuery(document).ready(function($){ $( window ).scroll(function() { var current_top = $(document).scrollTop(); var heights = window.innerHeight; document.getElementById("sHome").styl ...
I am currently working on creating a mobile landscape design for a website specifically tailored for iPhone SE and iPhone 12. In the process, I encountered an issue that caught my attention: Within two different breakpoints, I made adjustments to the top ...
We developed a JavaScript script to detect duplicates or potential duplicates, but it seems to have some issues with certain words like "tennis." The script functions correctly in most cases, but fails when analyzing phrases related to the word "tennis" fo ...
<a href="img1.jpg" rel="zoom-id:bike" rev="img1.jpg"> <img src="" class="img-thumb"/></a> Shown above is a snippet of HTML code. I wonder if it's possible for the attribute rev="img1.jpg" to have a class that only affects the s ...
When working with the Vue package, I have a need to import a CSS file directly into the index.html file. Currently, the 'index.html' file mounts #app > 'App.vue', which then mounts Todo.vue using the router. Any assistance on how to a ...
Is it possible to achieve a reverse transition animation on hover out using CSS? I want the "Menu" text to slide to the right blue line when I hover out, and after a delay of 400ms, slide back from the left grey line. Can this be done? .menu { displ ...
I am currently in the process of developing a website using Angular 12, and although it may not be relevant, I am also incorporating SCSS into my project. One issue that I have encountered pertains to the bootstrap module, specifically with components such ...
How can I extract the contents of a div using bs4? >>> Doc <div class="document"> <p>Text.</p> <p>More text</p> </div> >>> type(Doc) bs4.element.Tag I am looking to retrieve: <p>Text.</p> ...
Currently in the process of learning about jQuery and testing its functionality, however, I am facing an issue where changes are not being reflected. The error message states that it is unable to load. I have confirmed that I am using Google CDN and also h ...
In my project, I utilize SCSS and would like to incorporate Bootstrap.scss in order to create a single class that inherits multiple Bootstrap classes. For instance: .myButtonClass { @col-xs-12; @col-sm-6 } This way, I can replace class="col-xs-12 col-sm- ...
I am trying to create a toggle effect for an information table that needs to be displayed above another DIV. I have managed to achieve this using z-index and position:absolute, but I am wondering if there is a way to do it without using absolute positionin ...
After replicating the code from http://datatables.net/release-datatables/extensions/TableTools/examples/simple.html in my Visual Studio project, I organized the files by saving two css files as style1.css and style2.css, along with three js files named sc ...
My goal is to replicate a checkbox example from Vue.js's documentation. However, when I import Vue into codepen.io and copy the code for multiple checkboxes into the JS field, then paste the HTML into the designated field, something isn't working ...