Width and using percentage

Discussion in 'Web Design' started by qkrghkahr, Aug 15, 2012.

to remove all ads.
  1. qkrghkahr

    qkrghkahr New Member

    Messages:
    11
    I'm starting to code a site and I basically want it to look the same no matter how big the viewer's screen size is. I'm trying to make it auto adjust by using percentage for heights/widths instead of specifying how many px it is.

    I read that the % of the child element is that much of the parent's.



    the #Header is 78.36% of the html's 1366px
    if i set the #Logo to 23.88%, will it be that much of the 1366px or the header size?

    *The logo div is inside the header div*
    <div id= "Header">
    <div id="Logo">
    </div>
    </div>



    -----------------------------------------------------------------
    html {background: url(backgrounds/websitebg.jpg); width: 1366px; }

    #Header { height: 78px; width: 73.86%; margin-left: 15%; margin-right: 15%; border: dashed, 2px, #ffffff;}

    #Logo { height: 78px; width: 23.88%; }


    #Menu {width: 50%; }
     
  2. ronaldroe

    ronaldroe Super Moderator Staff Member

    Messages:
    1,223
    Since it's a child, it'll be 23.88% of the width of the header. Also, if you set the html's width to 1366px, I'm pretty sure the header's % width will be calculated against that, not the viewport, so the site won't resize to fit the window. Unless that's what you were going for...
     

Share This Page