CODEWITHSUNDEEP
htmlcss
Canna
Canna

Reputation: 3804

margin-top is not working when i use clear:both

html,

<div id="content">
    <div id="left">left</div>
    <div id="right">right</div>
    <div id="bottom">bottom</div>    
</div>

css,

#content {
    border:1px solid black;
}
#content > div {
    height:100px;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
}
#left {
    float:left;
    width: 50%;
    border-right:1px solid black;
}
#right {
    float:right;
    width: 50%;
}
#bottom {
    border-top:1px solid black;
    clear: both;
    margin-top: 50px;
}

demo

http://jsfiddle.net/saBE2/1/

i want to make some space, after left and right div in bottom div

but if i use clear:both, margin-top isn't working.

any good idea?

Upvotes: 1

Views: 1579

Answers (5)

Pallavi
Pallavi

Reputation: 1

You need to do the following:

  1. Remove the float property from both the left and right divs.
  2. Add display: inline-block property to both.

Now, the margin-top: 50px of bottom div will be applied.

Further, adjust the width of both divs, make them lesser than 50%, based on how much space you want to add around these divs.

Upvotes: 0

Ishan Jain
Ishan Jain

Reputation: 8171

Yes, you are right clear:both;. It's because clear:both makes the element drop below any floated elements that precede it in the document.

But if you make your div display:inline-block with cover width:100%. It's take margin.

Try in fiddle

Upvotes: 0

codingrose
codingrose

Reputation: 15709

Clear floats after left,right.

Try:

HTML:

<div id="content">
    <div id="left">left</div>
    <div id="right">right</div>
    <div class="clr"></div>
    <div id="bottom">bottom</div>
</div>

CSS:

#bottom {
    border-top:1px solid black;
    margin-top: 50px;
}
.clr{clear: both;}

Updated fiddle here.

Upvotes: 3

Marinus
Marinus

Reputation: 441

I have updated your fiddle jsfiddle.net/saBE2/5/

The problem is that is doesn't look right with the margin because you don't have any border at the bottom for left and right boxes, also try and put margin under boxes left and right.

#content {
border:1px solid black;
}
#content > div {

box-sizing:border-box;
-moz-box-sizing:border-box;
}
#left {
float:left;
width: 50%;
border-right:1px solid black;
border-bottom:1px solid black;
margin-bottom:50px;
}
#right {
float:left;
width: 50%;
clear:right;
border-bottom:1px solid black;
}
#bottom {
border-top:1px solid black;
clear: both;
margin-top: 50px;
}

Upvotes: 0

Rajnikant Kakadiya
Rajnikant Kakadiya

Reputation: 2265

Use clear to clear foat like below

css

.clear{height:0px !important;clear:both;margin:0 !important;padding:0 !important;}

html

<div id="content">
    <div id="left">left</div>
    <div id="right">right</div>
    <div class="clear"></div>
    <div id="bottom">bottom</div>
</div>

Demo

Upvotes: 0

Related Questions