[Christer]

Hi guys,
i got this problem with my site that if i resize the browser window, it resizes the #container div aswell.
i tried searching for any solution, and seems like most of that particular problem is for IE browser,
i am currently using FireFox.
And when trying it in safari, it seems like its height is set to 100% (its not) ..

Its working when i set a fixed height on the div – but im trying to make it fit for the content instead as i want it to dynamically wrap around its content. .

This is my first time making a website with Div’s and CSS – So its probably me thats doing something wrong here.

EDIT: – Moved sourcecode to jsFiddle

[chrisburton]

@Christer Why do yo have an absolute positioned page wrap?

[Christer]

@ChristopherBurton – as i said in the post, its my first css and div layed out webpage –
Im not 100% sure why i put absolute on it, still working out some understanding of some of the things, as far as i know its basicly like this:
Relative: When you want the child div’s position to be set relative to this div.
Absolute: When you want to absolute position something based on parents(witch is the “relative” div) position.
– could be some debug code – changed it now.
And i guess i managed to figure out the auto resizing problem.

@cnwtx – As you didnt understand the problem, ill try to explain it incase anybody else get the same –

The DIV with the id of “container” got resized if you resized your browser window.
But the content inside would stay put – witch resulted in (depending on the overflow settings) that the content would have been hidden aswell.

The fix:
Inside divs should not have a height. atleast not in % value.

New Problem:
Now there is a big white space at the end of the div –
I do know why, its because i set a height for the #container div –
but what i dont know is how to make the #container div wrap around the inner DIV’s so that i dont need to specify i height.
if i remove it, then it just disappears completly ( the div itself – see images below)

[FIXED] And also, i dont know if you see it in the fiddle. but atleast on the screenshots. theres a little bird saying “follow me” on the top right of the webpage.
If you take a look on the sourcecode (bottom of HTML and #twitter-follow in CSS) then i specified that it should have been on the bottom right of the #right div.

– The “fix” for this was, again, to set a height of the div. but again, thats something i want to avoid, as i want the #container div to wrap around everything.

it just looks like the divs are collapsing like theres nothing in it.

NewProblem( With a set min-heigth) : http://tinypic.com/r/wbw6fc/7
NewProblem(Without setting the height) : http://tinypic.com/r/f2q34y/7

New JsFidle: http://jsfiddle.net/ubrLm/4/

[chrisburton]

@Christer What is your html and css resource?

[Christer]

my resource? like the webpages i get the information from?
Well, i am googling every problem i encounter and every question i have so it varys.
its just things i have picked up from videos on this site, aswell as the Lynda training courses.
i do tend to end up on w3schools tho when googling.

[chrisburton]

If you search around, W3Schools will show its true value. I would take some time to watch this series: https://css-tricks.com/video-screencasts/1-converting-a-photoshop-mockup-part-1-of-3

[Christer]

@ChristopherBurton if you got some nice resource site(s) – i apreciate all the help i can get! :)

[chrisburton]

This site will give you a lot of resources and how to accomplish them. Watch the screencasts (videos), they help a great deal. I would also recommend Think Vitamin Membership. It is a great step by step learning program. They have a number of different topics to choose from.

[Christer]

Thanks alot, ill dig into it :)

But as far as my problem for this website goes – do you see any solution?
Its basicly pretty small, so i dont mind starting from scratch if that is what it takes and make a better foundation of it. but its just that if it is some tricky thing to wrap my head around that i can stumble upon again, then it would have been nice to know what the problem is so i dont need to wreck every web-design when it happends. :p

@cnwtx – did you find out anything?

[chrisburton]

Fixed the opacity issue so it doesn’t make everything transparent, just the white background. http://jsfiddle.net/ubrLm/7

[Christer]

Wow guys, that looks great.
i can also see that you have removed the position values for most of the css code.
seems like i have got it all wrong with that.

Could you guys give me an quick explaination on the “position: —” ?
or point me to somewhere i can find more about it?

[Christer]

in the meentime, im off to bed – GF is waking up soon enough for school, and i better be in the bed by her side when she does or ill get alot of questions asked :P
dont know about you guys, but its like 5:30 AM here in Norway.
So for now, thanks alot, really apreciate it. – ill check back when i wake up.

[Christer]

Thanks alot to both of you =D You guys have been most helpfull!
To bad there isnt any +rep on the page.

[Author]

Posts