Width and using percentage

qkrghkahr

New Member
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%; }
 

ronaldroe

Super Moderator
Staff member
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...
 
Top