CSS layers auto sizing?

[ackerley1]

I am working on website that is built predominantly using CSS layers (<DIV> tags) I have 3 vertical layers that I need to have expand with the content, so that the content does not "float" down into the background.

Here is a snippet of one of my classes. The other 2 are similar.

.rightmargin {
border: thin solid #000099;
background-color: #000099;
position: absolute;
height: 100%;
width: 270px;
left: 501px;
top: 10px;
filter: Alpha(Opacity=40);
z-index: 2;
}

I thought the height: 100% would handle this, but it only makes it go to 100% of the screen/browser size. (Which also causes problems in lower resolutions screens).

I have the content as a separate class -
.content {
position: absolute;
border: medium solid #FF0000;
width: 350px;
left: 45px;
top: 170px;
}
(less the border)

Any suggestions on how to over come this?

Thanks

[speed]

Can you post a link to the page?

From what you've put here the chances are the problem is related to the structure of the page as well as the CSS.

You need to nest <div> blocks in an appropriate fashion.

[ackerley1]

Here is the link to the page:

http://www.sovereignwebdesign.com/tiwc/temp1.php

I have tried nesting differently and it does not do anything. There are a lot of layers as this is my first large experiment with full CSS layouts.

I don't think you can view the CSS file, but I can email that to you if you want.

Thanks for the help.

Rob

[speed]

Firstly you don't need the id="Layer#" on the divs as you are not defining them they are just bloat.

As you are using absolute positioning you are taking the blocks out of the document flow which is why you are having a problem.

You can use absolute positioning but if you want the div to expand with the content all the divs inside it, that cause an expansion, must not be absolutely positioned (use floats).

You also need to avoid setting heights on the divs unless you do really want them a fixed height.

As a side issue your transparency doesn't work on Firefox. It needs some extra directives but I don't think the CSS will validate with them in.

By the way I can view the CSS file, as the browser has to be able to read it I can read it, also Firefox Developer Tools allow me to view it.

[ackerley1]

Thanks for the help, but how do I use "floats"? I use DW-MX and from what I can gather there is only absolute, relative and static options, no float option. How would I assign that?

Also, what is this Firefox developer tools you mention and where can get it?

Thanks again.

Rob

[speed]

Also, what is this Firefox developer tools you mention and where can get it?

1) Download Firefox at http://www.mozilla.org/products/firefox/
2) Run Firefox and go to http://update.mozilla.org/extensions...eloper%20Tools down load and install the Web Developer extension. You'll have to restart Firefox.

Thanks for the help, but how do I use "floats"? I use DW-MX and from what I can gather there is only absolute, relative and static options, no float option. How would I assign that?

I don't use Dreamweaver I use GoLive so there might be a way of doing it in DW. The only way I know of building pages like this in CSS is to roll up your sleeves and work in the source view, ie. forget drag and drop editing and all the whiz bang features of your tool set.

In fact notepad is as good as anything once you start down this route.

[ackerley1]

Speed, thanks again for you help.

I have played with many different options of nesting different layers, changing the positioning and height values in my css file and I have run out of things to try.

I have managed, to achieve my white backgroud (class=border) to adjust to fit, but in doing so my right and left margin classes will not.

I may be asking too much, but is there any chance that you could play with this and see if maybe I am missing something? Or maybe try it in GoLive and see what changes you had to make and relay them to me?

Greatly appreciate your help on this, as I am nearing the point of frustration.

Thanks

Rob.

Also thanks for the info on Firefox.

[speed]

You didn't post a link to what you currently have, but here are some clues to what you should be looking at.

1) Forget about alpha, pre-process the images colours etc.
2) The green left col can now be a tiled background to the white content region. You can use padding to position the text.
3) The right blue col can be a <div> which contains the white content region. Again use padding as needed.

NOTE: You shouldn't have height set on any of those <div>s.

Depending on where you're at that should be fairly close to what you are after.

I could give you the completed layout, but then you wouldn't learn anything and I'd have to stop doing paid work. ;)

If/when you get stuck again make sure you post a link to whatever you've have at that point, it makes life much easier if I can see what you are seeing.

[mikmik]

In DreamweaverMX, you are using the 'Edit CSS' view in the box? (I was going to say top left, but I use 'Homestyle/Code View' so may be different)

If you r-click the selector to edit the properties/values, in the 'box properties' there is a the 'float' and also 'clear' dropdown options. It is right beside the width and height boxes, above the margins dialogue.

Sorry, I don't have DM installed at the moment, but if I am not clear enough, let me know.

I actually prefer to just double-click my CSS doc (if it is linked) in the files tree. Then I edit it like normal in the code pane (where you edit the html)

HTH :O)

[ackerley1]

Guys,

Thanks for all the help, I finally figured it out.

I took Speed's recommendation of making the margins as the back ground for the content DIV, and with some playing/learning I managed to make it work.

Still needs a bit of cleaning up, but the main thing is I have it working and can now actually get to adding content.

You can take a look at it here:
http://www.sovereignwebdesign.com/tiwc/temp1.php

Again, thanks for all your help with this topic - and more imporantly your patience :-)

Thanks

Rob