Member Avatar for yaragalla_mural

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?

  • 4 Contributors
  • 7 Replies
  • 150 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by BMXDad
Member Avatar for Dani

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

Member Avatar for yaragalla_mural

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.

Edited by yaragalla_mural
Member Avatar for paulkd

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

Member Avatar for yaragalla_mural

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?

Edited by yaragalla_mural
Member Avatar for BMXDad

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>
Edited by BMXDad
Be a part of the DaniWeb community

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