SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Oct 2003
    Location
    constance, germany
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    A question on containers...

    Hi.

    I got on <div> positioned absolute on the left side (left: 0); right next to it there is another <div> which I want to automatically be shifted to the right side when the left container is expading its width!

    How can I achieve this?

  2. #2
    SitePoint Addict BenANFA's Avatar
    Join Date
    Apr 2003
    Location
    Bath, UK
    Posts
    353
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't think you can, by absolutely positioning the left container you take it out of document flow. This means that it's size and position will not be taken into account when calculating size and position of other page elements so it's size will not have any effect on the right hand element.

    You will need to give the left element a specified width, you can then use the same width as the padding on the body or the margin or padding on the right element in order to display it's content in the correct position.

    You could left float the left container but you would still need to set a width for it.

    Why do you need the left containers width to be non-fixed ?

  3. #3
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,236
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    I'm not sure if this might be what you're after, but it's worth posting some code anyway

    Code:
    body {
      margin: 0; padding: 0;
    }
    #left {
      position: absolute;
      left: 0;
      top: 0;
      width: 40%;
    }
    #right {
      margin-left: 40%;
    }
    HTML Code:
    <div id="left">This is absolutely positioned and
    40% wide.</div>
    <div id="right">
    This block will automatically move when the browser window is resized.
    </div>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •