PDA

Click to See Complete Forum and Search --> : CSS problem

rogernem
July 2nd, 2007, 06:40 PM
I have a page where I have a

header

content
left, center, right
end content

footer

When I have my browser at maximum size I have the following
- http://www.codeguru.com/forum/attachment.php?attachmentid=19952 -

But when I minimize my browser I have the following
- http://www.codeguru.com/forum/attachment.php?attachmentid=19953 -

I have my footer above left, center and right but the problem is that it
doesn´t stick to the bottom. It just moves over the content

How can I solve that?



CSS
------------------------------------------------------------------------------------

* {margin:0;padding:0}
/* commented backslash hack v2 \*/
html, body{ height:100%; width: 100%; width:auto; margin: 0; padding: 0; border: 0; margin-top:0px; margin-bottom:0px;}
/* end hack */
* html{height:100%;} /*para opera Firefox*/


#header{
/*position:absolute; top:0; left:0;*/
width:100%;
height:88px;
background-image:url(../images/img_bg_top1.gif);
background-repeat:repeat;
}

#content{
position:relative;
margin:auto;
padding-left:165px;
padding-right:165px;
background-color:#fff;
height:100%;
min-height:100%;

clear:both;
padding-bottom:0 !important;
padding-bottom:35px;
}
* html #container { height:100%}

#left{
position:absolute;
top:0px;
left:0px;
width:160px;
min-height:100%;
height:100%;
}
* html #left {height:100%}

#right {
position:absolute;
top:0px;
right:0px;
width:160px;
min-height:100%;
height:100%;
}
* html #right {height:100%}

#footer {
position:relative;
clear:both;
margin:0;
margin:0 !important;
bottom: -1px; /* For Certain IE widths */
bottom: 0 !important;
padding: 0;
padding: 0 !important;
height:130px;
margin-top:-5px !important;
background-image:url(../images/img_bg_roda.gif);
background-repeat:repeat;
}
PeejAvery
July 2nd, 2007, 06:42 PM
[ moved ]
rogernem
July 2nd, 2007, 07:03 PM
where?
PeejAvery
July 2nd, 2007, 10:12 PM
From General Developer Topics to Client-side Scripting.

Concerning your problem...Can you also post the HTML source for that. It will give me, and others, a better grasp of how it is reacting. In this case, the CSS is not enough.
rogernem
July 4th, 2007, 03:57 PM
I created another page and Im having problems with the height and the footer now.
The content is set to be 100% (see image 1) but when I have more text to the left column for example the height of the center and right doesn´t keep up with the same height of the left and it should since I´m working with percentages

Problem1: The height doesnt keep up with other heights

Problem2: In ie the footer is fixed to the bottom and the height pulls it to the bottom (see image ie) but in firefox and opera (see image ffop) the footer is fixed and the content stays behind the footer and its not actually pulling it down.

How can I solve that?


Here is my code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<style type="text/css">
html, body{
height:100%;margin:0;padding:0;
}
* html{height:100%;} /*para opera Firefox*/

.content{ height: 100%;}
.left{ height: 100%;}
.center{ height: 100%;}
.right{ height: 100%;}


#floating {
width:160px;
height:100%;
position:relative;
}
#floating div {
position:absolute;
bottom:0;
left:0;
}
</style>
</head>

<body>

<div style="height:100%; background-color:#0066FF;" class="content">
<div style="background-color: #FF3300; height:100px;">HEADER</div>

<div style="height:auto 100%; " class="content">
<div style="height:100%;float:left; width:160px; background-color:#FF6666; " class="left">L<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
ASDASD<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
ASDASD<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
ASDASd</div>
<div style="height:100%; float:left; background-color:#FF9966; margin-bottom:0px" class="center">C</div>
<div style="height:100%; float:right; width:160px; background-color:#CCFF99; margin-bottom:0px" class="right">R</div>
</div>

</div>
<div style="height:50px; clear:both; margin:0; bottom:0px; background-color:#CC6666; width:100%; position:fixed">FOOTER</div>

</body>
</html>
PeejAvery
July 5th, 2007, 03:36 PM
A couple of things.

1. Always add your abbreviations to sizes. Don't leave off the "px" for pixels. Browsers don't like that.

2. The whitespace below the blue is because it is taking up exactly 100% height. Notice that it is the exact # of pixels that the window is tall. The left, right, and center sections appear longer because they start below the header.


Now, I took the source and made some modifications to it. The problem that you have is that the left side overflows and since the center and right div aren't part of it, they won't just resize by themselves. You will have to use JavaScript to calculate the new height of the left, and resize the center and right accordingly.

Basically, onload of the page, you should calculate which of the three has the greatest height, and then set the other two to the same height.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<style type="text/css">
html, body{
height: 100%;
margin: 0px;
padding: 0px;
}
.content{
height: 100%;
background: #0066FF;
}
#header{
background: #FF3300;
height: 100px;
}
#footer{
width: 100%;
height: 50px;
clear: both;
margin: 0px;
bottom: 0px;
background: #CC6666;
position: fixed;
}
.left{
width: 160px;
min-height: 100%;
max-height: auto;
float: left;
background: #FF6666;
}
.center{
min-height: 100%;
max-height: auto;
float: left;
background: #FF9966;
margin-bottom: 0px;
}
.right{
width: 160px;
min-height: 100%;
max-height: auto;
float: right;
background: #CCFF99;
margin-bottom: 0px;
}
</style>
</head>

<body>

<div class="content">
<div id="header">HEADER</div>

<div class="content">
<div class="left">L<br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br />ASDASD<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br />ASDASD<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />ASDASd
</div>
<div class="center">C</div>
<div class="right">R</div>
</div>

</div>
<div id="footer">FOOTER</div>

</body>
</html>
rogernem
July 5th, 2007, 06:04 PM
Looking better ! :)

How can I do that with javascript?

I´m running into another problem. Actually two:

1) How can I have a div at the bottom of the left column in all times?
Something like image "divbottom"

2) How can I prevent a div from falling?
See image "divfall"

<div style="float:left; width:400px; background-color:#CCFF66">L</div>
<div style="float:right; width:200px; background-color: #FF3366">R</div>
PeejAvery
July 5th, 2007, 11:01 PM
2) How can I prevent a div from falling?
See image "divfall"
That depends on how you want it too look.

1. Change the way it reacts to overflow (auto, scroll, hidden, visible).

2. white-space: nowrap.

I will get to question #1 tomorrow when I have time. For now, it's my bedtime!
PeejAvery
July 6th, 2007, 11:59 AM
1) How can I have a div at the bottom of the left column in all times?
Something like image "divbottom"
You will have to create a left content div and then display those as block elements so that you have left top and left bottom.

<div id="leftcontent">
<div id="lefttop" style="display: block">Top</div>
<div id="leftbottom" style="display: block">Bottom</div>
</div>
rogernem
July 10th, 2007, 04:37 PM
You will have to create a left content div and then display those as block elements so that you have left top and left bottom.

<div id="leftcontent">
<div id="lefttop" style="display: block">Top</div>
<div id="leftbottom" style="display: block">Bottom</div>
</div>


Didnt work either
Here is what I did


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<style type="text/css">
html, body{
height: 100%;
margin: 0px;
padding: 0px;
}
.content{
height: 100%;
background: #0066FF;
}
#header{
background: #FF3300;
height: 100px;
}
#footer{
width: 100%;
height: 50px;
clear: both;
margin: 0px;
bottom: 0px;
background: #CC6666;
position: fixed;
}
.left{
width: 160px;
height: 100%;
min-height: 100%;
max-height: auto;
float: left;
background: #FF6666;
}
.center{
min-height: 100%;
height: 100%;
max-height: auto;
float: left;
background: #FF9966;
margin-bottom: 0px;
}
.right{
width: 160px;
min-height: 100%;
height: 100%;
max-height: auto;
float: right;
background: #CCFF99;
margin-bottom: 0px;
}
</style>
</head>

<body>

<div class="content">
<div id="header">HEADER</div>

<div class="content">
<div class="left">LASDASd


<div id="leftcontent">
<div id="lefttop" style="display: block">Top</div>
<div id="leftbottom" style="display: block">Bottom</div>
</div>

</div>
<div class="center">C</div>
<div class="right">R</div>
</div>

</div>
<div id="footer">FOOTER</div>

</body>
</html>
PeejAvery
July 10th, 2007, 04:56 PM
Just make the top div take up 100% height. That will force the bottom div to show at the bottom.
rogernem
July 10th, 2007, 06:40 PM
Just make the top div take up 100% height. That will force the bottom div to show at the bottom.

In ie it works but in opera and firefox the bottom div stays on the top of the footer


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>SwissWeb - Loja Demo v2.0</title>
<style type="text/css" media="screen"> @import "css/css_loja.css"; </style>

<style type="text/css">
body,html{ height:100%; min-height:100%; margin:0; padding:0;
background-image: url(images/bg_dir.gif);
background-position: right;
background-repeat: repeat-y;
}
*html{ height:100%; min-height:100%;}


.TopImage {
height:100%;
min-height:100%;
clear:both;
}
</style>
</head>
<body>





<div style=" height:50px; top:0; background-color:yellow; clear:both">HEADER</div>



<div class="TopImage">

<div style="width:160px; float:left; background-color:#CC9966;height:100%;">

<div id="lefttop" style="display: block; height:100%; background-color:#00FF99">
R<br />
<br />
<br />
<br />
fim
</div>
<div id="leftbottom" style="display: block; background-color:#FF9900; height:130px;">Bottom</div>

</div>
<div style="float:left;">C</div>
<div style="width:160px; float:right; background-color:#CC9966">R</div>

</div>



</div>

<div id="footer">

</body>
</html>
rogernem
July 11th, 2007, 12:05 PM
Any other ideas?
What about that javascript code?
PeejAvery
July 11th, 2007, 02:15 PM
Well, the last code you posted is incomplete/invalid. You have tags that haven't been closed. Also you have a call to import some other CSS file. I don't exactly understand what is your problem. Can you either provide a completed example or images like before?

I think you would have been better off sticking to tables.