CSS - Adjust Css

hi there,

I have a problem, and though I feel it's pretty simple and basic I can't seem to work me way around it.
this is what I want, but can't get:

I have a layer, with a certain content. I have not specified the height, so the content determines the layers height.
width is fixed value and that's ok.
now the issue,
I want the layers height to shrink if I start making the browser window smaller. So if I make the browser-window let's say 300 px high, the layer should be 300 to.

setting height to 100% wont work...

what the basic solution here?

hope for some help,
kind regards Game

hello everyone,
i am using css based menu . requirement is that, menu should adjust its width automatically based on the text length.

Here is my css : =
css Code:
Original - css Code li ul li { background: #000; color: #fff; padding-top: 4px; border-bottom: 1px solid #fff; letter-spacing:1px; text-transform: capitalize; text-shadow: 2px 2px 2px #22222; width: 250px; margin:0px auto; height: 18px; font-size: 11px; font-weight: normal; text-align:left; filter: alpha(opacity=80); opacity: 0.8; -moz-opacity: 0.8; }

  

  


 li ul li {


             background: #000;


             color: #fff;


             padding-top: 4px;


             border-bottom: 1px solid #fff;


             letter-spacing:1px;


             text-transform: capitalize;


             text-shadow: 2px 2px 2px #22222;


             width: 250px;


             margin:0px auto;


             height: 18px;


             font-size: 11px;


             font-weight: normal;


             text-align:left;


             filter: alpha(opacity=80);


             opacity: 0.8;


             -moz-opacity: 0.8;


         } 

you just see the attachment, you would realise that , the text is cropping & not displayed.


Also , can any one suggest , what can I do to make this CSS to cause make it attractive.?

I may be trying to square the circle here. I have a container that is not the full length of the page [padding top and bottom].

Within the container, I have 2 main content elements:

1. a nested div forms a strip down the left edge, holding a decorative pattern. [note: it doesn't currently extend down the entire left edge ~ other items are above it ~ but I can include those in the strip and make it 100% if the idea is workable].

2. the main content div is beside it.

The container automatically adjusts to the height of the entire content in both divs.

I'd like for the 'decorative' div to automatically adjust to 100% height of the container instead [ie. match the height of the content to the right of it - automatically]. Is this possible?

Kravvitz....I know

Is there a way to decrease a default spacing between bullet and text in <ul>?

Trying to follow "the best practices" I wanted to convert my menu from bunch of <a></a><br> to unordered list. I already display arrows icon next to menu items so I though it would save me some typing on <img>. But there is one problem: I can't decrease the space between bullet and text. There is bullet, around one em of empty space and then text. It breaks my layout, making menu items wrap to another line, and also wastes some space. I tried to play with margins and padding, but bullets still stay at the same place. Also negative margin and padding doesn't seem to work. If I use a background image instead of bullet, I can adjust the spacing but then the bullet position doesn't seem consistent and get cramped on text in longer lines.