Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Sep 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy CSS Problem: positioned div problem...I want to die

    Hello all,

    I am trying to have a div be set to the height of it's containing div, that has an absolute location, it's not working.

    CSS
    Code:
    #page_content_container{
    	width:100%;
    	background-color:#009966;
    }
    
    #page_content_column{
    	position:relative;
    	width:900px;
    	margin:auto;
    background-color:#FF0000;
    }
    
    #detail_content_column_one{
    	position:absolute;
    	left:0;
    	width:550px;
    	padding-left:5px;
    background-color:#00CC66;
    	
    }
    /*for illustration purposes only*/
    #detail_content_column_two{
    	width:550px;
    	padding-left:5px;
    background-color:#00CC66;
    	
    }
    HTML
    Code:
    <!--Example1-->
    <div id="page_content_container">
      <div id="page_content_column">	
         <div id="detail_content_column_one">
    	<div>
    	  <p>I wanna cry</p>
    	  <p>sadfasdfsd</p>
    	  <p>asdfsda</p>
    	  <p>asdf</p>
    	</div>
          </div>
      </div>
    </div>
    <!--End of example1-->
    <div style="height:200px;"></div>
    <!--Example 2-->
    <div id="page_content_container">
      <div id="page_content_column">	
    	<div>
    	  <p>I wanna cry</p>
    	  <p>sadfasdfsd</p>
    	  <p>asdfsda</p>
    	  <p>asdf</p>
    	</div>
      </div>
    </div>
    <!--End of example2-->
    <div style="height:200px;"></div>
    <!--Example 3-->
    <div id="page_content_container">
      <div id="page_content_column">	
         <div id="detail_content_column_two">
    	<div>
    	  <p>I wanna cry</p>
    	  <p>sadfasdfsd</p>
    	  <p>asdfsda</p>
    	  <p>asdf</p>
    	</div>
          </div>
      </div>
    </div>
    <!--End of example3-->

    The Link: http://www.mooseblood.com/shoot.html shows

    Example #1 shows the code with the absolute and relative block not working at all it doesn't have any colors behind it. (thus no expanding divs)

    Example #2 shows the code with NO #detail_content_column_one (or absolute positioned div) and thus shows the 2 columns that should expand with #detail_content_column_one.

    Example #3 shows the code with #detail_content_column_one (actually #detail_content_column_two) without being absolutely positioned, and thus, it working correctly.


    I would LOVE any help with this, as I am coming to the end of my rope

  • #2
    Regular Coder
    Join Date
    Jun 2007
    Location
    N. Ireland
    Posts
    351
    Thanks
    16
    Thanked 4 Times in 4 Posts
    I am a bit confused by this. Where exactly do you want the text to appear?

    D.
    Daemonkin.
    If this was helpful, please add to my reputation
    Thousand Sons - Freelance Web Developer - ninetyonedegrees.com

  • #3
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,639
    Thanks
    6
    Thanked 1,004 Times in 977 Posts
    Ay sorry, man, but there’s only one solution for your current problem: Scrap that thing and start from scratch. Sorry that I can’t give you better news but I see that you aren’t making it any better with proceeding like this. I mean you have not much code but what you have this is a huge mess already.

    The first thing you need if you build a website is content. Real content. What is the purpose of your page/site? The reason I ask is because there are millions of apporaches to build a website and all depends on the content/structure. So to decide for the right way you need to make a plan what you are going to put on your website.

    Then the most important keyword is semantics. That means that everything has (or should have) a meaning. If you have a website that doesn’t serve any purpose or doesn’t have any meaning it’s a useless website. The basic thought is: Don’t style the page, style the content. That means you need some content at first.

    Then, after you know everything about semantic HTML (which also includes short and descriptive class names and IDs for elements) you know that you structure your page with the correct markup (and only use elements that are actually necessary), and then you use the elements you have there to style/position/whatever them. You don’t add elements just to add new styles - which includes not nesting numerous divs to achieve something.

    This may all sound a little confusing at first but for example look at http://csszengarden.com to get an idea (or, without being bigheaded, view the source code of my small personal website to see semantic code in action and what can be achieved with it).

    And by the way: You may only use an ID once per document (page). For repeating sections use classes.

    Hope that helps a little bit.


  •  

    Posting Permissions

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