relative behavior strange

Discussion in 'HTML' started by Fredo Vincentis, Nov 1, 2003.

  1. 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>
     
    Fredo Vincentis, Nov 1, 2003
    #1
    1. Advertising

  2. Fredo Vincentis

    Eric Bohlman Guest

    "Fredo Vincentis" <> wrote in
    news:bnv2n7$2lo2$:

    > 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.
     
    Eric Bohlman, Nov 1, 2003
    #2
    1. Advertising

  3. Fredo Vincentis

    Richard Guest

    Eric Bohlman wrote:

    > "Fredo Vincentis" <> wrote in
    > news:bnv2n7$2lo2$:


    >> 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.
     
    Richard, Nov 1, 2003
    #3
  4. Fredo Vincentis

    Richard Guest

    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.
     
    Richard, Nov 1, 2003
    #4
  5. "Eric Bohlman" <> wrote in message
    news:Xns94266F70DC121ebohlmanomsdevcom@130.133.1.4...
    > "Fredo Vincentis" <> wrote in
    > news:bnv2n7$2lo2$:
    >
    > > 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!
     
    Fredo Vincentis, Nov 2, 2003
    #5
  6. 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
     
    Toby A Inkster, Nov 2, 2003
    #6
  7. 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?
     
    Owen Jacobson, Nov 2, 2003
    #7
  8. 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
     
    Toby A Inkster, Nov 2, 2003
    #8
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. sstark
    Replies:
    0
    Views:
    483
    sstark
    Mar 6, 2005
  2. ryang
    Replies:
    1
    Views:
    992
    Wes Groleau
    Apr 11, 2005
  3. Apogee

    Strange Behavior with ViewState

    Apogee, Jul 3, 2003, in forum: ASP .Net
    Replies:
    0
    Views:
    339
    Apogee
    Jul 3, 2003
  4. Vlad Koby
    Replies:
    0
    Views:
    367
    Vlad Koby
    Apr 6, 2006
  5. Mantorok Redgormor
    Replies:
    70
    Views:
    1,853
    Dan Pop
    Feb 17, 2004
Loading...

Share This Page