SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Jun 2001
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    position relative to parent div?

    Hello, I am tyring to learn how create layouts using CSS and seem to be stuck on something that seems like it would be possible, but can't find any resources on how to do it.

    Basically, I am trying to create a simple 3 part block that can be repeated multiple times on the page, with all 3 parts being in a certain position based on where the block as a whole is.

    From reading several sources, all I can find out is how to position things relative to the page, the screen, or it's physical location without CSS processing.

    the sample CSS I have created is:

    Code:
    .newsitem {
     width:400px;
     background-color:#999999;	
    }
    .newstitle {
     font:bold 1.3em verdana, arial, helvetica, sans-serif;
     color:#000000;
     margin:0.3em 3em 0em 0.3em;
    }
    .newssummary {
     font:1em verdana, arial, helvetica, sans-serif;
     color:#000000;
     margin:0em 5em 0em 0.3em;
    }
    .newstopic {
     float:right;
     text-align:center;
     height:100%;
     width:85px;
     background-color:#666666;
    }
    and the HTML is:

    Code:
    <div class="newsitem">
    	<div class="newstitle">Title 1</div>
    	<div class="newssummary">Summary of the first article.</div>
    	<div class="newstopic">Topic 1<br /><br />Image 1</div>
    </div>
    
    <br />
    
    <div class="newsitem">
    	<div class="newstitle">Title 2</div>
    	<div class="newssummary">Summary of the second article.</div>
    	<div class="newstopic">Topic 2<br /><br />Image 2</div>
    </div>
    What I want is the "newstopic" portion of each "newsitem" to be all the way to the right, and to fill the entire block vertically to whatever height the title and summary ends up being.

    Does anyone have any suggestions as to how this can be done? Thanks!

  2. #2
    SitePoint Evangelist
    Join Date
    Oct 2001
    Posts
    439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am not sure exactly what you are after but you just need a small mod to the HTML:

    <div class="newsitem">
    <div class="newstopic">Topic 1<br /><br />Image 1</div>
    <div class="newstitle">Title 1</div>
    <div class="newssummary">Summary of the first article.</div>

    </div>

    <br />

    <div class="newsitem">
    <div class="newstopic">Topic 2<br /><br />Image 2</div>
    <div class="newstitle">Title 2</div>
    <div class="newssummary">Summary of the second article.</div>

    </div>

    And also: remove the height altogether from newstopic.....

  3. #3
    Grumpy Mole Man Skunk's Avatar
    Join Date
    Jan 2001
    Location
    Lawrence, Kansas
    Posts
    2,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You should be able to do this without using any <br /> tags at all - as everything is in divs you can space them however you want using CSS margin and padding properties.

    As for your problem, you need position: relative, which allows you to position elements with respect to where they would normally appear on the page if no position was applied to them. What exact layout are you trying to achieve for the news items?

  4. #4
    Perl/Mason Guru Flawless_koder's Avatar
    Join Date
    Feb 2002
    Location
    Gatwick, UK
    Posts
    1,206
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I normally use position:relative to set z-Index - since the position attribute has to be set for z-Index to work.
    Just as a side note

    Flawless
    ---=| If you're going to buy a pet - get a Shetland Giraffe |=---

  5. #5
    SitePoint Member
    Join Date
    Jun 2001
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the help. I guess my main problem is how I can get the "newstopic" div to take up the entire block vertically. The "height:100%;" seems to either get ignored or acts upon the entire page instead of just the parent div.

    What I am attempting to do is create something similar to what I currently have using tables. (http://www.thedvdvampire.com/)

    thanks


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
  •