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

  • Context: HTML/CSS 
  • Thread starter Thread starter kolleamm
  • Start date Start date
  • Tags Tags
    Css Element
Click For Summary

Discussion Overview

The discussion revolves around positioning CSS elements with changing heights relative to each other. Participants explore various methods for achieving this layout, focusing on the challenges posed by variable heights and the need for specific positioning.

Discussion Character

  • Technical explanation
  • Debate/contested
  • Mathematical reasoning

Main Points Raised

  • One participant describes a scenario with three elements (a, b, and c) that need to be positioned relative to each other, with "a" set at the top.
  • Several participants seek clarification on the types of elements involved, suggesting they could be text, images, or other HTML elements.
  • There is a discussion about the natural stacking behavior of block elements and whether specific positioning is necessary.
  • One participant suggests using absolute positioning for the first element and relative positioning for the others.
  • Questions arise about how to obtain the height of another element when using relative positioning.
  • Concerns are raised about overlapping elements and the need for them to be positioned right up against each other without manual values.
  • Participants discuss the possibility of using floats for side-by-side positioning or relying on block display for stacking.
  • A participant shares CSS code that is not functioning as intended, prompting further troubleshooting and suggestions from others.
  • Another participant provides an alternative code solution that appears to work for the original poster.

Areas of Agreement / Disagreement

Participants express differing views on the necessity of specific positioning versus relying on default stacking behavior. The discussion remains unresolved regarding the best approach to handle variable heights and positioning without manual adjustments.

Contextual Notes

Limitations include the lack of clarity on the specific requirements for positioning and the assumptions about element types and behaviors. The discussion also reflects varying levels of understanding regarding CSS properties and their implications.

kolleamm
Messages
476
Reaction score
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
What are these elements? Text, image, div, span etc? Your last comment is confusing.
 
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.
 
How do you want them positioned? I mean if you have 3 block divs they will naturally stack.
 
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.
 
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
 
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?
 
kolleamm said:
How would I get the value of another elements height?
If using relative positioning why does it matter?
 
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   Reactions: 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: 497
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   Reactions: kolleamm
  • #18
Thanks that seems to work!
 

Similar threads

HTML/CSS What is the role of z-index in CSS positioning?
  • · Replies 10 ·
Replies
10
Views
2K
HTML/CSS How to achieve a paper effect in CSS for Joplin?
  • · Replies 1 ·
Replies
1
Views
3K
CSS: How do I control the amount of space before/after lines of text?
  • · Replies 10 ·
Replies
10
Views
2K
HTML/CSS Python - HTML : Isn't this a dictionary ?
  • · Replies 2 ·
Replies
2
Views
2K
HTML/CSS Html5 <canvas> element related apps not working
  • · Replies 3 ·
Replies
3
Views
2K
HTML/CSS HTML/CSS: Placing DIVs Next to Each Other
  • · Replies 6 ·
Replies
6
Views
3K
HTML/CSS Is There a Way to Indent Tables in XHTML?
  • · Replies 3 ·
Replies
3
Views
3K
Converting State Vectors to Keplerian Orbital Elements for Binary Objects
  • · Replies 13 ·
Replies
13
Views
4K
Python Python "ImportError: bad magic number ...."
  • · Replies 1 ·
Replies
1
Views
5K
Working with Matrices: Adding/Subtracting and Custom Operations
  • · Replies 5 ·
Replies
5
Views
2K