Jump to content
luke214

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;

 

#mainwrapper{
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?

post-202609-0-76994700-1477431158_thumb.jpg

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

Ahh ok.

So if I set the height and width to 100% in my relative wrapper, would this stop the absolute elements from moving when resized and also be more responsive?

Share this post


Link to post
Share on other sites

But surely that 100% would have to be relative to something else?

Am I right in thinking you can't have something set as a percentage unless it's relative to an actual specific value?

Share this post


Link to post
Share on other sites

100% height won't take effect unless a parent element uses a fixed height, but you don't want to use a parent with fixed height, because as the device/browser width becomes smaller, you need it to adjust to adjusting content.

Share this post


Link to post
Share on other sites

Ahh ok I was thinking that as well.

So how exactly can I position stuff?

Every time I use the display: tags it just doesn't work. And I try to float elements but they end up in positions I don't even want them no matter how much I change the margins :/

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites


<!DOCTYPE html>

<html>

<head>

<style>

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;}

</style>

</head>

<body>

<div class="parent one">

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

</div>

<div class="parent two">

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

</div>

<div class="parent three">

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

</div>

</body>

</html>

Share this post


Link to post
Share on other sites

Sorry I'm confused, im not talking about choosing the width of an object.

I'm just asking how to easily position elements on a page without them all affecting each other.

Share this post


Link to post
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!

Share this post


Link to post
Share on other sites

Oh I think I know what you mean!

Could I just use my body as my parent container?

That way everything inside wouldn't leave the page?

And to have a parent container wouldn't it have to have a specific width in pixels?

Share this post


Link to post
Share on other sites

And I've come to the conclusion I shouldn't use absolute positioning unless I have to ?

Could I just use relative positioning on all my elements and adjust their positioning that way?

Edited by luke214

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

If I'm reading the code right, that makes 3 columns which widths = 100% of the page, right?

So I can position my elements IN those 3 columns any way I want, e.g relative of absolute and there wouldn't be any problems regarding the flow of the page?

Share this post


Link to post
Share on other sites

Any mentioning of using relative or absolute, when you have been told several times NOT! to use these, will result in me and other doing the same and ignoring you!

Share this post


Link to post
Share on other sites

No need to be so rude.

I was just asking a question regarding positioning and the flow of the page..

Guess it's 100% forbidden to ever use positioning then, well judging by how angry you've gotten about it :/

Edited by luke214

Share this post


Link to post
Share on other sites

It gets frustrating, when you tell someone not to use positioning for layout, SEVERAL TIMES, I might add, give reasons, and they STILL insist on bringing it up, YOU are the rude one here, for not heeding our advice and by ignoring us over and over again.

Share this post


Link to post
Share on other sites

I guess I'll never touch positioning then :P

I DID YOUR CODE AND IT WORKED!

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

Share this post


Link to post
Share on other sites

Something like this:

<nav>Navigation (no width set)</nav>
<div>
  <div>percentage width</div>
  <div>percentage width</div>
  <div>percentage width</div>
</div>

Share this post


Link to post
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.

 

http://pasteboard.co/jIDfknzKN.jpg

Edited by luke214

Share this post


Link to post
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;
}

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...