TeamPhotoshop
Reviews, updates and in depth guides to your favourite mobile games - AppGamer.com
Forum Home Latest Posts Search Help Subscribe

Some CSS box help.

Page: 1 Reply
Oct 12th 2005#170827 Report
Member since: May 21st 2002
Posts: 537
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?
Reply with Quote Reply
Oct 12th 2005#170830 Report
Member since: May 21st 2002
Posts: 537
ahh damnit. I think I found the problem. Always in the darn code.
Reply with Quote Reply
Oct 13th 2005#170836 Report
Member since: May 21st 2002
Posts: 537
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.
Reply with Quote Reply
Oct 13th 2005#170837 Report
Member since: Mar 24th 2002
Posts: 3114
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.
Reply with Quote Reply
Oct 13th 2005#170838 Report
Member since: Apr 24th 2003
Posts: 1977
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.
Reply with Quote Reply
Oct 13th 2005#170842 Report
Member since: Oct 8th 2005
Posts: 32
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.
Reply with Quote Reply
Oct 15th 2005#170882 Report
Member since: May 21st 2002
Posts: 537
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">


Untitled Document











*

*




*



[/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
Reply with Quote Reply
Oct 16th 2005#170901 Report
Member since: May 21st 2002
Posts: 537
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.
Reply with Quote Reply
Oct 19th 2005#170958 Report
Member since: Oct 8th 2005
Posts: 32
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.
Reply with Quote Reply
Nov 5th 2005#171256 Report
Member since: May 21st 2002
Posts: 537
[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?
Reply with Quote Reply
Page: 1 Back to top
Please login or register above to post in this forum