...

View Full Version : Div Height Issue



abhi3d
11-05-2010, 02:20 PM
Hi I am creating a site using DIV/CSS. The issue is the overflown contents are hiding. I know that is because of overflow: hidden. but I remove that. the DIV doesn't expand with contents.

See the example here:

http://www.abhi3d.com/abhi/bee/achleader.php

It looks OK in IE but not in FF and Chrome.

Here is the Code.

================================================
HTML
==================================================

<div id="MainContentsFullWidth">
<p class="style2 center TopMarginZero"><u>Postcards</u></p>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="33%" align="center" valign="top"><img src="images/teacherhelpercard1.png" width="180" height="120" alt="Teachr Helper Card" class="ImageBorder"><br>
<span class="bold">Order Code TH01</span></td>
<td width="33%" align="center" valign="top"><img src="images/groupworkcard1.png" width="180" height="120" alt="Group Work Award" class="ImageBorder"><br>
<span class="bold">Order Code GW01</span></td>
<td width="33%" align="center" valign="top"><img src="images/hoycard2.png" width="180" height="120" alt="Head Of Year Award" class="ImageBorder"><br>
<span class="bold">HOY01</span></td>
</tr>
<tr>
<td height="10" colspan="3" align="center" valign="top"></td>
</tr>
<tr>
<td align="center" valign="top"><img src="images/achleadercard1.png" width="180" height="120" alt="Achievement Leader Award" class="ImageBorder"><br>
<span class="bold">Order Code AL01</span></td>
<td align="center" valign="top"><img src="images/hardworkercard1.png" width="180" height="120" alt="Hard Worker" class="ImageBorder"><br>
<span class="bold">Order Code HW01 </span></td>
<td align="center" valign="top"><img src="images/backpostacrd.png" width="180" height="120" alt="Back Post Card" class="ImageBorder"><br>
<span class="bold">Postcard Message</span></td>
</tr>
<tr>
<td height="10" colspan="3" align="center" valign="top"></td>
</tr>
<tr>
<td height="10" colspan="3" align="center" valign="top" class="style5 bold">All stickers and postcards have a unique code for pupils to register at (URL address blocked: See forum rules)</td>
</tr>
</table>
<div id="Next" class="clearboth"><a href="#"><strong>Next</strong></a></div>
</div>
</div>

</div>
<div class="clearboth"></div>
</div>
================================================
Download CSS Here
================================================

http://www.abhi3d.com/abhi/bee/beegifted.css
================================================

Any Help?

Thanks in Advance

Abhi

abduraooft
11-05-2010, 02:41 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
To expect a standard output, you need to supply a valid markup, and that requires a valid DOCTYPE (http://www.alistapart.com/articles/doctype/) at the top. I'd recommend an HTML Strict one.

abhi3d
11-05-2010, 03:01 PM
I Tried... nothing happened..

Is that really anything to do with this issue. I dont' think so.

teedoff
11-05-2010, 03:09 PM
I Tried... nothing happened..

Is that really anything to do with this issue. I dont' think so.

lol Dont look a gift horse in the mouth...you wanted help and the FIRST thing a web page needs in a valid doc type.

Now, I viewed your page and dont see any content that is hidden or needs an expanding div. Could you be more specific on your issue please?

abhi3d
11-05-2010, 03:43 PM
Ok Take a look at these images. You will get what I really mean.

See in FF or Chrome. IE Shows OK.

Full Contents here.
http://www.abhi3d.com/abhi/01.jpg

Div Hiding Contents
http://www.abhi3d.com/abhi/02.jpg

Hope this makes sense.

teedoff
11-05-2010, 04:01 PM
I think, and I could be wrong, this may be more of a php issue. I think the php script error messages are whats pushing your content down and hiding the lower images.

I dont know that much about php yet, but im sure someone could tell you whats going on.

abhi3d
11-05-2010, 04:40 PM
No. I am sure it's not because of that php script. I have tested.

abhi3d
11-06-2010, 03:45 AM
Any Help Guys???? No one on the site could help me?

abduraooft
11-06-2010, 08:28 AM
Any Help Guys???? No one on the site could help me?

Please carry what I've asked and then update the online version.

abhi3d
11-06-2010, 11:53 AM
Please carry what I've asked and then update the online version.

I have just done what you said. see the link now

http://www.abhi3d.com/abhi/bee/achleader.php

abduraooft
11-06-2010, 12:17 PM
Now add clear:left; to #Top ul.

Then apply

margin-left:100px;
padding-bottom:10px;
padding-top:0;
text-align:justify; to #MainContentsFullWidth and remove all other properties applied to this selector, such as float,height,width etc.

PS: 1)The way you've sliced the logo is wrong, I'd say.
2) Don't you know why using tables for layout is very bad (http://www.hotdesign.com/seybold/)?

abhi3d
11-06-2010, 01:23 PM
Now add clear:left; to #Top ul.

Then apply

margin-left:100px;
padding-bottom:10px;
padding-top:0;
text-align:justify; to #MainContentsFullWidth and remove all other properties applied to this selector, such as float,height,width etc.

PS: 1)The way you've sliced the logo is wrong, I'd say.
2) Don't you know why using tables for layout is very bad?

Oh Wow!!!! You are magician.. It worked like a charm.. thank you very very much...

Just a small issue there is an around 5px gap under header. I dont' see what causes it. I am new in DIVs. http://www.abhi3d.com/abhi/bee/achleader.php

the original site is in table format I am converting it into DIVs.. see www.beegifted.com. the images has been cut by my client's coder. I dont' know him. I am just converting it to DIVs. the center part of the page had tabled data so I had to use table tags. Can you tell me how to use divs as tables.. I mean like rows and columns...

abduraooft
11-06-2010, 01:42 PM
Add
a img {
float:left;
} to your CSS to remove all mysterious gaps in your layout caused by your poor image slicing. Then make the following chages in your CSS

#Header {
height:138px;
position:relative;
width:965px;
}
/*
.TopMenu {
height:138px;
}
*/
.TopMenu ul{
position:absolute;
right:0;
botom:0;
}

Then remove float:left; from .TopMenu ul li
You don't need a wrapper <div> around all the elements, which may yield in divitis (http://csscreator.com/divitis)! Try to make your markup semantic (http://boagworld.com/technology/semantic-code-what-why-how), with minimum html tags.

abhi3d
11-06-2010, 02:00 PM
Add
a img {
float:left;
} to your CSS to remove all mysterious gaps in your layout caused by your poor image slicing. Then make the following chages in your CSS

#Header {
height:138px;
position:relative;
width:965px;
}
/*
.TopMenu {
height:138px;
}
*/
.TopMenu ul{
position:absolute;
right:0;
botom:0;
}

Then remove float:left; from .TopMenu ul li
You don't need a wrapper <div> around all the elements, which may yield in divitis (http://csscreator.com/divitis)! Try to make your markup semantic (http://boagworld.com/technology/semantic-code-what-why-how), with minimum html tags.

This may be last time I bother you.

Please see these 3 pages.
http://www.abhi3d.com/abhi/bee/index.php
http://www.abhi3d.com/abhi/bee/achleader.php
http://www.abhi3d.com/abhi/bee/about.php

abduraooft
11-06-2010, 02:07 PM
When making a layout using floats, you need to put all floated elements before their non floated siblings in markup order. Refer http://bonrouge.com/3c-hf-fixed.php



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum