CSS element positioning

  • Thread starter kolleamm
  • Start date
  • #1
391
35
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.
 

Answers and Replies

  • #2
18,244
7,877
What are these elements? Text, image, div, span etc? Your last comment is confusing.
 
  • #3
391
35
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
18,244
7,877
How do you want them positioned? I mean if you have 3 block divs they will naturally stack.
 
  • #5
391
35
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
18,244
7,877
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
391
35
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?
 
  • #9
391
35
If using relative positioning why does it matter?
The heights would change so you could not use a specific number
 
  • #10
18,244
7,877
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
391
35
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
18,244
7,877
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
391
35
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
391
35
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

Last edited by a moderator:
  • #16
391
35
Sure no problem, thanks for your help either way!
 
  • #17
18,244
7,877
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
391
35
Thanks that seems to work!
 

Related Threads on CSS element positioning

Replies
3
Views
775
  • Last Post
Replies
8
Views
664
  • Last Post
Replies
0
Views
3K
  • Last Post
Replies
11
Views
2K
  • Last Post
Replies
1
Views
1K
  • Last Post
Replies
3
Views
59K
  • Last Post
Replies
19
Views
962
  • Last Post
Replies
9
Views
744
Replies
4
Views
908
Top