css margin problem

Question

My css looks like this

* {
     margin: 0;
     padding: 0;
}
body {
    background-color: #FFFFFF;
}
div#header {
    background-color: #969696;
    height: 80px;
}
div#mid-bar {
    background: url(images/home.jpg) left no-repeat #6f6565;
    height: 200px;
}

#searchbox {
    background-color: #c1c1c1;
    width: 200px;
    height: 180px;
    margin: 10px 20px 10px 350px;
}

and my html

    <div id="header">

    </div>
    <div id="mid-bar">
        <div id="searchbox">

        </div>
    </div>

preview

you can see the problem. the space between header and mid-bar which is created due to the margin given in the searchbox div. i want this margin for searchbox within the mid-bar div... and not from header div.

Which browser are you testing in? This is a strange problem. — Kyle
– Kyle, Commented Oct 27, 2010 at 11:29
Yeah. If we add even space [ ] in #mid-bar before #searchbox in renders correctly in firefox atleast. — Chinmayee G
– Chinmayee G, Commented Oct 27, 2010 at 11:32

pixeline · Accepted Answer · 2010-10-27 11:31:31Z

4

I's a known bug: would use padding instead of margin. so:

div#mid-bar {
    background: url(images/home.jpg) left no-repeat #6f6565;
    height: 200px;
padding-top: 10px;
}


#searchbox {
    background-color: #c1c1c1;
    width: 200px;
    height: 180px;
    margin: 0px 20px 10px 350px;
}

answered Oct 27, 2010 at 11:31

pixeline

18.1k12 gold badges87 silver badges110 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Assad Nazar Over a year ago

that has filled in the gap... till now so good... but sth else gone wrong. background: url(images/home.jpg) left no-repeat #6f6565 the image home.jpg is 200px in height. due to background color when padding applied to mid-bar, i have 6f6565 color and my image is cut in 200px of height. rest 10px height of padding is filled with the background-color :(

pixeline Over a year ago

give searchbox's height : 190px;

Chinmayee G · Accepted Answer · 2010-10-27 11:30:31Z

1

Give padding to #mid-bar instead of searchbox margin

answered Oct 27, 2010 at 11:30

Chinmayee G

8,1172 gold badges34 silver badges41 bronze badges

Comments

Moin Zaman · Accepted Answer · 2010-10-27 11:33:02Z

1

I have seen this happen when you don't give margins to parents and the first element, even a child that you give margin to, causes gaps in the parents by creating margins. One way I've overcome this is by using paddings on the parent containers instead of margins.

See your example here with paddings: http://jsbin.com/ememi3

answered Oct 27, 2010 at 11:33

Moin Zaman

25.5k6 gold badges74 silver badges74 bronze badges

Comments

Freyr · Accepted Answer · 2010-10-27 11:40:59Z

1

If you are intent on using margins, try setting margin:0; in #mid-bar. Otherwise give #mid-bar a padding-top:10px; and remove top margin from #searchbox.

answered Oct 27, 2010 at 11:40

Freyr

4074 silver badges9 bronze badges

Comments

Blake · Accepted Answer · 2010-10-27 17:52:49Z

0

Everyone seems to agree on this one, padding will work much better then margins will. I looked into it a little and it seems Pixeline is right, it's a known bug in Firefox, hopefully they will fix it in 4.

answered Oct 27, 2010 at 17:52

Blake

7633 gold badges16 silver badges35 bronze badges

1 Comment

Assad Nazar Over a year ago

padding tweak working fine. Though there was a problem with the image specified in mid-bar. i.e. background: url(images/home.jpg) left no-repeat #6f6565; This image was 200px high, I changed it into 220px of height, so that the space created by padding can be filled. This was my approach to tweak the problem.

Collectives™ on Stack Overflow

css margin problem

5 Answers 5

2 Comments

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related