How can you align two div elements side by side, if the first div is spanning across two lines?

I'm looking to position two divs next to each other, with the second div starting right where the first one ends. I came across a similar question on Stack Overflow, but unfortunately, it didn't have the answer I needed.

<div id="wrapper">
    <div id="div1">The issue arises when the first line wraps, causing the second div not to appear properly.</div>
    <div id="div2">They should be positioned side by side.</div>
</div>
#div1 {
   float:left;
    display: inline-block;

}
#div2 {
    float:left;
    display: inline-block;
}

Here's an example on JSFiddle that I tried out...

The goal is for the second div to start exactly where the first div ends, even if it crosses into a new line midway through a word.

htmlcss

Answer №1

Simply include the following CSS code in both div elements:

width: 50%;

LATEST UPDATE

Don't forget to add a semicolon at the end of float:left; for #div1. Make sure to add the semicolon there.

Answer №2

To make the div elements appear next to each other, simply add display: inline-block; to both of them. In the provided code snippet, there seems to be a missing semicolon after the float: left property, causing issues with the stylesheet. By removing the float: left and using inline-block, a space will be created between the two div elements. Here are examples with and without the float: left property:

Without float: left

#div1 {
  display: inline-block;
}
#div2 {
  display: inline-block;
}
<div id="wrapper">
  <div id="div1">The two divs are next to each other when displayed in a horizontal manner.</div>
  <div id="div2">That's the magic of CSS!</div>
</div>

With float: left

#div1 {
  float: left;
  display: inline-block;
}
#div2 {
  float: left;
  display: inline-block;
}
<div id="wrapper">
  <div id="div1">The two divs are next to each other when floated to the left.</div>
  <div id="div2">CSS makes layout so much easier.</div>
</div>

Answer №3

Have you considered using a span instead of a div? Give it a try and see if it works for you. 

<span>some text some text some text some text some textsome text some text some text vsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome text</span>
<span>next line text</span>

Answer №4

Are you in need of using inline-block elements? Added some background colors to showcase the div boxes.

HTML

<div id="wrapper">
    <div id="div1">
        The two divs are, when the first line moves to the second then, the second div is not visible.
    </div>
    <div id="div2">
        positioned next to each other.
    </div>
</div>

CSS

#div1 {
    float:left;
    //display: inline-block;
    background: red;
}
#div2 {
    float:left;
    //display: inline-block;
    background: blue
}

http://jsfiddle.net/nrzey328/3/

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

Is it possible to track keystrokes without the use of text input fields?

For various unimportant reasons, I need to use JavaScript to create links instead of using the anchor tag. I want the behavior to mimic the anchor tag, allowing users to open a link in a new tab when holding down the Ctrl key or in a new window when holdin ...

javascripthtmlhyperlinkwindowinternet-explorer-9

What steps can be taken to ensure that the header elements such as the image, text, and button are

I am currently working on a website project using Bootstrap 5. For the header section of the site, I have incorporated a carousel from Bootstrap that includes images, text, and buttons. My main objective is to ensure that all elements within the carousel ...

htmlcssresponsive-designfrontendbootstrap-5

jQuery deduct a value from a given value

i have a full duration that is divided into multiple sections, the user needs to input the duration for each section i would like the system to calculate and display the remaining duration from the full duration, regardless of whether the user fills out ...

javascriptjqueryhtml

What options do I have for personalizing event listeners in d3.js?

I am currently working on a simple program that involves using a slider to move a rectangle across a webpage. I have set up the slider like this: <input type = "range" min = "5" max = "500" value = "5" id = "xvalue" > and I am able to access the sl ...

javascripthtmld3.js

The "Overall Quantity" of items will vary as it goes through different numerical values, despite the fact that I employed --

I am currently working on an e-commerce website with a shopping cart feature. The cart displays the number of items added to it, which increases by one when 'Add to Cart' is clicked and decreases by one when 'Remove' is clicked. However ...

javascripthtmlcss

Unable to extract tabular information using BeautifulSoup on a specific webpage

I recently came across a helpful tutorial online about web scraping with Python using Beautiful Soup. The tutorial can be found at this link. Following the steps in the tutorial, I successfully scraped data from an HTML table. However, when I attempted to ...

pythonhtmlweb-scrapinghtml-tablebeautifulsoup

angular2 ngFor is not functioning properly

I'm having an issue where I cannot get textboxes to appear whenever a user clicks a button. I am attempting to achieve this using ngFor, but for some reason, the ngFor is not iterating as expected. Even after trying to change the array reference with ...

javascripthtmlangulartypescript

Unique phrase: "Personalized text emphasized by a patterned backdrop

I'm facing a challenge and struggling to find a way to highlight text using CSS or jQuery. My goal is to have an image on the left, another one on the right, and a repeated image in between. Since there are some long words involved, I need a dynamic s ...

javascriptjqueryhtmlcss

Python code encountering issues within Django framework

I'm having trouble showing and hiding HTML elements based on the data I receive after clicking a button. The output of another Python file will generate this data, but the if statement doesn't seem to be working as expected: {% if data == 'e ...

pythonhtmldjango

Significant contrast in how text is displayed between Chrome and Firefox

Experiencing significant discrepancies in text rendering between Chrome and Firefox. Chrome appears to apply anti-aliasing rules that reduce the text size considerably. Attempts have been made to adjust -webkit-font-smoothing, letter-spacing and word-spac ...

cssfirefoxgoogle-chromefontsantialiasing

Nodemailer is failing to send emails on Heroku

Recently, I encountered an issue that has been puzzling me. I use cloud9 for work and nodemailer works perfectly fine, sending all emails from a form I created. However, when I deployed a small server to Heroku with just a change in an environmental vari ...

javascripthtmlnpm

Creating a method to emphasize specific words within a sentence using a custom list of terms

Looking for a way to highlight specific words in a sentence using TypeScript? We've got you covered! For example: sentence : "song nam person" words : ["song", "nam", "p"] We can achieve this by creating a custom pipe in typescript: song name p ...

htmlangulartypescript

Customize chrome's default shortcuts with JavaScript

I'm working on an application that requires me to override some shortcut keys in the Chrome browser. While I'm able to create custom shortcuts to trigger alerts like in this Stackblitz example, I'm having trouble overriding a few default sho ...

javascripthtmlgoogle-chrome

Automatically reloading POST request when browser back button is pressed

Our web application is built on Spring MVC and Thymeleaf. When a user lands on the home page with a GET request, they enter 2 parameters and submit a POST request. After successful submission, they are directed to another page (let's call it page2) wi ...

javascripthtmlbrowser

Creating blinking or flashing text using CSS 3 is a fun way to add eye-catching animation

Here's the current code I'm using: @-webkit-keyframes blinker { from { opacity: 1.0; } to { opacity: 0.0; } } .waitingForConnection { -webkit-animation-name: blinker; -webkit-animation-iteration-count: infinite; -webkit-animation-timi ...

htmlcsscss-animationsopacity

Concealing and wrapping text using CSS in a table structure

My table is displayed below: <table style="width: 100%; white-space: nowrap; overflow: hidden;"> <tbody><tr> <th> Department </th> <th> Function </th> ...

htmlcss

Tips for aligning ticks to the left on a d3 bar chart

i recently finished creating a stacked bar graph with varying tick lengths on the y-axis side. my goal is to align the text within the ticks to the left, similar to this example: http://jsfiddle.net/2khbceut/2/ here is the HTML: <title>Diverging Sta ...

javascripthtmlcssd3.js

Ensuring the text remains positioned above another element constantly

Looking to have the text float above a regular box and resize the font size accordingly? Here's what I've tried: https://jsfiddle.net/a87uo3t2/ @import url('https://fonts.googleapis.com/css?family=Share+Tech+Mono'); body { margin: ...

htmlcss

Ensure that an input field on the PHP form is required

Currently working on a form with multiple input fields. I'm wondering if there's a way to prevent the form from being submitted to the server if a specific field is left empty. I'd like to use a JavaScript pop-up box to notify the user inst ...

javascriptphpjqueryhtml

How can I prevent a browser from allowing users to select an image tag?

I'm dealing with an issue on my webpage where I have an image that is inadvertently picking up mouse clicks, causing the browser to perform drag and drop actions or highlight the image when clicked. I really need to use the mousedown event for somethi ...

javascripthtmldom