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

HTML & CSS
1

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:

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



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

2

Hi,

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.

3

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.

4

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.

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.

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

5

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.

6

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

7

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

8

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?

9

You should be able to upload your own avatar.

10

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

11

Yes, you must have 25 posts.

12

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

13

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

14

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

Having an avatar isn’t amazing anyway.

15

#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.

16

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).

17

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

18

That worked too, could you explain why that happens if you can? :slight_smile: I hate doing things I don’t know since I wanna know as much as possible.

Thanks

19

Ah yes, I forgot that one. :slight_smile:

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. :slight_smile: )

20

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 :).