...

View Full Version : Problem with div height not expanding



jeddi
05-11-2008, 06: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> <!-- 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:


/* 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:11 PM
Hi there jeddi,

try adding this to your stylesheet...


#main:after {
content:'';
display:block;
clear:both;
}

coothead

jeddi
05-11-2008, 07:25 PM
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 :thumbsup:

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

coothead
05-11-2008, 07:39 PM
Hi there jeddi,

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

http://www.cs.hmc.edu/~mbrubeck/clear-after/
http://css.maxdesign.com.au/floatutorial/?

coothead

coothead
05-11-2008, 08: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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum