8 replies [Last post]
nate
Offline
newbie
Australia
Last seen: 6 years 20 weeks ago
Australia
Joined: 2007-10-23
Posts: 8
Points: 0

Hi All,

I am new to css, I have a slight problem, i have set up a site and have used a fixed size, but on the catalogue page i will need it to auto resize according to the content that will be placed in. At the moment the text just runs over the fixed height of the div,

Any help will be greatly appreciated

CSS code:
#main {
height:auto; min-height:480px;
background:#B01F31;
clear:both;
}

#main_content {

display:block; position:relative; top:15px; bottom:15px; left:15px; right:15px;
height:auto; min-height:450px;
width:820px;
background:#FFFFFF;
text-align:left;

}

these are to main 2 div that contain the content

HTML code of the page:
<?
ob_start();
require_once("inc/common.php");
require_once("inc/lib.php");
$sesskey=$PHPSESSID;
?>

CoverUp | Wedding & Event Hire

.dragme { cursor: move }

var ie = document.all;
var nn6 = document.getElementById &&! document.all;

var isdrag = false;
var x, y;
var dobj;

function movemouse( e ) {
if( isdrag ) {
dobj.style.left = nn6 ? tx + e.clientX - x : tx + event.clientX - x;
dobj.style.top = nn6 ? ty + e.clientY - y : ty + event.clientY - y;
return false;
}
}

function selectmouse( e ) {
var fobj = nn6 ? e.target : event.srcElement;
var topelement = nn6 ? "HTML" : "BODY";

while (fobj.tagName != topelement && fobj.className != "dragme") {
fobj = nn6 ? fobj.parentNode : fobj.parentElement;
}

if (fobj.className=="dragme") {
isdrag = true;
dobj = document.getElementById("order_form_popup");
tx = parseInt(dobj.style.left+0);
ty = parseInt(dobj.style.top+0);
x = nn6 ? e.clientX : event.clientX;
y = nn6 ? e.clientY : event.clientY;
document.onmousemove=movemouse;
return false;
}
}

function styledPopupClose(id) {
document.getElementById(id).style.display = "none";
}

document.onmousedown=selectmouse;
document.onmouseup=new Function("isdrag=false");

function placeIt(obj)
{
x=300;
y=100;
//obj = document.getElementById(obj);
if (nn6)
{
theLeft = document.documentElement.scrollLeft;
theTop = document.documentElement.scrollTop;
}
else if (ie)
{
theLeft = document.body.scrollLeft;
theTop = document.body.scrollTop;
}

theLeft += x;
theTop += y;
obj.style.left = theLeft + 'px' ;
obj.style.top = theTop + 'px' ;
obj.style.display='block';

}

function showPhoto(file_name,width,height){

var image_file="";
//alert(image_file);
$("itemPhoto").innerHTML =image_file;

}

function save_order(){

var form = document.frm;
var flag = false;
var total=0;
var cur_buy_amt = parseInt(form.cur_buy_amt.value);
var cur_rent_amt = parseInt(form.cur_rent_amt.value);

for(i=0; i 0){

flag = true;
total = total + parseInt(form.elements[i].value);
}
}
}

if (form.order_type.options[form.order_type.selectedIndex].value=="buy") {
total = total+cur_buy_amt;

if (total < parseInt(form.buy_min.value)) {

alert('The minimum number of items to order is '+form.buy_min.value+'.');
return;
}
} else if (form.order_type.options[form.order_type.selectedIndex].value=="rent"){

total = total + cur_rent_amt;

if (total < parseInt(form.rent_min.value)) {

alert('The minimum number of items to order is '+form.rent_min.value+'.');
return;
}
} else {

flag == false;
alert("Please select the order type");

}

if (flag == true){

form.submit();

} else {

alert('Please enter a number for at least one item.');
return;
}
}

function update_order(update_mode){

var form = document.frm2;
var flag = false;

if(update_mode=="delete"){

var tmp = confirm("This will delete the items you've selected. Are you sure?");

if(tmp==true){

for(i=0; i

"> search  
Welcome
<? show_path($category,$item_no);?>
<? list_left_menu($category); ?>
review order
<?

if($view_mode=="search" && $keyword){

search_result($keyword);

} else if($view_mode=="review_order"){

show_cart();

} else if($view_mode=="send_order"){

show_send_form();

}else if ($view_mode=="catalogue"){
if($item_no) show_product_details($item_no);
else list_product($category);
}
?>





CoverUp Wedding & Event Hire



Copyright © 2007 CoverUp Wedding & Event Hire. All rights reserved.

privacy statement | disclaimer

designed by Exocet Designs


<? if($item_no) {?>

<? show_order_form($item_no);?>

<?}?>

var cObj = $('right_pane');
var c_height=0;
c_height = $('right_pane').offsetHeight;
// c_height = document.defaultView.getComputedStyle(cObj,"").getPropertyValue("height");
$('left_pane').style.height = c_height;

<? ob_end_flush();?>

The website address is www.coverup.com.au/staging/

Regards,
Nathan

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 1 week 3 days ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Either use min-height

Either use min-height instead of height or give the area that has content longer than your fixed-height area a vertical scrollbar by using overflow-y: scroll.

And please use <code> tags when posting code to the forum.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

nate
Offline
newbie
Australia
Last seen: 6 years 20 weeks ago
Australia
Joined: 2007-10-23
Posts: 8
Points: 0

Thanks for the info, it is

Thanks for the info, it is appreciated immensely, but i found that it only works in firefox on my mac, not in safari or opera. I dont have an IE to check it out at the moment.

Is there any other type of coding that will work?

again any info is appreciated

regards,
Nathan

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 1 week 3 days ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

nate wrote:i found that it

nate wrote:
i found that it only works in firefox on my mac

What only works?

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

nate
Offline
newbie
Australia
Last seen: 6 years 20 weeks ago
Australia
Joined: 2007-10-23
Posts: 8
Points: 0

sorry my bad, the overflow

sorry my bad, the overflow technique, it works well, i have since then had i look on internet explorer and it seems to work on that as well, so i am quite happy about that, but i was just wondering if there was a technique that works on all browsers?

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 1 week 3 days ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Have you updated your site

Have you updated your site with the changes you've made? Can we have a direct link to a page where we can see it in effect?

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

nate
Offline
newbie
Australia
Last seen: 6 years 20 weeks ago
Australia
Joined: 2007-10-23
Posts: 8
Points: 0

Yeah i have, here is the

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 1 week 3 days ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

I didn't realise you were

I didn't realise you were just trying to contain floats. Make it overflow: hidden.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

nate
Offline
newbie
Australia
Last seen: 6 years 20 weeks ago
Australia
Joined: 2007-10-23
Posts: 8
Points: 0

Cool, Thanks again, your

Cool,

Thanks again, your info was very helpful!