How can I position CSS elements with changing heights relative to each other?

In summary, the conversation discussed positioning elements using code when their exact heights are not known and they must be relatively positioned to each other. The elements mentioned included text, images, divs, and spans. The suggested solution involved using absolute positioning for the first element and relative positioning for the other two. The conversation also mentioned the possibility of overlapping elements and the use of floats for side by side positioning. A code example was provided and some troubleshooting was done before reaching a solution.
  • #1
kolleamm
477
44
Let's say we have 3 elements a,b, and c.
a is right above b and b is right above c.
Their heights change. What code would I use to position them since exact heights are not known and each elements must be relatively positioned to the previous element except "a" which is set at the top.
 
Technology news on Phys.org
  • #2
What are these elements? Text, image, div, span etc? Your last comment is confusing.
 
  • #3
Greg Bernhardt said:
What are these elements? Text, image, div, span etc? Your last comment is confusing.
Mostly text or images either one, just anything that has a variable height and cannot be positioned manually.
 
  • #4
How do you want them positioned? I mean if you have 3 block divs they will naturally stack.
 
  • #5
Greg Bernhardt said:
How do you want them positioned? I mean if you have 3 block divs they will naturally stack.
The first one should be positioned out of place in a non static position, for example 20 pixels down and 20 pixels to the right.
 
  • #6
kolleamm said:
The first one should be positioned out of place in a non static position, for example 20 pixels down and 20 pixels to the right.
For box A use absolute positioning and the two other boxes use relative positioning to each other
 
  • #7
Greg Bernhardt said:
For box A use absolute positioning and the two other boxes use relative positioning to each other
How would I get the value of another elements height?
 
  • #8
kolleamm said:
How would I get the value of another elements height?
If using relative positioning why does it matter?
 
  • #9
Greg Bernhardt said:
If using relative positioning why does it matter?
The heights would change so you could not use a specific number
 
  • #10
kolleamm said:
The heights would change so you could not use a specific number
Do you want overlapping elements? The specific number will be relative to the parent element.
 
  • #11
Greg Bernhardt said:
Do you want overlapping elements? The specific number will be relative to the parent element.
No overlapping, I need them to be right up against each other. Just seems like there's an easier way instead of having to manually put in values
 
  • #12
kolleamm said:
No overlapping, I need them to be right up against each other. Just seems like there's an easier way instead of having to manually put in values
Side to side or top to bottom? You don't need any positioning, the divs boxes will stack if set to block automatically or set a float for side to side.
 
  • Like
Likes kolleamm
  • #13
Greg Bernhardt said:
Side to side or top to bottom? You don't need any positioning, the divs boxes will stack if set to block automatically or set a float for side to side.
Thanks, I'll try more coding and see if it works
 
  • #14
It's still not working.
HTML: 
.container {
  position: relative;
width: 500px;
  margin: 20px auto;
  padding: 500px;
  border: solid grey 10px;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

#content {
position: absolute;
display: block;
margin: 0 auto;
  padding: 50px;
  border: solid blue 10px;
}<div class="container">
    <p id="content" style="font-size: 48pt; display:block; width:600px; word-wrap: break-word;">hellooooooooooooooooooooooo</p>
    <p id="content" style="font-size: 48pt; display:block;" >hello again</p>
</div>
 

Attachments

  • error img.png
    error img.png
    5.8 KB · Views: 418
Last edited by a moderator:
  • #15
kolleamm said:
It's still not working.
Several problems, but I need to leave for a few hours. I'll be back to work it out unless others chip in.
 
  • #16
Sure no problem, thanks for your help either way!
 
  • #17
Is this what you want?

HTML: 
<!DOCTYPE html>
<html>
<head>
<style>.container2 {
display:block;
overflow:auto;
border: solid grey 10px;
}

#content {
width:50%;
display: block;
float:right;
border: solid blue 4px;
box-sizing: border-box;
}

#content2 {
width:50%;
display: block;
float:left;
border: solid blue 4px;
box-sizing: border-box;
}
</style>
</head>
<body><div class="container2">
  <div id="content">hellooooooooooooooooooooooo</div>
  <div id="content2">hello again</div>
</div></body>
</html>
 
  • Like
Likes kolleamm
  • #18
Thanks that seems to work!
 

1. What is CSS element positioning?

CSS element positioning is a technique used to control the layout and placement of HTML elements on a web page. It allows you to specify the exact location of an element on the page, as well as its size and how it should interact with other elements.

2. What are the different types of CSS positioning?

The four types of CSS positioning are static, relative, absolute, and fixed. Static positioning is the default and elements are placed in the normal flow of the document. Relative positioning allows you to position an element relative to its normal position. Absolute positioning positions an element relative to its closest positioned ancestor. Fixed positioning positions an element relative to the browser window.

3. How do I center an element using CSS?

You can center an element using CSS by setting its left and right margins to auto and giving it a width. This will center the element horizontally within its parent container. To center it vertically, you can use the display: flex; and align-items: center; properties on the parent container, and then use the margin: auto; property on the element you want to center.

4. Can I use percentage values for element positioning?

Yes, you can use percentage values for element positioning. This is useful for creating responsive designs that adjust to different screen sizes. However, percentage values for positioning are relative to the element's closest positioned ancestor, so it's important to consider the parent element's positioning when using percentages.

5. How does z-index work in CSS positioning?

Z-index is a CSS property that controls the stacking order of elements on a page. Elements with a higher z-index value will appear on top of elements with a lower z-index value. This is especially useful for positioning elements that overlap each other, such as dropdown menus or pop-up boxes.

Similar threads

Converting State Vectors to Keplerian Orbital Elements for Binary Objects
    • Programming and Computer Science
Replies
13
Views
2K
Python "ImportError: bad magic number ...."
    • Programming and Computer Science
Replies
1
Views
2K
Working with Matrices: Adding/Subtracting and Custom Operations
    • Programming and Computer Science
Replies
5
Views
1K
How can I implement a multi-task deep learning neural network?
    • Programming and Computer Science
Replies
3
Views
886
Von Neumann replicator vehicle model
    • Programming and Computer Science
Replies
23
Views
1K
I An attempt to understand the associated variable conventions in circuits
    • Electromagnetism
Replies
1
Views
819
My Website For Creating Interactive Visuals Linked To Equations
    • Programming and Computer Science
Replies
4
Views
318
Can Sorting Ever Be Done in Time Proportional to n?
    • Programming and Computer Science
Replies
12
Views
1K
Decompose 4x4 determinant into 24 determinants -- How many are zero?
    • Precalculus Mathematics Homework Help
Replies
1
Views
517
Re: Python’s Sympy Module and the Cayley-Hamilton Theorem
    • Programming and Computer Science
Replies
3
Views
310

Hot Threads

Recent Insights

Back
Top