What is the best way to align a child div next to another child div?

I have experimented with float and display inline-block. While flex does work, it's not suitable for my needs as it will place every child div in a line, which is not the desired outcome. Essentially, I am looking to have a few boxes on the left side and one box on the right side that adjusts its height based on the height of the child divs on the left. I have attempted floating the boxChildRight to the right/left vice versa, but it has not been successful.

HTML

#sp {
  position: absolute;
  left: 400px;
  top: 0;
}

#box {
  width: 100%;
  height: auto;
  margin-top: 20px;
}

.boxChildRight {
  right: 0;
  width: 20%;
  height: auto;
  border: 1px solid;
  position: relative;
  float: right;
}

.boxChildLeft {
  left: 0;
  width: 80%;
  height: 100px;
  border: 1px solid;
  margin-bottom: 2px;
  position: relative;
  float: left;
}

.prodInfo {
  float: left;
  margin-left: 10px;
}

.img {
  margin-left: 0;
  float: left;
}
<div id="box"> PARENT DIV
  <div class="boxChildLeft"> CHILD
    <div class="img">
      <img src="../shopImages/candles.jpg" width="100px" height="100px">
    </div>
    <div class="prodInfo">
      <p1>Test</p1><br>
      <span id="sp"><p1>Test</p1></span>
    </div>
  </div>
  <div class="boxChildLeft">
    <div class="img">
      <img src="../shopImages/candles.jpg" width="100px" height="100px">
    </div>
    <div class="prodInfo">
      <p1>Test</p1><br>
      <span id="sp"><p1>Test</p1></span>
    </div>
  </div>
  <div class="boxChildLeft">
    <div class="img">
      <img src="../shopImages/candles.jpg" width="100px" height="100px">
    </div>
    <div class="prodInfo">
      <p1>Test</p1><br>
      <span id="sp"><p1>Test</p1></span>
    </div>
  </div>
  <div class="boxChildLeft">
    <div class="img">
      <img src="../shopImages/candles.jpg" width="100px" height="100px">
    </div>
    <div class="prodInfo">
      <p1>Test</p1><br>
      <span id="sp"><p1>Test</p1></span>
    </div>
  </div>
  <div class="boxChildRight"> THIS CHILD DIV SHOULD BE ON RIGHT SIDE OF ALL OTHER DIVS
   
</div>

htmlcss

Answer №1

To achieve the desired layout, you can utilize position:absolute;

*{
  box-sizing:border-box; /* Added */
}

#sp {
  position: absolute;
  left: 400px;
  top: 0;
}

#box {
  width: 100%;
  height: auto;
  margin-top: 20px;
  position:relative; /* Added */
  padding-right:20%; /* Added */
  float:left; /* Added */
}

.boxChildRight {
  width: 20%;
  height: 100%; /* Updated */
  border: 1px solid;
  position:absolute; /* Added */
  right:0; /* Added */
  top:0; /* Added */
}

.boxChildLeft {
  left: 0;
  width: 80%;
  height: 100px;
  border: 1px solid;
  margin-bottom: 2px;
  position: relative;
  float: left;
}

.prodInfo {
  float: left;
  margin-left: 10px;
}

.img {
  margin-left: 0;
  float: left;
}
<div id="box"> PARENT DIV
  <div class="boxChildLeft"> CHILD
    <div class="img">
      <img src="../shopImages/candles.jpg" width="100px" height="100px">
    </div>
    <div class="prodInfo">
      <p1>Test</p1><br>
      <span id="sp"><p1>Test</p1></span>
    </div>
  </div>
  <div class="boxChildLeft">
    <div class="img">
      <img src="../shopImages/candles.jpg" width="100px" height="100px">
    </div>
    <div class="prodInfo">
      <p1>Test</p1><br>
      <span id="sp"><p1>Test</p1></span>
    </div>
  </div>
  <div class="boxChildLeft">
    <div class="img">
      <img src="../shopImages/candles.jpg" width="100px" height="100px">
    </div>
    <div class="prodInfo">
      <p1>Test</p1><br>
      <span id="sp"><p1>Test</p1></span>
    </div>
  </div>
  <div class="boxChildLeft">
    <div class="img">
      <img src="../shopImages/candles.jpg" width="100px" height="100px">
    </div>
    <div class="prodInfo">
      <p1>Test</p1><br>
      <span id="sp"><p1>Test</p1></span>
    </div>
  </div>
  <div class="boxChildRight"> THIS CHILD DIV SHOULD BE ON RIGHT SIDE OF ALL OTHER DIVS
  </div>
</div>

Responding to your comment with an update

Understanding box-sizing in CSS

By default, when specifying the width and height of an element in CSS, it only applies to the content box of that element. Any border or padding added is then included in the overall size of the rendered box on the screen. Adjustments are needed for a responsive design to account for these factors.

Learn more about box-sizing on MDN

Answer №2

The issue you're facing is that even though the div elements are set to 80% and 20%, the border width is not included in this calculation.

To ensure that the border width is accounted for when calculating the overall width of your elements, simply add the following CSS:

* {
  box-sizing: border-box;
}

By adding this rule, each element will now take into consideration the border property when determining its width.

Answer №3

In my opinion, relying on the position property may not be the most effective solution; it is possible to achieve the desired outcome without using position absolute. I strongly believe that setting the following CSS rule for all elements can help maintain box dimensions accurately:

* { box-sizing: border-box; }

To see an example of achieving this without using the position absolute property, you can visit the link below:

https://jsfiddle.net/oceh7f9q/

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

What causes the disappearance of CSS styles when the IncludeStyleBlock property is set to True?

In the demo web project included in VS2010, there is a system.web.ui.webcontrols.menu control available. This specific menu has an IncludeStyleBlock property. Setting the IncludeStyleBlock property to False allows the menu to display correctly. However, ...

asp.netcssvisual-studio-2010menu

Why is my JQuery display none not functioning properly?

The functionality for showing an element is working perfectly, but when attempting to hide the same element, nothing seems to happen. Here is the HTML code after showing the element: $(".container").click(function() { $('.top-menu').css(&ap ...

jqueryhtml

Exploring the mechanics of aligning a div using Bootstrap 4

I recently found a code snippet that beautifully centers a login box, which I implemented. However, I realized that I actually wanted the login box to be positioned 25% from the left instead of 50%. The interesting part is, the code doesn't follow the ...

cssbootstrap-4

"Troubleshooting: CSS class name not being recognized by PHP

Here is the code snippet I am working with: echo "<table> <tr> <td class="tablehead">Name </td> <td class="tablehead">Email </td> <td class="tablehead">Comment </td> </tr> ...

phphtmlcss

What is the best way to adjust element size according to the screen size?

How can I use CSS to make a button element appear bigger on smaller screens? The current size is ideal for desktop screens but appears too small on mobile devices. <html> <header> <link rel="stylesheet" type="tex ...

htmlcss

Learning how to utilize localStorage in conjunction with a color picker to modify the --var of :root

After spending an entire afternoon on my JavaScript issue as a beginner, I have a specific goal in mind: allowing the user to select and change the main color of the page. To implement this, I inserted a color picker in my HTML: <input type="color ...

javascripthtmlcss

Title of Flickr API

Hey everyone, I'm working on setting up a gallery on my website using images and sets from Flickr. I've successfully loaded all the sets with the following code: $flickr = simplexml_load_file('http://api.flickr.com/services/rest/?method=fli ...

phphtmlxmlapiflickr

Use jQuery to apply CSS to a div only when it becomes visible on the screen

I created a single page HTML with scrolling functionality. The structure of my divs - home and home2 - is as shown below. Both have a height of 100%. I am looking to add CSS to the second div (home2) using jQuery only when it becomes visible to the user in ...

jqueryhtmlcss

A trio of divs stacked on top of each other, each with content that occupies

I have a 3-row div layout with the footer at the bottom of the page, but I want the content div to always be full size from the header to the footer. Inside the content div, there is also an iframe that I want to always be at 100% height of the content, th ...

htmlcss

During runtime, the getBoundingClientRect method may return a value of zero for an Angular directive

I have developed an angular directive that tracks each paragraph within a large content. It seems to be working fine when the content is static on the page, but when it is served by an API, the getBoundingClientRect function always returns zero for my plac ...

javascripthtmlangularjsdomangularjs-directive

CSS: Adjusting the vertical alignment of numbers in an ordered list

Hey there, I have a question about the vertical alignment of numbering in an ordered list. It seems that the numbers are being pushed to the baseline when <li> elements contain floated divs only. Is there any way to prevent this and have the numbers ...

csslistcss-float

What could be causing my div not to scroll horizontally when I add multiple images?

In my code, I have an outer div with an inner div containing a list of images. The issue I am facing is that when the images are wider than the outer div, instead of scrolling horizontally as desired, they just move to the next line without expanding. In c ...

csshtmlscrolloverflow

Step-by-step guide on how to animate the title for each slide separately

I have successfully created a custom jQuery slideshow that functions as intended. The only remaining task is to animate the caption within each slide. I would like each caption to correspond with its respective slide, but currently all of the captions resp ...

javascriptjqueryhtmlcss

Tips for utilizing javascript document.createElement, document.body, and $(document) in an HTML web resource for Microsoft CRM code reviews

Let me start off by saying that I am not a regular blogger and I am feeling quite confused. If my question is unclear, please provide guidance for improvement. I recently submitted a Microsoft CRM PlugIn to the Microsoft Code Review. I am new to Javascrip ...

javascriptjqueryhtmldomdynamics-crm-online

Issue with the opening and closing functionality of the Bootstrap accordion menu

Check out the bootstrap accordion menu I added to my website here I'm facing an issue where one toggle stays open when another is clicked. It seems like a CSS problem since I've tried adding extra properties to my HTML without success. Currentl ...

javascriptjquerycsstwitter-bootstrap

Accessing Local Data with Local HTML on Android - Error: File Not Found

After organizing my project in a folder within the main root directory, I successfully created a basic hello world project. The HTML file displays perfectly in Chrome, but trying to load files from the main project folder or subfolders results in a net::ER ...

androidhtmlgoogle-chromeandroid-webview

Execute JavaScript code via URL injection

One interesting aspect of the HTML is that it has a feature where it opens a webpage. The specific webpage it opens is determined by the URL, for example: https://mywebsite.com/index.html&audio=disabled In addition to this, there is a useful JavaScri ...

javascripthtml

Using Javascript to deactivate a clickable image upon clicking another image

I have two buttons with alert functions assigned to each. I want the function on the first button to only work when that button is clicked, and not work if the second button has been clicked. Below is the code I've tried, but it's not functioning ...

javascriptjquerycsshtml

Is there a way to retrieve the complete relative path of an image in CakePHP 3.1?

I am trying to send an email with images that require the full path, such as http://www.example.com/img/image-name.jpg. I am currently using CakePHP 3 framework and have written the following code: $this->Html->image('image.jpg', ['fu ...

phphtmlimagecakephp

What is the most effective way to utilize CSS in order to contain a page filled with tall nested elements within the height of the viewport?

How can I restrict a page to the height of the viewport? I want to control the overflow-y on child elements, but it seems like I cannot limit the height--I can only set a max-height in pixels or a percentage. I believe I need to confine the height of certa ...

cssbootstrap-4flexboxviewport-units