Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > relative behavior strange

Reply
Thread Tools

relative behavior strange

 
 
Fredo Vincentis
Guest
Posts: n/a
 
      11-01-2003
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>


 
Reply With Quote
 
 
 
 
Eric Bohlman
Guest
Posts: n/a
 
      11-01-2003
"Fredo Vincentis" <(E-Mail Removed)> wrote in
news:bnv2n7$2lo2$(E-Mail Removed):

> 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.
 
Reply With Quote
 
 
 
 
Richard
Guest
Posts: n/a
 
      11-01-2003
Eric Bohlman wrote:

> "Fredo Vincentis" <(E-Mail Removed)> wrote in
> news:bnv2n7$2lo2$(E-Mail Removed):


>> 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.


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.


 
Reply With Quote
 
Richard
Guest
Posts: n/a
 
      11-01-2003
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.


 
Reply With Quote
 
Fredo Vincentis
Guest
Posts: n/a
 
      11-02-2003
"Eric Bohlman" <(E-Mail Removed)> wrote in message
news:Xns94266F70DC121ebohlmanomsdevcom@130.133.1.4 ...
> "Fredo Vincentis" <(E-Mail Removed)> wrote in
> news:bnv2n7$2lo2$(E-Mail Removed):
>
> > 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%;
> }


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


 
Reply With Quote
 
Toby A Inkster
Guest
Posts: n/a
 
      11-02-2003
Richard wrote:

> Eric Bohlman wrote:
>
>> 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.


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.

--
Toby A Inkster BSc (Hons) ARCS
Contact Me - http://www.goddamn.co.uk/tobyink/?id=132

 
Reply With Quote
 
Owen Jacobson
Guest
Posts: n/a
 
      11-02-2003
Toby A Inkster wrote:

> 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?
 
Reply With Quote
 
Toby A Inkster
Guest
Posts: n/a
 
      11-02-2003
Owen Jacobson wrote:
> Toby A Inkster wrote:
>> 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?


Yep.

--
Toby A Inkster BSc (Hons) ARCS
Contact Me - http://www.goddamn.co.uk/tobyink/?id=132

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Strange Behavior: Hyperlinks are transformed in the Email body from absolute to relative Vlad Koby ASP .Net 0 04-06-2006 05:27 PM
Thunderbird strange behavior... Jim Firefox 5 11-17-2005 03:09 PM
Firefox 1.04 and Strange Find Behavior Thomas Firefox 5 06-28-2005 08:40 PM
strange behavior when using 'read' sstark Perl 0 03-06-2005 02:27 AM
undefined behavior or not undefined behavior? That is the question Mantorok Redgormor C Programming 70 02-17-2004 02:46 PM



Advertisments