luke214

Found it! #Geodevideo{ background: white; width: 90%; padding: 8px; margin-top: 70%; }

Ahh ok. So because my src="Geode.mp4" is between the video tags, that means I have to put the overflow on the video right?

So if video is a child of the div, who exactly is the div a child of

Well it is my video isn't it? I changed the margin on the element that's a video

Why exactly is video a child of div by the way?

In my css the margin is on the div element

Oh ok! Who exactly would be the parent then haha. Geode video is inside wrappertwo which is inside mainwrapper

I used top margin on the video element, and it's parent element is wrappertwo, which is where the overflow is That's right isn't it?

Ahh I remember reading about overflow, completely forgot about that! So here's my html in which the video sits in; <div id="wrappertwo"> <div id="example"> <h1><ins>Examples of Geodes</ins></h1> <p>Below is a short video showing different types of Geodes.<br> Take a look to see the different types you can find, or hopefully buy!</p> </div> <div id="Geodevideo"> <video controls="controls" id="Geodevideo" poster= "picofrock.png"><source src="Geodes.mp4" type="video/mp4"> Your browser does not support the video tag.</video> </div> </div> I've added the overflow: hidden; to my css, but it unfortunately didn't chance the background from pulling :/ Here's the change to my css; #wrappertwo{ overflow: hidden; width: 30%; } It looks exactly the same as what it did before unfortunately :<

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

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!

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 :/

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?

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?

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?

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.

This might sound really stupid, but can I positions stuff JUST by using the margins? Without having any position, float or display tags?

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 :/

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?

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?

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?

Ahh I've read about that! Still that wouldn't solve my problem of actually being able to place elements in the correct positions without everything messing up :/ I even changed all of the elements to inline-block as that's supposed to be like a block element but you can place stuff next to it, and it still wont let me move the wrapper nav! It seems like for me absolute positioning was the only thing that actually worked! I have read though that a lot of people position elements as absolute WITHIN a relative parent, would it be ok for me to do that? And just use media queries to change the height and width of the elements depending on screen size?

Ok, so I tried floating it and it didn't make any difference, and there's plenty of room on the screen for everything to fit :/ Seems like it only made it worse Here's a link to the screenshot http://pasteboard.co/jkM2QLRgG.jpg

It looks like everything is treating the nav as it's parent... I think. When i try and change the margin of the nav element, everything else changes margin instead... Any help?

a:visited { color: green; } a:hover { color: red; } * { font-family: "Arial Black"; } body { background: #526F35; } html, body { height:100%; } #wrapper{ display: block; background: white; box-shadow: 0 0 50px 10px black; text-align: center; border: 5px solid black; width: 50%;; padding: 8px; margin-top: 1%; margin-left: 1%; font-size: 17px; } #wrappertwo{ display: block; background: white; box-shadow: 0 0 50px 10px black; text-align: center; border: 5px solid black; width: 23%; padding: 8px; margin-top: -45%; margin-left: 57.4%; font-size: 22px; } #Geodevideo{ display: block; box-shadow: 0 0 50px 10px black; border: 5px solid black; width: 22%; margin-left: 58.5%; margin-top: 7%; } header{ font-size: 22px; } #wrappernav{ display: block; font-size: 30px; text-align: center; background: #00CC33; border: 3px solid black; border-right: none; margin-left: 88.1%; margin-top: 90%; padding: 20px; font-weight: bold; width: 10%; } #textnav:hover { color: white; -moz-transform: scale(1.1); -webkit-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); transition: .3s ease-in; } #textnav1:hover { color: white; -moz-transform: scale(1.1); -webkit-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); transition: .3s ease-in; } #textnav2:hover { color: white; -moz-transform: scale(1.1); -webkit-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); transition: .3s ease-in; } #textnav3:hover { color: white; -moz-transform: scale(1.1); -webkit-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); transition: .3s ease-in; }