Some CSS box help.

I'm making a website with css boxes but things aren't going too smoothly.

I've got my main container, that has all the boxes in it, but that container won't expand (vertically) when I set it to "auto".

I want the minimum size of it to be around 600pxls but I want it to expand when more information is on certain pages.

I know there's a ton of code and info that might be making me trip up that I haven't provided, but does anyone have a clue as to what might be causing it?

ahh damnit. I think I found the problem. Always in the darn code.

forget that. Still not working. Damn this. I just want a css container to hold css boxes and expand as the boxes get bigger! Darn!

Also, I'm sure part of it is me, but this whole css with Dreamweaver seems way too buggy. It's getting ridiculous. Me changing something inconsequential, and it giving me a different preview, and getting different previews in DW and in the browser. So sometimes with DW, what it shows is totally wrong. Maybe I just need to learn more.

Always in the darn code.

Where else could it be? :D

Anyway, by boxes I'm sure you mean DIVs?
Have you tried using percentages in widths for the divs?

Maybe you should post the code or give us a link to it, it's hard to guess how people code their sites.

I just want a css container to hold css boxes and expand as the boxes get bigger! Darn!

Welcome to the biggest problem with css. Basically a parent div, the container, will not inherit its size from a child div, the boxes, (i think i got my css-speak right). This means as the boxes get bigger, they'll overlap the container.

Im sure there's a couple hacks/javascripts somewhere, but the easiest way to deal with this is just use a single table to hold your data. The table will cause the container to expand properly.

If you do want a pure css layout, you may need to rethink your layout. For example if your container only has a border/bg color, then those could be added to a repeating background image and the container can be removed.

if the html looks like this:

-#container
--#child div
--#child div
--#child div

the #container div will expand with the children divs.

actually showing some code would help also.

Thanks for the suggestions.

I put the boxes in a big ass table and that fixes the 'container' problem, but I can't get the damn boxes to line up right. Safari shows it perfectly while ie and firefox dont. I'm doing all this in Dreamweaver of course, and it's pretty much my first css driven site.

I would do the layout a bit differently, especially after running into the problems that I have, but that's not my decision. It's a project for school and I've got to turn what I've been given into a template. What I've got looks fine in Safari.

The darn boxes don't stay in the right place in different browsers though. And if I were to make them 'absolute' then they couldn't be contained inside a table or another box.


The html:


[HTML]"http://www.w3.org/TR/html4/loose.dtd">

* * *

[/HTML]

the css:[CODE].headerMain {
background-color: #FF0000;
height: 115px;
width: 555px;
clear: none;
float: left;
background-image: url(headerMain.jpg);
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
background-repeat: no-repeat;
}
.headerBoxLeft {
height: 115px;
width: 190px;
background-color: #0000CC;
margin-left: 5px;
background-image: url(headerLeft.jpg);
clear: none;
float: left;
background-repeat: no-repeat;
}
.headerBoxRight {
background-color: #000099;
height: 115px;
width: 190px;
background-image: url(headerRight.jpg);
clear: none;
float: left;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 5px;
background-repeat: no-repeat;
}
.mainNav {
background-color: #00CC00;
height: 460px;
width: 125px;
background-image: url(links.jpg);
clear: left;
float: left;
margin-top: 5px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
background-repeat: no-repeat;
}
.contentsLeft {
height: 465px;
width: 425px;
background-color: #006633;
background-image: url(contentLeft.jpg);
clear: right;
float: left;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 5px;
margin-left: 5px;
background-repeat: no-repeat;
}
.contentsRight {
background-color: #003300;
height: 460px;
width: 385px;
float: left;
margin-top: 5px;
margin-right: 0px;
margin-bottom: 5px;
margin-left: 5px;
background-image: url(contentRight.jpg);
clear: none;
background-repeat: no-repeat;
}
.footer {
background-color: #000000;
background-image: url(footer.jpg);
clear: both;
width: 945px;
margin-top: 0px;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 0px;
float: left;
height: 25px;
}
[/CODE]

What I'm going to have to do if this wont work out, is just do it in tables I guess. I'll be so defeated if I have to do that. What a beating tables are.


Images:

Safari

Firefox

IE

I kind of figured it out.

I changed the Doc type to strict as opposed to leniant, and I took out a bunch of the "Clear:None"s.

So apparently clear:none isn't the same as leaving it blank.

i'd also reccomend putting headerleft/right inside a container div. i just fin it's easier/runs itno fewer problems to treat anything that has to be floated like:

* parent
** children
-------------------
* headWrap
** headLeft
** headRight

hope i'm not cofusing you.

[QUOTE=derek lapp]i'd also reccomend putting headerleft/right inside a container div. i just fin it's easier/runs itno fewer problems to treat anything that has to be floated like:

* parent
** children
-------------------
* headWrap
** headLeft
** headRight

hope i'm not cofusing you.[/QUOTE]

not exactly sure I get what you're saying. Can you give example code?