Problem with div height not expanding [Archive]

jeddi

05-11-2008, 05:44 PM

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:

<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> 
</div> 

<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> 

<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> 

</div> 
</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:

/* 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;
}

coothead

05-11-2008, 07:19 PM

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...

#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...

#header {
width: 900px;
margin: 0 auto;
background:transparent;
}

...where the container width is only 900px. :eek:
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