Two div elements refusing to be positioned side by side

Question

Two div elements refusing to be positioned side by side

I'm struggling to position two div elements next to each other, with a third one to be added later. I've experimented with floating, display, and positioning options, but nothing seems to work. I've even copied code from other websites, but it still doesn't align as intended.

HTML:

<div class="diensten">
    <div id="dienst1">
        <h2>Ontruimingsoefening</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius orci ac velit sodales, nec lacinia eros aliquam. Phasellus consectetur interdum ligula, quis faucibus libero faucibus eu. </p>
        <img src="photos/photo1.jpg" alt="Photo 1">
    </div>

    <div id="dienst2">
        <h2>Beheer brandmeldinstallatie</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius orci ac velit sodales, nec lacinia eros aliquam. Phasellus consectetur interdum ligula, quis faucibus libero faucibus eu.</p>
        <img src="photos/photo2.jpg" alt="Photo 2">  
       </p>
    </div>
 </div>

CSS:

.diensten h2 {
    padding-top: 40px;
}

.diensten p, h2 {
    font-family: Arial, sans-serif;
    padding: 20px;
}

.diensten {
    position: relative;
    display: inline-block;
    height: 500px;
    background-color: #FFFFFF;
    margin: auto;
}

#dienst1 {
    margin-left: 90px;
    height: 500px;
    width: 500px;
    box-shadow: 0px 0px 30px 0px #000;
}

#dienst2 {
    margin-left: 900px;
    height: 500px;
    width: 500px;
    box-shadow: 0px 0px 30px 0px #000;
}

#dienst2 img{
    height: 300px;
    width: 450px;
}

html css position css-float

Answer 1

Answer №1

To ensure that #dienst1 and #dienst2 are displayed side by side, you can add display: flex to the parent container. Additionally, consider removing the large margin-left on #dienst2, although it is not necessary for alignment. Any other elements placed adjacent to them will also be displayed in a row.

.diensten h2 {
    padding-top: 40px;
}

.diensten p, h2 {
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
    padding: 20px;
}

.diensten {
    position: relative;
    height: 500px;
    background-color: #FFFFFF;
    margin: auto;
  display: flex;
}

#dienst1 {
    margin-left: 90px;
    height: 500px;
    width: 500px;
    box-shadow: 0px 0px 30px 0px #000;
}

#dienst2 {
    height: 500px;
    width: 500px;
    box-shadow: 0px 0px 30px 0px #000;
}

#dienst2 img{
    height: 300px;
    width: 450px;
}

<div class="diensten">
  <div id="dienst1">
    <h2>Emergency Evacuation Drill</h2>
    <p>We conduct various emergency evacuation drills tailored to healthcare facilities, educational institutions, daycare centers, restaurants, and retail stores. These drills can be conducted both theoretically (Table Top) and practically using professional equipment to make the drill as realistic as possible. </p>
    <img src="Photos/IMG_2670.JPG" data-tilt data-tilt-max="30" data-tilt-speed="400" data-tilt-perspective="900">
  </div>

  <div id="dienst2">
    <h2>Fire Alarm System Management</h2>
    <p>We handle the mandatory monthly and quarterly management tasks of the fire alarm system according to NEN 2654 in a professional manner for healthcare facilities, educational institutions, daycare centers, restaurants, office buildings, and retail stores. The maintenance of the fire alarm system includes testing the reporting to the fire department from automatic smoke detectors and manual call points, testing the reporting of faults in the fire alarm system, a visual inspection of connected components, updating and maintaining the logbook.
      <img src="Photos/IMG_2704.JPG">
    </p>
  </div>
</div>

Answer 2

To ensure that #dienst1 and #dienst2 are displayed side by side, you can add display: flex to the parent container. Additionally, consider removing the large margin-left on #dienst2, although it is not necessary for alignment. Any other elements placed adjacent to them will also be displayed in a row.

.diensten h2 {
    padding-top: 40px;
}

.diensten p, h2 {
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
    padding: 20px;
}

.diensten {
    position: relative;
    height: 500px;
    background-color: #FFFFFF;
    margin: auto;
  display: flex;
}

#dienst1 {
    margin-left: 90px;
    height: 500px;
    width: 500px;
    box-shadow: 0px 0px 30px 0px #000;
}

#dienst2 {
    height: 500px;
    width: 500px;
    box-shadow: 0px 0px 30px 0px #000;
}

#dienst2 img{
    height: 300px;
    width: 450px;
}

<div class="diensten">
  <div id="dienst1">
    <h2>Emergency Evacuation Drill</h2>
    <p>We conduct various emergency evacuation drills tailored to healthcare facilities, educational institutions, daycare centers, restaurants, and retail stores. These drills can be conducted both theoretically (Table Top) and practically using professional equipment to make the drill as realistic as possible. </p>
    <img src="Photos/IMG_2670.JPG" data-tilt data-tilt-max="30" data-tilt-speed="400" data-tilt-perspective="900">
  </div>

  <div id="dienst2">
    <h2>Fire Alarm System Management</h2>
    <p>We handle the mandatory monthly and quarterly management tasks of the fire alarm system according to NEN 2654 in a professional manner for healthcare facilities, educational institutions, daycare centers, restaurants, office buildings, and retail stores. The maintenance of the fire alarm system includes testing the reporting to the fire department from automatic smoke detectors and manual call points, testing the reporting of faults in the fire alarm system, a visual inspection of connected components, updating and maintaining the logbook.
      <img src="Photos/IMG_2704.JPG">
    </p>
  </div>
</div>

Answer 3

Answer №2

To optimize the layout, include display:inline; and eliminate any margins

#dienst1 {
    margin-left: 90px;
    height: 500px;
    width: 500px;
    box-shadow: 0px 0px 30px 0px #000;
    display:inline;
}

#dienst2 {

   height: 500px;
   width: 500px;
   box-shadow: 0px 0px 30px 0px #000;
   display:inline;
}

Answer 4

To optimize the layout, include display:inline; and eliminate any margins

#dienst1 {
    margin-left: 90px;
    height: 500px;
    width: 500px;
    box-shadow: 0px 0px 30px 0px #000;
    display:inline;
}

#dienst2 {

   height: 500px;
   width: 500px;
   box-shadow: 0px 0px 30px 0px #000;
   display:inline;
}

Answer 5

Answer №3

Initially, divs are block level elements which means they each appear on their own lines. There are various ways to position two divs side by side based on the desired effect you want to achieve. Here are a few options:

Use float property to float them (float: left)
Make them inline block using display: inline-block
Utilize flexbox by applying display: flex to their parent element
Turn them into grid items by using display: grid on their parent (note: this is a newer feature and may require fallbacks)

If you're looking to enhance your CSS layout skills, exploring different methods is key as each serves a unique purpose. A good starting point would be checking out resources like learnlayout.com. For more in-depth knowledge, consider delving into my book.

Answer 6

Initially, divs are block level elements which means they each appear on their own lines. There are various ways to position two divs side by side based on the desired effect you want to achieve. Here are a few options:

Use float property to float them (float: left)
Make them inline block using display: inline-block
Utilize flexbox by applying display: flex to their parent element
Turn them into grid items by using display: grid on their parent (note: this is a newer feature and may require fallbacks)

If you're looking to enhance your CSS layout skills, exploring different methods is key as each serves a unique purpose. A good starting point would be checking out resources like learnlayout.com. For more in-depth knowledge, consider delving into my book.

Answer 7

Answer №4

If you plan to place 3 divs side by side, it's important to reduce the width of each individual div.

Having each one set at 500px won't work unless your target audience is using large desktop screens;

So, I adjusted the width and height to be 300px for all divs, with overflow set to scroll on the y-axis.

If you prefer not to have the scroll feature, simply remove 'overflow-y: scroll;' and any related stylings, while ensuring the height is specified so that all content remains visible)

For a better view, click on Fullscreen mode (Stackoverflow may force a resize)

Answer 8

If you plan to place 3 divs side by side, it's important to reduce the width of each individual div.

Having each one set at 500px won't work unless your target audience is using large desktop screens;

So, I adjusted the width and height to be 300px for all divs, with overflow set to scroll on the y-axis.

If you prefer not to have the scroll feature, simply remove 'overflow-y: scroll;' and any related stylings, while ensuring the height is specified so that all content remains visible)

For a better view, click on Fullscreen mode (Stackoverflow may force a resize)

Answer 9

Answer №5

To achieve the desired layout, you can apply the following CSS:

position: relative;
display: inline-block;

to the child div elements, and

position: absolute;

to the parent div. Here's a functional example with three paragraphs displayed side by side. The width has been reduced for better visibility within a small window. Feel free to adjust margins as needed.

.services h2 {
    padding-top: 40px;
}

.services p, h2 {
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
    padding: 20px;
}

.services {
    position: absolute;
    display: inline-block;
    height: 500px;
    background-color: #FFFFFF;
    margin: auto;
}

#service1 {
    margin-left: 90px;
    position: relative;
    display: inline-block;
    height: 500px;
    width: 100px;
    box-shadow: 0px 0px 30px 0px #000;
    overflow: hidden;
}

#service2 {
    margin-left: 90px;
    position: relative;
    display: inline-block;
    height: 500px;
    width: 100px;
    box-shadow: 0px 0px 30px 0px #000;
    overflow: hidden;    
}

#service3 {
    margin-left: 90px;
    position: relative;
    display: inline-block;
    height: 500px;
    width: 100px;
    box-shadow: 0px 0px 30px 0px #000;
    overflow: hidden;    
}

#service2 img{
    height: 300px;
    width: 450px;
}

<div class="services">
    <div id="service1">
        <h2>Evacuation Drill</h2>
        <p>We conduct various evacuation drills tailored for healthcare facilities, educational institutions, daycare centers, restaurants, and retail stores. These drills can be conducted in both theoretical (Table Top) and practical settings using professional equipment to create a realistic experience.</p>
        <img src="Photos/IMG_2670.JPG" data-tilt data-tilt-max="30" data-tilt-speed="400" data-tilt-perspective="900">
    </div>

    <div id="service2">
        <h2>Fire Alarm System Management</h2>
        <p>We provide monthly and quarterly management tasks for fire alarm systems according to NEN 2654 standards for healthcare facilities, educational institutions, daycare centers, restaurants, office buildings, and retail stores. Maintenance includes testing automatic smoke detectors and manual call points for fire brigade notification, testing fault notifications from the fire alarm system, visual inspection of connected components, and updating the maintenance logbook.<img src="Photos/IMG_2704.JPG"></p>
    </div>

    <div id="service3">
        <h2>Fire Alarm System Management</h2>
        <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text ...
        <img src="Photos/IMG_2704.JPG"></p>
    </div>
</div>

Answer 10

To achieve the desired layout, you can apply the following CSS:

position: relative;
display: inline-block;

to the child div elements, and

position: absolute;

to the parent div. Here's a functional example with three paragraphs displayed side by side. The width has been reduced for better visibility within a small window. Feel free to adjust margins as needed.

.services h2 {
    padding-top: 40px;
}

.services p, h2 {
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
    padding: 20px;
}

.services {
    position: absolute;
    display: inline-block;
    height: 500px;
    background-color: #FFFFFF;
    margin: auto;
}

#service1 {
    margin-left: 90px;
    position: relative;
    display: inline-block;
    height: 500px;
    width: 100px;
    box-shadow: 0px 0px 30px 0px #000;
    overflow: hidden;
}

#service2 {
    margin-left: 90px;
    position: relative;
    display: inline-block;
    height: 500px;
    width: 100px;
    box-shadow: 0px 0px 30px 0px #000;
    overflow: hidden;    
}

#service3 {
    margin-left: 90px;
    position: relative;
    display: inline-block;
    height: 500px;
    width: 100px;
    box-shadow: 0px 0px 30px 0px #000;
    overflow: hidden;    
}

#service2 img{
    height: 300px;
    width: 450px;
}

<div class="services">
    <div id="service1">
        <h2>Evacuation Drill</h2>
        <p>We conduct various evacuation drills tailored for healthcare facilities, educational institutions, daycare centers, restaurants, and retail stores. These drills can be conducted in both theoretical (Table Top) and practical settings using professional equipment to create a realistic experience.</p>
        <img src="Photos/IMG_2670.JPG" data-tilt data-tilt-max="30" data-tilt-speed="400" data-tilt-perspective="900">
    </div>

    <div id="service2">
        <h2>Fire Alarm System Management</h2>
        <p>We provide monthly and quarterly management tasks for fire alarm systems according to NEN 2654 standards for healthcare facilities, educational institutions, daycare centers, restaurants, office buildings, and retail stores. Maintenance includes testing automatic smoke detectors and manual call points for fire brigade notification, testing fault notifications from the fire alarm system, visual inspection of connected components, and updating the maintenance logbook.<img src="Photos/IMG_2704.JPG"></p>
    </div>

    <div id="service3">
        <h2>Fire Alarm System Management</h2>
        <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text ...
        <img src="Photos/IMG_2704.JPG"></p>
    </div>
</div>

Two div elements refusing to be positioned side by side

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Tips for accessing information from a FOR loop within DIV tags

obtaining data from an HTML input field

A step-by-step guide on showcasing a Word document in a popup window using MVC 4 Razor

Generating HTML widgets dynamically with jQuery: A step-by-step guide

How to use CSS to dynamically adjust the maximum width of an overflow container based on its children's content

When the parent element is already set to justify its content with flexbox, you can ensure equal heights for CSS classes by utilizing

Are external JavaScript files cached in the same manner as images?

Issue with CSS on various mobile devices

The HTML5 audio player is experiencing technical difficulties on Internet Explorer

Styling PHP Input Buttons with CSS

When a user chooses an item, the ui-select dropdown appears hidden behind additional fields on the screen

"Encountered an Ajax Error while appending request parameters to the same link during a

Avoiding page breaks in Puppeteer PDFs

Utilizing Ant Design Icons without an Internet Connection

The jQuery panel slider magically appears when you click the button, but refuses to disappear

Adjust the size of the cursor

Total Output Calculation

Is it possible to obtain the hostname through CSS?

"Media queries in CSS don't consistently apply all styles when reaching the minimum

How can I align a single button to the left side while positioning the rest of the elements to the right in Bootstrap 4?