relative behavior strange

[Fredo Vincentis]

I am trying to align four blocks of text using stylesheets in the following
way:

XX
XX

So two blocks at the top, two at the bottom.

I have been trying to do it for a while, but I can't get them to behave the
way I want.

As I do not know how long the text will be in each section I put the top two
text blocks into a <div> and the bottom two text blocks into a <div>, both
of which are positioned relatively (top:0px, left:0px to a parent element
holding all four. The right text blocks have been moved absolutely to their
parent elements.

But what is happening at the moment is that the two left text blocks overlap
eachother and so do the two right text blocks. It seems the relative
positioning of the bottom two blocks does not work the way i expect it.

Any idea what I am doing wrong?

Here comes the code:


#bottomSection{
position: absolute;
width:711px;
top:186px;
left:36px;
background-color:#FFFFFF;
}

..homeBlock{
position:relative;
top:0px;
left:0px;
}

..rightHome{
position:absolute;
left:370px;
top:0px;
}

..leftHome{
position:absolute;
left:0px;
top:0px;
}




<div id="bottomSection">
<!-- content starts here -->
<div class="homeBlock">
<div class="leftHome">
<h1 class="home">Experience Design</h1>
<p class="home">Oh, no, it is an ever fixed mark let me not to the
marriage of true minds
or bends with the remover to remove. It is the star to every wand'ring
bark,
if this be error and upon me proved, love alters not with his brief
hours
and weeks. Love's not time's fool, though rosy lips and cheeks which
alters
when it alteration finds, let me not to the marriage of true minds.</p>
</div>
<div class="rightHome">
<h1 class="home">What do we do?</h1>
<p class="home">Oh, no, it is an ever fixed mark let me not to the
marriage of true minds
or bends with the remover to remove.</p>
<p><a href="#">&raquo;Websites</a><br>
<a href="#">&raquo;Interactive Cd-Roms</a><br>
<a href="#">&raquo;Corporate Presentations</a></p>
</div>
</div>
<div class="homeBlock">
<div class="leftHome">
<h1 class="home">Addictive News</h1>
<p class="home"><a href="#">Winner of the Golden Web Award</a> [24
September 2003]</p>
<p class="home">Combined with optimal use of human resources,
quantitative analysis of
all the key ratios has a vital role to play in this building a dynamic
relationship...</p>
</div>
<div class="rightHome">
<h1 class="home">What do we do now?</h1>
<p class="home">Oh, no, it is an ever fixed mark let me not to the
marriage of true minds
or bends with the remover to remove.</p>
<p><a href="#">&raquo;Websites</a><br>
<a href="#">&raquo;Interactive Cd-Roms</a><br>
<a href="#">&raquo;Corporate Presentations</a></p>
</div>
</div>
<!-- content ends here -->
</div>

 

[Eric Bohlman]

I am trying to align four blocks of text using stylesheets in the
following way:

XX
XX

So two blocks at the top, two at the bottom.

I have been trying to do it for a while, but I can't get them to
behave the way I want.

As I do not know how long the text will be in each section I put the
top two text blocks into a <div> and the bottom two text blocks into a
<div>, both of which are positioned relatively (top:0px, left:0px to
a parent element holding all four. The right text blocks have been
moved absolutely to their parent elements.

But what is happening at the moment is that the two left text blocks
overlap eachother and so do the two right text blocks. It seems the
relative positioning of the bottom two blocks does not work the way i
expect it.

Any idea what I am doing wrong?

The problem is that when you position an element absolutely, you take it
out of the normal layout flow. As a result, your two homeBlocks are
positioned relative to the exact same place, and thus they overlap. For
layout calculations, an absolutely positioned element has zero height and
zero width.

The effect can be better acheived by floating:

..homeBlock{
clear: both;
}

..rightHome{
float: right;
width: 48%;
}

..leftHome{
float: left;
width: 51%;
}

The one thing you have to keep in mind is that both floated elements need
explicit widths, because floated elements are also partially taken out of
the layout flow; if you didn't constrain the width of one of them, the
browser would calculate its width on the assumption that the entire width
of its container (711px in your case) was available for wrapping it, and
then conclude that there wasn't enough horizontal space available for
both it and the other one, and would move it down.

The missing 1% is to give some visual separation between the two columns.

 

[Richard]

The problem is that when you position an element absolutely, you take
it
out of the normal layout flow. As a result, your two homeBlocks are
positioned relative to the exact same place, and thus they overlap.
For
layout calculations, an absolutely positioned element has zero height
and
zero width.

Why do you guys always say position:absolute effects the elements?
Position places the <div> itself. It has no effect on content of the
division.
I'd just like to know the reasoning for this assumption.

 

[Richard]

Not a problem.
Here's what I usually do.

div.big1{ position:absolute; left:30px; top:30px; height:1000px;
width:1000px;}
numbers changed as desired.
div.child1{blah blah blah float:left;}
div.child2{blah blah blah }
div.child3{blah blah blah float:left;}
div.child4{blah blah blah }
"float" is required to do what you want.
If you intend on having all "childs" the same, make only 1 child and repeat
is as necessary in the body.
"Float:right" would cause the blocks to appear to the right side of the
container and any additional blocks would appear to the left of the first
block.


<div class="big1>

<div class="child1">
<div class="child2">
<div class="child3">
<div class="child4">

</div>

So how do the blocks sit on top of each other as desired?
Notice in the definition at the beginning I used "float" in only two places?
If you placed "float" in child2, child3 would be beside child2.

For a more detailed working, and sickening, use of this block building see
my demo at:
www.1-large-world.com/div1.html
It is by no means perfect but it does demonstrate certain methods to achieve
the effect.

 

[Fredo Vincentis]

The problem is that when you position an element absolutely, you take it
out of the normal layout flow. As a result, your two homeBlocks are
positioned relative to the exact same place, and thus they overlap. For
layout calculations, an absolutely positioned element has zero height and
zero width.

The effect can be better acheived by floating:

.homeBlock{
clear: both;
}

.rightHome{
float: right;
width: 48%;
}

.leftHome{
float: left;
width: 51%;
}

Excellent! This helped a lot. I read up on floating and clear, so this was a
valuable lesson. Thanks, heaps!

 

[Toby A Inkster]

Why do you guys always say position:absolute effects the elements?
Position places the <div> itself. It has no effect on content of the
division.

Eric was saying that _as_far_as_other_elements_are_concerned_ an
absolutely positioned element has no width and height -- that is, other
parts of the page don't move out of the way to make space for it.

Fixed elements ditto.

For relatively positioned elements, a gap is left for the element,
although it might not be where you'd like.

Floating elements are different again. Space is left for them, in that
other stuff wraps around them.

 

[Owen Jacobson]

For relatively positioned elements, a gap is left for the element,
although it might not be where you'd like.

It's where the box was before you moved it, isn't it?

 

[Toby A Inkster]

It's where the box was before you moved it, isn't it?

Yep.