Hi there, I've made a #wrapper inside my #otherwrapper, but when I give the #wrapper a margin, it seems to move the #otherwrapper as well!

 

Here's the codes I used:

 

 

#main {

margin: 0 auto;

width: 700px;

height: 500px;

background-color: #CCCCCC;

}

 

#wrap1 {

margin: 15px 15px;

width: 200px;

height: 200px;

background-color: #CCCCCC;

}

 

 

 

<div id="main">

<div id="wrap1">

TEST

</div>

</div>

 

 

 

 

And I've attached a jpg of what my preview looks like, notice the white line between the two, it appears when I give the #wrapper margins.

 

Can someone help ?

 

Thx!

I just realized that, when I preview the site in Firefox, the white bar appears, but when I view it in IE, it doesn't !?!?!?! Any idea why?

hi , i know this doesnt help but could i be a noob and ask what a wrapper is ?

 

cheers

and sorry

wrappers are like tables! I'm a noob to soo!

wrappers are like tables! I'm a noob to soo!

 

ah i see , i only use dreamweaver so tables are just one click away

I use DW too and I started using tables as well, but I would suggest using #wrappers, easier to work with read about the in the top topic in "how do I do that"!

your margin:15px 15px; adds margin left and right and top and bottom, if you change it to this:

margin: 0px 15px 15px 15px;

your top margin will disappear. The margin is declared in the following order: top, right, bottom, left. If you only declare it twice it is assumed you mean vertical & horizontal.

Hope that helps

ill give that a read later on today .

 

hope you et the answers your looking for .

hey notbanksy,

 

yeah, but the thing is, I would like to have the #wrapper 15px away from the top og the #otherwrapper!

 

like the new jpg i attached here!

 

 

This is how it looks when I preview it in IE, but Firefox views it like the jpg attached earlier!

Try adding this to the start of your CSS:

* {margin:0; padding:0;}

It will reset any default padding and margin settings in your browser, but not mess with any padding or margin declared later in the document.

@charset "utf-8";

/* CSS Document */

* {margin:0; padding:0;}

#header {

margin: 0 auto;

background-image: url(scalogo.jpg);

width:700px;

height:100px;

}

 

 

 

like this? :]

Yes

hmm, that really didn't do it

btw notbanksy, have you any idea why my preview in IE and Firefox are different.

 

The first jpg is Firefox and the second jpg is IE.

this works

 

* { padding : 0; margin : 0; border: 0; }

 

#main {

margin: 0 auto;

width: 700px;

height: 500px;

background-color: #CCCCCC;

}

 

#wrap1 { position : relative;

top : 15px;

margin: 0 15px;

width: 200px;

height: 200px;

background-color: #fff;

}

 

no idea why the second wrapper was ignoring the 15px top margin....

 

#wrap1 { position : relative;

top : 15px;

margin: 0 15px;

width: 200px;

height: 200px;

background-color: #fff;

 

that did it for the wrapper, but the * { padding : 0; margin : 0; border: 0; } messes up my buttons which in design mode have "H space" 15.

 

Look at the jpg, but removing the * { padding : 0; margin : 0; border: 0; } and only having { position : relative; does it!

 

Any idea why?

#wrap1 { position : relative;

top : 15px;

margin: 0 15px;

width: 200px;

height: 200px;

background-color: #fff;

 

that did it for the wrapper, but the * { padding : 0; margin : 0; border: 0; } messes up my buttons which in design mode have "H space" 15.

 

Look at the jpg, but removing the * { padding : 0; margin : 0; border: 0; } and only having { position : relative; does it!

 

Any idea why?

 

blimey what's H Space some Dreamweaver thing ;-) ?? I think resetting the margins, borders, padding in * { } will overwrite the H Space. You could get round this by reintroducing { padding : 10px; } in the id or class that the buttons are in..?

 

glad it works with just top : 15px however.

 

 

ooops make that { padding : 10px 0; } or change the 0 for the amount of left pading you want.

 

another solution

 

 

* { padding : 0; margin : 0; border: 0; }

 

#main {

margin: 0 auto;

width: 700px;

height: 500px;

background-color: #CCCCCC;

}

 

#wrap1 { border-style : solid;

border-width : 15px 0 0 15px;

border-color : #ccc;

width: 200px;

height: 200px;

background-color: #fff;

}

thx headcoat, I'll play around with it.

 

While I have you, have you any idea how I can place two #wrappers side by side inside #anotherwrapper!? Like the illustration below

this explains what was happening

 

http://www.webmasterworld.com/forum83/4731.htm

 

never realised this before.

 

thx headcoat, I'll play around with it.

 

While I have you, have you any idea how I can place two #wrappers side by side inside #anotherwrapper!? Like the illustration below

 

try this

 

#main { }

 

#nested1 { float : left; }

#nested2 { float : left; }

 

leave all other styling in the {} for each div/id.

 

you'll need to clear the floats if you want yet another id/box/class to go back under these with

 

<div class="clear"></div> after the close of <div id="nested2">

 

in the css add this class

 

.clear { clear : both; }

 

use a class as you may need again on same page.

 

like this

 

<div id="main">

<div id="wrap1">

TEST

</div>

<div id="wrap2">

TEST

</div>

</div>

 

and the css

 

* { padding : 0; margin : 0; border: 0; }

 

#main {

margin: 0 auto;

width: 700px;

height: 500px;

background-color: #CCCCCC;

}

 

#wrap1 { float : left;

border-style : solid;

border-width : 15px 0 0 15px;

border-color : #ccc;

width: 200px;

height: 200px;

background-color: #fff;

}

 

#wrap2 { float : left;

border-style : solid;

border-width : 15px 0 0 15px;

border-color : #ccc;

width: 200px;

height: 200px;

background-color: #fff;

}

headcoat thx,

 

I'll play around with that as well.

 

Have you any idea why there is a difference between preview in IE and Firefox? In DW's design mode, my design looks like I want it to, when previewed in IE, it looks fine, but in Firefox, the #wrapper seems to not respont to the top margin command!

headcoat thx,

 

I'll play around with that as well.

 

Have you any idea why there is a difference between preview in IE and Firefox? In DW's design mode, my design looks like I want it to, when previewed in IE, it looks fine, but in Firefox, the #wrapper seems to not respont to the top margin command!

 

Try to avoid using design mode in dreamweaver, what you see is almost certainly not what you will get, your best bet is to preview in ff and ie.

 

Pat

ahh Pat always around when I need it.

 

Can you then tell me why there still is a difference when I preview my site in IE and Firefox?

ahh Pat always around when I need it.

 

Can you then tell me why there still is a difference when I preview my site in IE and Firefox?

`

 

Try Headcoats solution above, Is your website still live? so we can see the live version, if not then all the code.

 

Cheers

 

Pat

actually, the "invisible" borders does the trick all along!

 

#main {

margin: 0 auto;

width: 700px;

height: 500px;

background-color: #CCCCCC;

}

 

#wrap1 {

border-style : solid;

border-width : 15px 0 0 15px;

border-color : #CCCCCC;

width: 200px;

height: 200px;

background-color: #FFFFFF;

}

 

 

 

<div id="main">

<div id="wrap1">JA NELIG</div>

</div>

 

That gives the result I was looking for in both IE and Firefox. Like the illustration below, Nice!. But will I encounter other problems using borders?

- Nicklas!

There's no specific reason why the borders should cause a problem unless you try and add text or inakes into the origina/outer wrapper which is covered by the border from the inner border...at least that I can think of.

 

Sometimes you have to run with what works in CSS and xhtml and for now this appears to work!

 

All new to me just applied the little knowledge I have to solve the isue...I'd suggest run with it for now and let us know if it causes any problems down the line.