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 Coder
    Join Date
    Oct 2011
    Posts
    81
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Div height problem.

    Hi. I have a problem with the height of a div.

    I want the background of the "textblock" to be the same height as the text in it (from div 1, 2 and 3). But the background is only a few pixels high. I probably made some stupid mistake again, but how can I solve this?

    This is the HTML part:

    Code:
    <div id="textcontent">
    
    	<div id="left">
    		<div class="textblocktitle">
    			<h1>title</h1>
    		</div>
    		<div class="textblock">
    			<div id="1">
    				Lorem ipsum dolor sit amet.
    			</div>
    			<div id="2">
    				Vivamus nec tellus vel leo tristique.
    			</div>
    			<div id="3">
    				Nam in quam libero, sit amet.
    			</div>
    		</div>
    		
    	</div>
    	
    </div>
    This is the CSS:

    Code:
    .textblock{
    	width: 761px;
    	background: #ffffff;
    	margin: 0 10px 26px 0;
    	padding: 15px 15px 15px 31px;
    }
    
    .textblocktitle{
    	width: 807px;
    	height: 42px;
    	background: #fbfbfb;
    	text-align: right;
    }
    
    #1{
    	width: 240px;
    	float: left;
    	margin-right: 20px;
    }
    
    #2{
    	width: 240px;
    	float: left;
    	margin-right: 20px;
    }
    
    #3{
    	width: 240px;
    	float: left;
    }
    Last edited by apotd; 03-10-2012 at 10:55 PM.

  • #2
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    Hey there apotd,

    First off, you should change id="1" id="2" id="3" to class="textblock-1", class="textblock-2", class="textblock-3"

    When you float the li's you have to clear the floats

    http://css-tricks.com/all-about-floats/
    Scroll down to "The Great Collapse"

    Code:
    .textblock {
       overflow: hidden;
       zoom: 1;
    }
    overflow: hidden; zoom: 1; is a well known clear method, there are a lot of them.
    Overflow Hidden
    Clearfix
    MicroClearfix
    Last edited by Sammy12; 03-10-2012 at 10:55 PM.

  • #3
    New Coder
    Join Date
    Oct 2011
    Posts
    81
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you, that just worked perfectly!


  •  

    Posting Permissions

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