Css problem

[GezH]

Hello, is there a way I can specify a minumum size for a div, but then it expands downwards when the page content gets longer? I have this div:

#cont {
width:520px;
height:400px;
background:#ffffff;
color: #333333;
border:solid #000000;
border-width:0 0 0 1px;
text-align:left;
}

It works fine on most browsers, but not on Safari 2 on Mac OSX 10.4.3. Apparantly here, the text can get too long for the panel, and the panel does not stretch to contain it.

Thanks for any advice.

 

[BillyRayPreachersSon]

Instead of:

height:400px;

use:

min-height: 400px;
_height: 400px;

Hope this helps,
Dan




Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[GezH]

It solved everything! Many thanks!

 

[GezH]

Now I have another question. I have a bar along the top of the page, the kind of bar where you would put menu's etc. It is defined in the following css:

#bar {
height:25px;
background:#c0c0c0;
color: #333333;
border:solid #000000;
border-width:1px 0 1px 0;
padding-right: 5px;
}

Now, I want to be able to add text at both ends of the bar. Currently, it automatically goes to the far right end, and if I try and put some text at the left end, it all moves in that direction. How could I create two areas within this div, one left aligned and one right?

Thanks!

 

[Vragabond]

You could float them left and right. Other than that it would be pretty hard.

 

[GezH]

Maybe! But how would I try that please?

 

[Vragabond]

#bar .left {
  float: left;
  width: 100px;
}

#bar .right {
  float: right;
  width: 100px;
}

Like so.

 

[GezH]

Thanks - and how would I call that from within the bar div? With two new seperate div calls?

 

[Vragabond]

I suppose so. Without seeing anything from your html, it is virtually impossible to predict how you would place it in. The code assumes two elements inside an element with an id of bar and each element has a class either left or right.

 

[GezH]

Well at the moment it's simply...

<div id="bar"> 
<span class="normal">Welcome!</span>
</div>

...but I want to have two bits of text, one at each end.

 

[Andeee]

<div id="bar">
  <span class="right">Text on the right</span>
  <span class="left">Text on the left</span>
</div>

sometimes putting the left one above the right forces the right onto a new line, this way usually works for me.