Jump to content

Quick question about size of website height and width


Recommended Posts

Any idea what I should set the height and width as for my main relative wrapper, which my absolute position elements fit inside?

Basically the width and height of my site?

I'll obviously use media queries to change what it would look like as the size is smaller, but I'm just unsure what to make the default size as so i can use that as a base.

I've read 1024px by 768px is pretty standard but when i add it to my wrapper so it looks like this;


position: relative;
margin-left: auto;
margin-right: auto;
height: 768px;
width: 1024px;
It ends up looking tiny on my screen, i'll show an attachment so you can see what I mean,
You can see how little it looks on my screen compared to the green background, which was just added to the body.
Any tips?


Link to comment
Share on other sites

These days we don't use pixel width and height for layout, we make flexible pages that adapt to fit any screen they're being displayed on. This is done using percentage sizes, ems for fonts and media queries to rearrange things.

Link to comment
Share on other sites

If you are using large margins, you are doing it wrong!


Sort out OUTER parent widths of elements so they will fit side by side with total width equal to 100%, style the CHILD elements away from parent edges use padding or margin on child elements only, so parent are not affected by any of these, because if you add to the parent elements there total 100% width will have additional margin and padding widths included, causing the parent elements to stack because they no longer fit within the total width available to them.

Link to comment
Share on other sites

<!DOCTYPE html>




body {

background-color: lightblue;



.parent {float: left; }


/* Below refer to same parent element so leave parent as is */

/*Total widths will be 100%*/

.one {background-color: navy;width: 25%;}

.two {background-color: red;width: 60%;}

.three {background-color: orange; width: 15%;}


/* style only these child elements and child elements within it */

.inner {margin: 20px; background-color: white;min-height: 300px;}




<div class="parent one">

<div class="inner">Inner Child element</div>


<div class="parent two">

<div class="inner">Inner Child element</div>


<div class="parent three">

<div class="inner">Inner Child element</div>




Link to comment
Share on other sites

But! they need to affect all other elements, so they can adjust content accordingly , which adjusts container heights, which move other container elements below them down, so they don't start overlapping each other. IF you think I'm teaching wrongly by showing you how to that, using position absolute, you a ABSOLUTELY wrong!

Link to comment
Share on other sites

No, that leads to the same problem.


There's something called page flow, it's when all the elements are aware of what is around them and adjust themselves to fit together properly. You should never break the page flow.


You have to learn to do layouts properly. Dsonesuk provided you an example of how to do that type of layout.

Link to comment
Share on other sites

I guess I'll never touch positioning then :P


I finally understand, thank you so much! :D

I now have 3 coloums with my elements in! :D

What if for example I wanted a Nav bar to go across the entire length of the top of the screen?

How would I make that bar go across ALL the columns?

Thanks again!

Edited by luke214
Link to comment
Share on other sites

Awesome thanks for that!

Would I also be able to make a separate container with it's width just set as 100% for the nav?

Would that also make it span across all columns?

Just curiosity :P


Also, any reason when changing the margin top on my video it kind of pulls down the background with it?

It has no padding so it should be tight to the video :o

I'll attach a link to the screen shot :)

Hopefully this is the last problem I'll have for a while haha.



Edited by luke214
Link to comment
Share on other sites

It's never necessary to explicitly set the width of an element to 100% because block elements always fill the full width of their container by default.


Your issue with the margin is caused by collapsing margins: The vertical margin of an element combines with the margins of its ancestors as long as they don't have a border or padding. A quick solution is to set the overflow property of the parent element to "none". A solution without side-effects is a bit more complicated, you would create the :before pseudo-element from the parent container to cause a separation between the element and the edge of its parent.

something::before { /* "something" should be the selector of the element's parent */
  content: "";
  display: block;
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...