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 5 of 5
  1. #1
    Senior Coder
    Join Date
    May 2006
    Posts
    1,680
    Thanks
    28
    Thanked 4 Times in 4 Posts

    Problem with div height not expanding

    Hi

    I have been staring at this and trying different permutations but can not get it to work

    This is my script - From body down:

    Code:
    <body>
    
    <div id="header">
    
    <div id="splash"></div>
    
     <div id="menu">
     <ul>
     <li><a href="http://fethiye-guide.com/index.php">Home</a></li>
     <li><a href="http:///www.fethiye-guide.com/blog/turkey-news-events-places-to-visit/">News, Events, Places to Visit,Eating Out, Enetertainment.</a></li>
     <li><a href="http://www.fethiye-guide.com/ez-ads/index.php" >Advert Centre</a></li>
     <li><a href="http://www.fethiye-guide.com/connects/selman/index.php" >Useful Connections</a></li>
    
     </ul>	
     </div> <!-- end of menu  -->
     </div> <!-- end of header  -->
    
    <div id="main">
    hello there
    
      <div id ="con-pics">
      
      <div class="ysnazzy" style ="width: 300px;" >
       <b class="ytop"><b class="yb1"></b><b class="yb2 xcolor"></b><b class="yb3 xcolor"></b><b class="yb4 xcolor"></b></b>
        <div class="yboxcontent">
    
          <h4 class="ycolor" >Title 1</h4>
          <img alt="selman 01" src="selman01.jpg" height="260px" width="298px" />
        </div>
       <b class="ybottom"><b class="yb4"></b><b class="yb3"></b><b class="yb2"></b><b class="yb1"></b></b>
      </div>
    	
    	<br><br>
    	
    	 <div class="ysnazzy" style ="width: 300px;" >
       <b class="ytop"><b class="yb1"></b><b class="yb2 xcolor"></b><b class="yb3 xcolor"></b><b class="yb4 xcolor"></b></b>
    
        <div class="yboxcontent">
          <h4 class="ycolor" >Title 1</h4>
          <img alt="selman 01" src="selman01.jpg" height="260px" width="298px" />
        </div>
       <b class="ybottom"><b class="yb4"></b><b class="yb3"></b><b class="yb2"></b><b class="yb1"></b></b>
      </div>
    	
    	<br><br>
    	
    	 <div class="ysnazzy" style ="width: 300px;" >
    
       <b class="ytop"><b class="yb1"></b><b class="yb2 xcolor"></b><b class="yb3 xcolor"></b><b class="yb4 xcolor"></b></b>
        <div class="yboxcontent">
          <h4 class="ycolor" >Title 1</h4>
          <img alt="selman 01" src="selman01.jpg" height="260px" width="298px" />
        </div>
       <b class="ybottom"><b class="yb4"></b><b class="yb3"></b><b class="yb2"></b><b class="yb1"></b></b>
      </div>
    	
     </div> <!-- end of con-pics -->
    
      <div id ="con-text">
      <span class = "con-head">Company: Fethiye Harita.<br>
    	Director: Yusef Selman Sekeroglu<br>
    	Address: 2nd Floor, Ilhan ��hane, 22 main Street, Fethiye.<br>
    	Telephone: 646 23 41<br>
    	Fax. 646 35 27<br>
    
    	Email: �eker@ttnet.com<br>
    	<br>
    	Languages Spoken: Turkish.<br>
    	<br>
    	Specialities: <br>
    	Land Survey: this is where I write lots of stuff about this topic and then some other stuff as well. I wnat to have enough space to be able to write quite a bit because some specialities are quite extensive and need some explaining.
      <br><br>
    	Land Parceling: Same thing here.Needs quite a bit of space to write lots of stuff about this topic and then some other stuff as well. I wnat to have enough space to be able to write quite a bit because some specialities are quite extensive and need some explaining.
    	<br><br>
    
    	Land Sale and Legal Registration: Same thing here.Needs quite a bit of space to write lots of stuff about this topic and then some other stuff as well. I wnat to have enough space to be able to write quite a bit because some specialities are quite extensive and need some explaining.
    	</span>
    
     </div> <!-- end of con-text -->
    
     
    </div> <!-- end of main  -->
    </body>
    </html>
    And the page can be seen at :
    http://www.fethiye-guide.com/connects/selman/index.php

    As you can see I have put a "hello there" in the div but really all of the content (photos and text) should have the same white background as the "hello there" cos it should be inside the "main" div.

    I am using Mox FF.

    The index page displays the background OK
    ( although the right-hand edge of the boxes dont show)

    see here:
    http://www.fethiye-guide.com/blog/

    Would really appreciate some help

    here is the relevant css:

    Code:
    /* Header */
    
    #header {
    	width: 900px;
    	margin: 0 auto;
    	background:transparent;
    }
    
    /* Main */
    
    #main {
    	width: 900px;
    	margin: 0 auto;
    	background:#fff;
    	border:#ddd 3px solid;
    }
    
    /*
    *  Connections
    */
    
    #con-pics{
      width: 300px;
    	margin: 0 auto;
    	margin-left: 0;
    	margin-top: 1cm;
    	float: left;
    	background:#fff;	
      }
    
    #con-text{
      width: 560px;
    	margin: 0 auto;
    	margin-left: 10px;
    	margin-top: 1cm;
    	float: left;
    	color: #000;
    	background:#ffff66;	
      }
    
    .con-head {
      font-size:18px;
    	font-weight:bold;
    	color: #3333ff;
    	}
    If you want to attract and keep more clients, then offer great customer support.

    Support-Focus.com. automates the process and gives you a trust seal to place on your website.
    I recommend that you at least take the 30 day free trial.

  • #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,708
    Thanks
    0
    Thanked 237 Times in 232 Posts
    Hi there jeddi,

    try adding this to your stylesheet...
    Code:
    
    #main:after {
        content:'';
        display:block;
        clear:both;
     }
    
    coothead

  • #3
    Senior Coder
    Join Date
    May 2006
    Posts
    1,680
    Thanks
    28
    Thanked 4 Times in 4 Posts
    Thats great - fixed that problem

    But I do wonder why it doesn't work without this - shouldn't the underlying (nested) divs natuarally get inside the "mother" div ?

    Is this "after" term - a hack or a genuinely necassary element ?
    I've never seen it before.

    Thanks VERY much

    BTW - can you see any reason for the top image "box" to be about 4px wider than the content box ?
    Maybe its only 2px but it certainly looks wider and yet both are supposed to be 900px !!

    here:
    http://www.fethiye-guide.com/connects/selman/index.php

    thanks
    Last edited by jeddi; 05-11-2008 at 06:34 PM.
    If you want to attract and keep more clients, then offer great customer support.

    Support-Focus.com. automates the process and gives you a trust seal to place on your website.
    I recommend that you at least take the 30 day free trial.

  • #4
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,708
    Thanks
    0
    Thanked 237 Times in 232 Posts
    Hi there jeddi,

    perhaps these links may help address some of your misconceptions...
    coothead

  • #5
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,708
    Thanks
    0
    Thanked 237 Times in 232 Posts
    Hi there jeddi,
    BTW - can you see any reason for the top image "box" to be about 4px wider than the content box ?
    Maybe its only 2px but it certainly looks wider and yet both are supposed to be 900px !!
    Look at this...
    Code:
    
    #splash {
     background:url(http://www.fethiye-guide.com/blog/wp-content/themes/seashore-10/img/header.jpg) no-repeat center;
      height:180px;
      width:900px;
      border:#ddd 3px solid;
      margin:10px auto;	/*Splash's redeclared in functions.php for WP 2.1 or greater */
    }
    
    ...and you will see that the overall width is 906px.
    Now look at this...
    Code:
    
    #header {
    	width: 900px;
    	margin: 0 auto;
    	background:transparent;
    }
    
    ...where the container width is only 900px.
    Change it to 906px and it should then line up correctly.

    And while we are here, note that the correct shorthand for border is...
    border:3px solid #ddd;
    coothead


  •  

    Posting Permissions

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