Grow your CSS skills. Land your dream job.

Need help with div movement and resizing a browser

  • # September 26, 2012 at 1:27 pm

    I am struggling with getting divs to resize along with a browser. If you manually resize your browser with your mouse, I’d like the main logo div to resize along with it. I know it’s kind of a petty problem since most people will be viewing the page full screen. The #lg div is the one I’d like to gradually size down with the browser window size. The first time I set the width and height to auto it worked, then I was messing around with some other div options and all of a sudden it stopped working. I’ve tried to re-write the code several times with no luck. I’d certainly appreciate some advice on how to tackle this.

    Here is the HTML:

    < !DOCTYPE html>




    And the CSS:

    #mcon,body{width:100%;height:100%;overflow:hidden;font-family:’helvetica’;color:white;}
    #navi{position:absolute;bottom:0px;font-size:12px;left:0px;right:0px;}
    #navi div{height:66px;background-color:#000;line-height:12px;padding-top:1px;padding-bottom:1px;}
    #navi ul{list-style-type:none;}
    .nv{text-decoration:none;color:#9e005d;border-left:solid #9e005d 1px ;padding:12px;}
    #navi a:hover {color:#C7C3BB;}
    #lg{position:absolute;top:180px;left:140px;width:auto;height:auto;}

    # September 26, 2012 at 1:29 pm

    sorry guys, how do you post code successfully? I haven’t used this forum before..

    # September 26, 2012 at 1:39 pm

    post in codepen.io and save it and copy the url and post

    # September 26, 2012 at 3:16 pm

    I’ve updated your post for you. Just got to make sure you tab four spaces. [Read more on Markdown](http://daringfireball.net/projects/markdown/syntax “Read more on Markdown”)

    # September 26, 2012 at 5:26 pm

    Unfortunately, we don’t have access to your images so we can’t tell how this is supposed to look.

    Do you have a mock-up/image of what your design is?

    # September 26, 2012 at 5:28 pm

    Here’s another thing.

    Unless there is no other way, try to avoid using absolute positioning. There are nearly always more flexible and yet robust methods of putting elements into the place you want them.

    # September 26, 2012 at 7:56 pm

    Hey guys,

    I took a couple screen shots to describe what I’m trying to accomplish. Is there a way I can embed those in this thread? Sorry for all the questions, I’m new here. And thanks up there Doc for updating my code posts.

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".