What is the best way to position a full width input beside my div element?

Question

What is the best way to position a full width input beside my div element?

Having a small challenge with my CSS/HTML code, I am trying to position a full-width input next to my div.

This is my HTML :

<div class="leftdiv"></div>
<input type="text" id="title-input" placeholder="nothing"></div>

And here is the CSS :

.leftdiv {
    height: 60px;
    float: left;
    background-color: aqua;
    width: 60px;
}
#title-input {
    width: 100%;
    height: 60px;
}

I need the "leftdiv" to be exactly 60px x 60px, so I'm unsure if using Bootstrap's row would work for this case.

html css twitter-bootstrap

Answer 1

Answer №1

Utilizing Flexbox for this task is the way to go:

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.wrap {
  display: flex;
}
.leftdiv {
  height: 60px;
  background-color: aqua;
  width: 60px;
}
#title-input {
  flex: 1;
  height: 60px;
}

<div class="wrap">
  <div class="leftdiv"></div>
  <input type="text" id="title-input" placeholder="nothing" />
</div>

Answer 2

Utilizing Flexbox for this task is the way to go:

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.wrap {
  display: flex;
}
.leftdiv {
  height: 60px;
  background-color: aqua;
  width: 60px;
}
#title-input {
  flex: 1;
  height: 60px;
}

<div class="wrap">
  <div class="leftdiv"></div>
  <input type="text" id="title-input" placeholder="nothing" />
</div>

Answer 3

Answer №2

Your error lies in prematurely closing the </div> tag right after opening it. Make sure to keep it open before ending it.

Here is the correct structure:

<div class="leftdiv">
  <input type="text" id="title-input" placeholder="nothing">
</div>

Check out this link for reference.

Answer 4

Your error lies in prematurely closing the </div> tag right after opening it. Make sure to keep it open before ending it.

Here is the correct structure:

<div class="leftdiv">
  <input type="text" id="title-input" placeholder="nothing">
</div>

Check out this link for reference.

What is the best way to position a full width input beside my div element?

Answer №1

Answer №2

Similar questions

Is there a method to make an <img> automatically adjust its width to fit that of its containing <div> even if the style/attributes are

Removing parent elements with JQuery

Utilize the JMX HTML adapter in conjunction with Apache Camel's JMX capabilities

When hovering over an image, another image is revealed

Explanation: The information box does not appear when the mouse hovers over it

html div elements may not align correctly

Tick the box to activate the ability to uncheck multiple boxes when there are already a certain number of boxes checked

Error with Bootstrap 4 tabs and JavaScript AJAX implementation

When I engage with the input field, it ceases to be in focus

The popover box adjusts its width to fit the contents in Chrome, however, it does not do so in

Issues arise when the sub-menu does not function properly and overlaps with other elements of

Link the ng-model to an asynchronous function for fetching and updating data

What is the most effective way to retrieve the inner HTML of an HTML tag using JavaScript or jQuery?

Stop menu items from shifting when focused

Arranging an image and button within a column div row using Bootstrap

What is the reason behind using <script> tag for scripts, instead of using <style> tag for external CSS files?

Optimizing VueJS applications with browser caching features for faster loading

To implement a class based on a media query, only pure CSS or HTML is required

Embed an audio file onto a webpage

What is causing the failure of these "span" elements within an "a" tag in IE7?