luke214 Posted October 25, 2016 Share Posted October 25, 2016 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? Link to comment Share on other sites More sharing options...
Ingolme Posted October 25, 2016 Share Posted October 25, 2016 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 More sharing options...
luke214 Posted October 26, 2016 Author Share Posted October 26, 2016 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? Link to comment Share on other sites More sharing options...
luke214 Posted October 26, 2016 Author Share Posted October 26, 2016 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? Link to comment Share on other sites More sharing options...
dsonesuk Posted October 26, 2016 Share Posted October 26, 2016 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. Link to comment Share on other sites More sharing options...
luke214 Posted October 26, 2016 Author Share Posted October 26, 2016 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 :/ Link to comment Share on other sites More sharing options...
luke214 Posted October 26, 2016 Author Share Posted October 26, 2016 This might sound really stupid, but can I positions stuff JUST by using the margins? Without having any position, float or display tags? Link to comment Share on other sites More sharing options...
dsonesuk Posted October 26, 2016 Share Posted October 26, 2016 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 More sharing options...
dsonesuk Posted October 26, 2016 Share Posted October 26, 2016 <!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> Link to comment Share on other sites More sharing options...
luke214 Posted October 26, 2016 Author Share Posted October 26, 2016 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. Link to comment Share on other sites More sharing options...
dsonesuk Posted October 26, 2016 Share Posted October 26, 2016 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 More sharing options...
luke214 Posted October 26, 2016 Author Share Posted October 26, 2016 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? Link to comment Share on other sites More sharing options...
luke214 Posted October 26, 2016 Author Share Posted October 26, 2016 (edited) 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 October 26, 2016 by luke214 Link to comment Share on other sites More sharing options...
Ingolme Posted October 26, 2016 Share Posted October 26, 2016 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 More sharing options...
luke214 Posted October 26, 2016 Author Share Posted October 26, 2016 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? Link to comment Share on other sites More sharing options...
dsonesuk Posted October 26, 2016 Share Posted October 26, 2016 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! Link to comment Share on other sites More sharing options...
luke214 Posted October 26, 2016 Author Share Posted October 26, 2016 (edited) 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 October 26, 2016 by luke214 Link to comment Share on other sites More sharing options...
dsonesuk Posted October 26, 2016 Share Posted October 26, 2016 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. Link to comment Share on other sites More sharing options...
luke214 Posted October 26, 2016 Author Share Posted October 26, 2016 (edited) I guess I'll never touch positioning then I DID YOUR CODE AND IT WORKED! I finally understand, thank you so much! I now have 3 coloums with my elements in! 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 October 26, 2016 by luke214 Link to comment Share on other sites More sharing options...
dsonesuk Posted October 26, 2016 Share Posted October 26, 2016 Place nav bar at top above the three columns, where else? Link to comment Share on other sites More sharing options...
Ingolme Posted October 26, 2016 Share Posted October 26, 2016 Something like this: <nav>Navigation (no width set)</nav> <div> <div>percentage width</div> <div>percentage width</div> <div>percentage width</div> </div> Link to comment Share on other sites More sharing options...
luke214 Posted October 26, 2016 Author Share Posted October 26, 2016 (edited) 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 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 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 October 26, 2016 by luke214 Link to comment Share on other sites More sharing options...
Ingolme Posted October 26, 2016 Share Posted October 26, 2016 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 More sharing options...
dsonesuk Posted October 26, 2016 Share Posted October 26, 2016 overflow: hidden; not none. Link to comment Share on other sites More sharing options...
dsonesuk Posted October 26, 2016 Share Posted October 26, 2016 Did you even see the last post here? http://w3schools.invisionzone.com/index.php?showtopic=56031&page=1entry308523 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now