Hi the following is my code and i am using crome (browser)

<div style="width:700px;height:100px;background-color:silver">
    <div id="week" style="margin:20px;border:2px solid red">
         <div id="sfsf" style="margin:10px;">
              Day Of The Week
          </div>

      </div>         
</div>

In the above code the div with id "week" is displaying very strange behavior. For this div i have applied margin of 20px. the margin should start from its parents div. But here the margin starts from the top of the document, I mean from the browser top. this is very strange.

there is a div inside the "week" div. For that also i have applied margin of 10px. This is working fine. I mean the margin starts from inside the "week" div.

Could you please help understanding this behavior? How to solve this?

Recommended Answers

Do you have anything in your CSS saying position:absolute or position:fixed ??

Jump to Post

Can you place your code on a site we can view?

Jump to Post

All 7 Replies

Do you have anything in your CSS saying position:absolute or position:fixed ??

No nothing in my css. I am attaching the html file for ur reference. unable to atach html file but the above is only the code taht i have in my html file. you can even copy and paste the above code into a html file.

Can you place your code on a site we can view?

You can use the following url http://jsfiddle.net/bWpMR/

Now i found the problem and solution. The problem is because of border style and border width. if i apply the following style "border:1px solid" everything works fine. The main element is border-style. If we apply border-style then everything is fine in combination there should not be "border-width:0px". In this situations everything is working fine. One more note is "border-style" should not be "none" or "hidden".

Now my question is if i dont want to apply borders, I mean if i dont want to display border lines on html how do i achieve this?

If you add a padding of 1px to outside div it then has an edge to push from.

<div style="width:700px;height:100px;background-color:silver; padding: 1px;">
    <div id="week" style="margin:20px;border:2px solid red">
       <div id="sfsf" style="margin:10px;">
          Day Of The Week
       </div>
    </div>
</div>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of 1.20 million developers, IT pros, digital marketers, and technology enthusiasts learning and sharing knowledge.