loosing margins when inserting new div in dreamweaver cs4

[marco]

Hello , I am using dreamweaver cs4 to build a web site. I am loosing my margins on the left and right side of my web page when i insert a new div tag,and as soon as i insert this div tag my page also gets a left to right scroll bar underneath,which i do not wish to have. Until i insert the new div tag i have my margins on the left and right side of the page and no scroll bar underneath and the moment i insert the new div tag i get the scroll bar underneath and also there are no margins on the sides.This happens when i delete the text``Content for id "coachad" Goes Here``, and copy paste or even type in my text in this div , strangely enough when i copy paste my text in this div i loose my margins and when i type in my text i do not loose my margins up until i reach the fourth line , i know this because i previewed it in a browser after typing in every word in the div .Tried pasting my codes but i receive an error here that i cannot post links which i do not have in any case??? Any help on the matter would be appreciated.
cheers

[weegillis]

Are you using WYSIWYG, or code view?

Do you have any HTML and CSS experience?

Consider this:

<!-- Eg. 1 -->
<div id="aaa">
 <div id="bbb"> .. </div>
</div>

<!-- Eg. 2 -->

<div id="aaa"> .. </div>
<div id="bbb"> .. </div>

In Eg. 1, above, 'bbb' is a CHILD element of 'aaa'. 'bbb' will inherit its dimensions, margins and other properties from 'aaa'.

In Eg. 2, above, 'bbb' is a SIBLING element of 'aaa'. They both share the same parent, from which they will inherit the same properties, but 'bbb' is independent of 'aaa' and will not inherit properties.

[kgun]

There should be a lot of CSS templates in Dreamweaver. You should get an idea of how it is done, by looking at that styling.

You can become an expert on this: http://www.w3schools.com/css/default.asp Norwegian site that is often found on the first SERP page for everything related to web design, markup and coding.

[marco]

Are you using WYSIWYG, or code view?

Do you have any HTML and CSS experience?

Consider this:

<!-- Eg. 1 -->
<div id="aaa">
 <div id="bbb"> .. </div>
</div>

<!-- Eg. 2 -->

<div id="aaa"> .. </div>
<div id="bbb"> .. </div>

In Eg. 1, above, 'bbb' is a CHILD element of 'aaa'. 'bbb' will inherit its dimensions, margins and other properties from 'aaa'.

In Eg. 2, above, 'bbb' is a SIBLING element of 'aaa'. They both share the same parent, from which they will inherit the same properties, but 'bbb' is independent of 'aaa' and will not inherit properties.

Hi Weegillis , wow that was a rapid response thank you for the same.I am using mostly WYSIWYG and no i do not have much css or html experience but i have built a few sites using dreamweaver and am quite savvy about it but honestly i do not know much about code except i always look at the code view after i do something in the design view of dreamweaver , so i can learn. I kind of understand what you are saying when you speak about parent and sibling elements, but dont understand how it is applicable in my case . Well in a nutshell what i have done is attach a css style sheet to a html and created divs in a wrapper div , each div has its own width and height , but in general the divs are within the wrapper div and so they all share the same properties as in margins . Whats driving me batty is whats causing me to loose the margins on either side of the page and bringing up this sideways scroll bar and exactly when i type some text in the 4th line of the last or lastly created div , why is this not happening when i inserted the other divs within this wrapper div and why is it only happening when i am typing text in the 4th line and not when i am typing in the 1st line, also when i do not set any height or width dimensions in this tag and let the text run across the page as opposed to in a box with set dimensions , i do not loose my margins???Is it an overflow thats causing it , if so does`nt dreamweaver restrict the overflow considering the dimensions of the div are absolute or preset?Perhaps you can shed some light, any help is appreciated.
cheers
marco

[kgun]

Do you know about absolute and relative (%) positioning?

[weegillis]

Next question:

What do you use to preview? DW, or a browser (or multiple browsers)?

Do you test on a live server?

On to OP... The only way a div can force a parent container to widen, is to push a higher width value into it. Consider a parent wrapper that is 95% of the window width, and given its popularity at present, a 1024 wide screen. Any child container (or containers sharing the wrapper width) that push(es) past (0.95 * ~990) will force a horizontal scroll where there otherwise wouldn't be one.

Twisting this idea around, it applies to all parent widths. Consider also, any margins, padding or borders on child elements. If a parent is 600px, and a child is tossed in with margins 15px and border 5px, the inner container will have 560px of available view port. Give the child container a forced width of 600px and the parent will stretch to 640px. (Note: Not in all cases... refer to box model differences between browsers.)

Trace through all the style sheet widths, borders, padding and margins and add them up for each child. Sooner or later you will find a set that exceed the width that the window will allow.

Segue Tips:

Be sure to tame your floats, make careful use of italicized text and right/left padding, and allow a tiny bit of breathing space when summing the width values. Better it add up to 99% than 100%. Allow for differences in how browsers calculate width. 1 to 2 percent is a fair allowance. Testing in multiple browsers helps to discover and work around any differences. None of them look exactly alike, side by side, so don't shoot for that kind of perfection. Look good in each, and end the comparison there.

To help you any further, beyond this general discussion, we need to see some code.

[marco]

Hi Kgun & Weegilis, Thank you for your patience and advice , after playing around a lot i realised i could use tables within the divs and that solved my issue . thanx again , its wonderfull that you guys give advice selflessly and free.
love, light & laughter
marco

[weegillis]

Always glad to help. Not sure that adding more structure (table within div for layout) would be the way to go, but if it's working for you, at least you've bought some time to sort out the real problem.