CSS help!

[ExoticFish]

i'm finally working on my site again and i'm trying to figure out how to get my page to expand to fit it's contents.

http://s94253843.onlinehome.us/

i've been messing around for quite a while now but nothing i do seems to matter!

[tomatobush]

What design program do you use? (Dreamweaver, GoLive)?

[ExoticFish]

Jedit, i don't use the WYSIWYG editors.

[Rower_CPU]

Your problem is here:
#container {
position: relative;
background-color: #d4e2f3;
border: 1px solid #000;
width: 750px;
/* min-height: 550px; */
margin: 10px auto;
}

Remove the bolded line and you're set.

[ExoticFish]

Rower_CPU,

unfortunately for me i meant how do i get the page to fit vertically not horizontally. i hope it's not just on my setup but the news part just goes right off the bottom without extending the bottom with it.

plus about the css, when i started out i was looking through a lot of your and mnkeybsness's stuff to see how you organized stuff.

hope you don't mind my borrowing of some of your naming conventions! :)

[mnkeybsness]

you may also want/need to mess with your margins just to keep things clean and not end up with the content running to the edge of the window.

[ExoticFish]

oh there's a lot of touching up to do yet, but first it's be nice if the content wasn't spilling off the bottom! ;)

[Rower_CPU]

Rower_CPU,

unfortunately for me i meant how do i get the page to fit vertically not horizontally. i hope it's not just on my setup but the news part just goes right off the bottom without extending the bottom with it.

plus about the css, when i started out i was looking through a lot of your and mnkeybsness's stuff to see how you organized stuff.

hope you don't mind my borrowing of some of your naming conventions! :)

Ah, that makes more sense - I'd start with the "position: relative" in there that doesn't seem to be doing much. Positioning takes sections out of the document flow, which can lead to the problem you're seeing.

And don't worry about borrowing code/naming conventions - it's how we all learn. :)

[ExoticFish]

i took out the position tags for both the content and the footer and they stoped going off the page but without a postion tag my "left" and "top" tags don't work. how do i put them back where i want them?

ps. thanks so much for the help!

[ExoticFish]

ah ha! margins! man that looks a heck of a lot better already! thanks guys!

[Rower_CPU]

Glad to help. :)

[winwintoo]

Hey, Exoticfish, I'm really glad you had this problem. ;) ;)

I've had the same problem and couldn't find an answer so abandoned the design. Now I can try again,

m

[ExoticFish]

alright i've been working on this more and for the past 5 hours i've been trying to get this thing to work. Rower_CPU, i'm trying to do like what you have where you have two different sections right next to each other (you menu and entries sections) and it's driving me insane. please help!

[Rower_CPU]

I'm floating both sections to the left and making sure the widths of both sections plus any padding and margins don't exceed the width of the container. Look at #container, #menu and #entries in my CSS: http://www.organicallydigital.com/od.css

You could also float the menu left and then add a left margin to the body content to allow it to come up along the side - remember to set a width on the menu, for instance (menu width 150px, left margin on content 170px).

[ExoticFish]

believe me i've been studying your CSS for about 5 hours while i've been pulling my hair out. if i leave float:left off then #menu and #content-news both stay inside #content but as soon as i add float:left they no longer stay inside of #content. i can't go bald at 22, CSS just ain't worth it! ;) :D

[Rower_CPU]

Whenever I run into a problem where things aren't going the way I expect, I start commenting out extraneous stuff to see if there's some of weird interaction of styles going on.

So, comment out everything but those three styles and go from there. It's most likely an arithmetic things - I'd check the container padding and mess with widths on the menu and content divs.

[Benjamin]

you could just be cheap and do a negative margin for the content-news.

like margin-top: -200px;

idk i personally can't read your css, could just be cause i have had a long day in class

[ExoticFish]

the css is here:

http://s94253843.onlinehome.us/css/site.css

i tried taking everything out of #content, #sidemenu, and #content-news and #menu and #content-news were inside #content. then the ONLY thing i added was float:left to #menu and then it was outside #content again... i'm thinking about trying a different layout cause this is just insanity at it's finest.

[idkew]

i would seriously look into getting "dhtml and css" a visual quickstart guide. by jason c. teague.

it should help you. i bought it, and while i have yet to redesign my sight, it will definitely help me a ton.




btw- maybe instead of absolute size, try percentages... i haven't looked closely at your code, but the snip rower put up makes me think %.

[Rower_CPU]

the css is here:

http://s94253843.onlinehome.us/css/site.css

i tried taking everything out of #content, #sidemenu, and #content-news and #menu and #content-news were inside #content. then the ONLY thing i added was float:left to #menu and then it was outside #content again... i'm thinking about trying a different layout cause this is just insanity at it's finest.

I tweaked a couple things and it's working for me.

http://organicallydigital.com/dev/exoticfish/index2.html

One thing you may not have noticed in my code is the "spacer" div at the bottom of the floated content that makes sure the footer doesn't come up and cover the main content. I added that to your CSS and page.

[ExoticFish]

man oh man that spacer was the key. Rower you're the man. i can start gluing my hair back on now, thank you! now i'll starting reading about HOW exactly that makes it work.

idkew,

i think i will go to Borders this weekend and see what kind of literature they have.

[Rower_CPU]

No prob', EF. Floats can take a little getting used to.