Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS

resizes on window resize,

  • This topic is empty.
Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #34877
    Christer
    Member

    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

    #89482
    chrisburton
    Participant

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

    #89495
    Christer
    Member

    @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/

    #89496
    chrisburton
    Participant

    @Christer What is your html and css resource?

    #89498
    Christer
    Member

    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.

    #89499
    chrisburton
    Participant

    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

    #89500
    Christer
    Member

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

    #89501
    chrisburton
    Participant

    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.

    #89502
    Christer
    Member

    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?

    #89504
    chrisburton
    Participant

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

    #89505
    Christer
    Member

    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?

    #89506
    Christer
    Member

    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.

    #89584
    Christer
    Member

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

Viewing 13 posts - 1 through 13 (of 13 total)
  • The forum ‘CSS’ is closed to new topics and replies.