My div(s) don't move when using margin

**kvnwpts** · Mar 7, 2012 13:45

Hello guys!

I'm having a problem here that some of my div tags and pictures in dreamweaver don't show the same way in a browser as they do in dreamweaver.

I have a wrapper, and inside that i have another div called "insidewrapper" where I have a picture. As you can see in the CSS the #insidewrapper has a margin of 25px at top. When I put the pic in the #insidewrapper it looks as it should in the preview in dreamweaver but as soon as I press live view or test it in my browser the pic is like ignoring the margin but in the HTML it's still in insidewrapper.

HTML:

Code:

<!DOCTYPE html>

<head>

<title>Untitled Document</title>
<link href="../css/styles.css" rel="stylesheet" type="text/css">


</head>

<body>



<div id="logobuttons">

<div id="buttons">


</div>

<div id="logobild">

<img id="logo" src="../images/Logo.png" width="280" height="56">

</div>
 </div>




<div id="wrapper">

<div id="insidewrapper"><img src="../images/PIC.png" width="880" height="387"></div>


</div>




</body>
</html>

This is CSS:

Code:

body {background-image:url(../images/Banner.png); background-color:#000000; background-repeat:no-repeat; background-position:center; background-position: 50% -12% }


#wrapper { height:500px; width:950px; margin-left:auto; margin-right:auto; height: 2000px; background-image:url(../images/Border.png) }


#logobuttons {height:100px; width:950px; margin-left:auto; margin-right:auto;}

#logo {margin-top: 30px; margin-left:25px }

#buttons {float:right; width:640px; height:100px; }
#buttons ul li {list-style-type:none; display:inline; }

#logobild { float:left; width:310px; height:100px; }

#insidewrapper {width:900px; height:500px; margin-top:25px;
margin-left:auto; margin-right:auto;}

p {color:#FFFFFF}

h1 {color:#FFFFFF; font-family:Verdana, Geneva, sans-serif; font-size:16px;}

#banner {margin-left:auto; margin-right:auto }

If someone could help me I would appriciate it very much, and if I havent explained it well enough, please tell me what I should explain better.

Yours Kevin

**Stomme poes** · Mar 7, 2012 13:56

Hi,

Originally Posted by Kevin

I'm having a problem here that some of my div tags and pictures in dreamweaver don't show the same way in a browser as they do in dreamweaver.

Don't worry. Even when dreambeaver is right, it's wrong. Forget how DW is showing it to you, and focus only on the browser. After all, the browser is the only one anyone else will ever see your site in.

Second: I know in this case DW is wrong, because it sounds like your browser is doing the margin-collapse thing... whoops no.

...Okay I had a huge rant on how much margin collapse sucks donkey balls and is one of the worst ideas ever and whoever came up with it is batsh*t insane... but actually here it's because of your floats, not margin collapse. The top margin of a box underneath some floats can kinda slide right up underneath floats. You could instead put a bottom margin of 25px on the element above the wrapper/inner thingie. Some further reading just for interest, about bottom margins, floats, and IE being the drooling glue-eater we all know and love written by our very own Paul O'Brien.

#logobild is floated inside #logobuttons, so a bottom margin on logobuttons might not work if logobild is popping out. Which floats do if you don't enclose them.

You could try
#wrapper {
clear: both;
}

I... don't like your markup. What are you making? Image gallery? I'm saying I think you could have simpler CSS with simpler markup, depending on what you're building. Or, the more markup you have, the harder everything gets whether you need it to or not. You have a lot of boxes.

Also, when debugging things involving floats, padding, margins... while developing, give every box an ugly background colour. Not a border or anything that takes up space, just stuff like background-color: #f00, background-color: #ff0, background-colour: #0f0, background-color: #00f... etc. And... setting absolute heights on boxes is either clever evil CSS genius or you hanging yourself. Depends on what you're going for.

I also want to tell you to stop using DW, but I guess that depends on what you're doing... making one site? Fine. Learning to code? Ditch it. Get Notepad++ or Geanie or something that doesn't try any coding for you. Use a set of open browsers as your Design View. They'll be more honest.

**kvnwpts** · Mar 7, 2012 14:00

I'm pretty sure my markup of everything is wrong since I'm new to this, well. I can ask you at start if you know any good guide of how the setup of the divs right.

Its just my start page (index) and the pic were going to be a "banner".

EDIT: sorry for not quoting you.

**Stomme poes** · Mar 7, 2012 14:28

Well, do you want better markup or do you just want this page to work? Either is fine; there are lots of popular sites out there with some pretty bad code. Only web developers look at website underwear.

If you just want this site to work for now you can try the clear: both on #wrapper and see if it does what you want.

Though a rough sketch of what you're building can also help.

Originally Posted by kevin

I can ask you at start if you know any good guide of how the setup of the divs right.

There are lots of resources but my problem was, I either followed their examples or flailed about trying to build what *I* wanted. I couldn't learn a bit, then apply it to a pet project. That kinda sucked until I knew enough to really build my own things.

But you may not have that problem. HTMLdog is a decent resource. I learned to write my first HTML and CSS with Ian Lloyd's book Build Your Own Web Site... that is a beginner's book and later on you'll probably changing your mind on what good code is. There's only so much they can stuff into a book. How-to's are mostly good for little things, but basic good HTML and setting up your basic boxes... I learned most of that base from two books, then the rest was the usual: forums, tuts, building things. You're already building things so you've seen some behaviour and just don't know all the why's yet. But as I mentioned earlier, give all your boxes an ugly background colour NOW and this will totally show you more things you don't see now.

Originally Posted by kevin

EDIT: sorry for not quoting you.

You don't have to, and in fact quoting everything I said (some forums do that) I think is kinda redundant kinda redundant redundant. :)

**kvnwpts** · Mar 7, 2012 14:42

Clear:both didn't work.

But i guess I'll try to put down some more time in reading the boring stuff that can be really useful instead of wasting time trying to figure these kind of stuff out wich maybe wouldnt happen If would've been a bit better since I'm still beginner. Either way I'll try figure this out myself, and if I don't I'll post a pic here.

I'll try read some of the guids on the site you recomended, thanks.

**Stomme poes** · Mar 7, 2012 15:51

Meh, I'll copy your code and see what will push teh image down. I'll post results.

**Stomme poes** · Mar 7, 2012 15:59

I'm a retard, I think.

If you wanted wrapper space to be above the image you could have top padding on the wrapper instead of top margin on the child.

http://stommepoes.nl/keventemp/kevintest.html
I've made #wrapper blue, and I don't have your pics to the image should be in the place of your PIC.png

**kvnwpts** · Mar 7, 2012 18:28

That's how it should look like, I'll try to do it when I come home and hope it works, and thanks for taking your time writing to me, btw. I don't have any option to choose my own (browse my own) avatar pic?

**ralph.m** · Mar 7, 2012 19:10

Originally Posted by kvnwpts

I don't have any option to choose my own (browse my own) avatar pic?

You should be able to upload your own avatar.

**kvnwpts** · Mar 7, 2012 19:29

I'm not sure, do I have to post 25 posts before I can upload my own?

Originally Posted by ralph.m

You should be able to upload your own avatar.

**RyanReese** · Mar 7, 2012 21:33

Yes, you must have 25 posts.

**kvnwpts** · Mar 8, 2012 05:01

Yeah, I'´ve seen people changing profile picture also, but I don't see any options to that..

Originally Posted by RyanReese

Yes, you must have 25 posts.

**Stomme poes** · Mar 8, 2012 05:13

Originally Posted by kevin

Yeah, I'´ve seen people changing profile picture also, but I don't see any options to that..

I think if the system requires 25 posts, more options appear when you reach that number. You did have that Bill Gates pic earlier :) I just went with no avatar until I could load my own. I'm bull-headed that way

**RyanReese** · Mar 8, 2012 07:50

Originally Posted by kvnwpts

Yeah, I'´ve seen people changing profile picture also, but I don't see any options to that..

Get to 25 posts (you only need 14 more, but don't spam). Then try again.

Having an avatar isn't amazing anyway.

**kvnwpts** · Mar 8, 2012 16:54

#div1 is the outer
#div2 is the iner

Basically what I did was I had a #div1 and #div2. And when i used margin top on #div2 so the div went like 20px down it didnt make any change in the browser. So what I did I used padding top 20px on #div1. Is that a good soloution because it works as it should or is there any other primary mode to do it?

I'm excuse me for my bad english.

**ralph.m** · Mar 8, 2012 17:14

What you are experiencing here is margin collapse. Your solution is fine, but if you would rather use margin, you can do a few things, such as put a faint 1px border on the top of #div one, or even a tiny bit of padding on #div 1 (like 1px).

**dresden_phoenix** · Mar 8, 2012 18:34

You could also try giving overflow:hidden to #div1 ,the outer. Hope that helps.

**kvnwpts** · Mar 8, 2012 18:53

That worked too, could you explain why that happens if you can?

I hate doing things I don't know since I wanna know as much as possible.

Thanks

Originally Posted by dresden_phoenix

You could also try giving overflow:hidden to #div1 ,the outer. Hope that helps.

**ralph.m** · Mar 8, 2012 19:26

Originally Posted by dresden_phoenix

You could also try giving overflow:hidden to #div1 ,the outer.

Ah yes, I forgot that one.

I don't understand the ins and outs, but overflow:hidden prevents content from hanging out of a container (mainly positioned content, I believe). So the container is forced to wrap itself around any non-positioned content that is hanging out and pull it in. (I'm sure there's a more accurate answer, though.

)

**RyanReese** · Mar 8, 2012 19:40

When you use overflow:hidden, a new block formatting context is created. A few properties do it, but this one will basically do nothing else to affect the rest of the element, it's safe

. For example, display (a few values in there), floating, and position (absolute/fixed). As you see, all those will do a good bit of "damage"

It basically will ensure that the top margin that is set, is contained within the element, when you set overflow:hidden; on it.

Overflow is a wonderful property

.

**kvnwpts** · Mar 8, 2012 20:00

Nice, would it be a good idea to "learn" all of these CSS properties? http://www.htmldog.com/reference/cssproperties/

Originally Posted by RyanReese

When you use overflow:hidden, a new block formatting context is created. A few properties do it, but this one will basically do nothing else to affect the rest of the element, it's safe

. For example, display (a few values in there), floating, and position (absolute/fixed). As you see, all those will do a good bit of "damage"

It basically will ensure that the top margin that is set, is contained within the element, when you set overflow:hidden; on it.

Overflow is a wonderful property

.

**RyanReese** · Mar 8, 2012 20:09

Honestly you can if you want, and you really should know all of them at some point (though most of them are worthless, and you won't use really at all. Take a look at them though)

A lot of those (such as background-attachment, background-repeat) can all be shortened into a shorthand property, and for that example, it is "background:"

I wouldn't study CSS that way. Just view forum threads, check out their code, read the replies by the gurus here who know what they are talking about. You will learn

.

Note, I'm not saying you CAN'T learn that way, via learning them one at a time...however, it won't tell you about bugs that apply to browsers, what each value can do, aka I doubt much is mentioned in that HTMLdog link about the powers of overflow:hidden(or any value there.

**dresden_phoenix** · Mar 8, 2012 20:13

Ryan pretty much explained it as I would have. DO NOTE that this is a side effect of the "overflow:" property. For that reason:

Nice, would it be a good idea to "learn" all of these CSS properties?

So it's good to learn about all the properties but it BEST to have and exploitative thinking style. Remember that these properties INTERACT.. so merely memorizing definitions wont be that useful.

**Stomme poes** · Mar 9, 2012 03:37

I had thought it was margin-collapse but on the original code it was also that there were floats above it and the upper margin was sliding up under the floats, and that's why I didn't use the common margin-collapse solution (1px padding on container).

Kevin: I do generally try to use top-padding on the container rather than top-margin on the child for this reason, but sometimes you don't want to do that (maybe the child has a background-color or border that you don't want spacing on) and in those cases yes, you can use the 1px top padding (or border... there are a few triggers) on the container and that lets your child have a non-collapsed top-margin. Really, I don't understand the person who came up with this, why did they think it was a good idea?
http://www.search-this.com/2007/05/0...ne-or-why-111/

Re learning: The structure of the two books I got started with helped a lot. After that, it was a combination of building things, getting bugs, and reading/learning things like at HTMLdog etc. Forum posts as Ryan said are also good, especially if you read threads where someone has a problem you understand, and someone else then answers what's wrong and why and how to fix. You might want to read deathshadow60's posts, just ignore the ranting parts and read his code :)

**kvnwpts** · Mar 9, 2012 08:53

You guys gotta be right, I think I'll learn long along the way as you said.

I think its pretty wierd too.

Originally Posted by dresden_phoenix

Ryan pretty much explained it as I would have. DO NOTE that this is a side effect of the "overflow:" property. For that reason: So it's good to learn about all the properties but it BEST to have and exploitative thinking style. Remember that these properties INTERACT.. so merely memorizing definitions wont be that useful.

Originally Posted by Stomme poes

I had thought it was margin-collapse but on the original code it was also that there were floats above it and the upper margin was sliding up under the floats, and that's why I didn't use the common margin-collapse solution (1px padding on container).

Kevin: I do generally try to use top-padding on the container rather than top-margin on the child for this reason, but sometimes you don't want to do that (maybe the child has a background-color or border that you don't want spacing on) and in those cases yes, you can use the 1px top padding (or border... there are a few triggers) on the container and that lets your child have a non-collapsed top-margin. Really, I don't understand the person who came up with this, why did they think it was a good idea?
http://www.search-this.com/2007/05/0...ne-or-why-111/

Re learning: The structure of the two books I got started with helped a lot. After that, it was a combination of building things, getting bugs, and reading/learning things like at HTMLdog etc. Forum posts as Ryan said are also good, especially if you read threads where someone has a problem you understand, and someone else then answers what's wrong and why and how to fix. You might want to read deathshadow60's posts, just ignore the ranting parts and read his code

User Tag List

Thread: My div(s) don't move when using margin

Thread Tools

Display

My div(s) don't move when using margin

Bookmarks

Bookmarks

Posting Permissions