CODEWITHSUNDEEP
jquerycssjquery-mobile
pcasa
pcasa

Reputation: 3730

jquery mobile extra spacing on bottom of div

Getting unwanted spacing on bottom of divs.

Desire:

 - - - - - - - - - - - - - - - - - - -
|                 |                    |
|    Button1      |      Button2       |
|                 |                    |
 - - - - - - - - - - - - - - - - - - - 
| Title                                |
 - - - - - - - - - - - - - - - - - - - 
|                                      |
|  Page info....                       |

But I'm Getting

 - - - - - - - - - - - - - - - - - - -
|                 |                    |
|    Button1      |      Button2       |
|                 |                    |
 - - - - - - - - - - - - - - - - - - - 
5px gap
 - - - - - - - - - - - - - - - - - - - 
| Title                                |
 - - - - - - - - - - - - - - - - - - -  
|                                      |
|  Page info....                       |

Note: that I wanted to style the background so I put everything before content div.

<div data-role="page">
<style>
.topWrapper{
  width:100%;
  padding:0;
  margin:0;
  display:inline-block;
}
.topWrapper a{
  width:50%;
  padding-top:10px;
  padding-bottom:10px;
  float:left;
}
.myHr{
  width:100%;
  margin:0;
  padding:0;
  line-height:1em;
  font-size:1em;
}
.pageInfo{
  width:100%;
  margin:0;
  padding:0;
}

</style>
<div data-role="header">
<h1>Title</h1>
<a data-role="back" href="/app/Post">Back</a>
</div>
<div class="topWrapper">
    <a href="#" class="active">Button1</a>
    <a href="#">Button2</a>
</div>
<div class="myHr">Title</div>
<div class="pageInfo">...</div>
<div data-role="content"></div>
</div>

Upvotes: 3

Views: 5456

Answers (2)

Jason Gennaro
Jason Gennaro

Reputation: 34855

I think you need to override the default margin on the buttons.

So your CSS should be 

.topWrapper a{
  width:45%;
  padding-top:10px;
  padding-bottom:10px;
  float:left;
  margin-bottom:0 !important;  //ADD THIS  
}

I also reduced the width so there are no problems with the float.

The red border on the title can be removed. It's there to show the difference. (If you remove the margin-bottom:0 !important; and run the fiddle again you will see the 5px gap)

http://jsfiddle.net/jasongennaro/GyeMd/1/

Upvotes: 1

Phill Pafford
Phill Pafford

Reputation: 85308

Live Example:

HTML:

<div data-role="page" id="home">
    <div data-role="header">
        <h1>Title</h1>
        <a data-role="back" href="/app/Post">Back</a>
    </div>
    <div data-inline="true">
        <a href="#" data-role="button" data-inline="true" class="active buttonWidth">Button1</a>
        <a href="#" data-role="button" data-inline="true" class="buttonWidth buttonRight">Button2</a>
    </div>
    <div class="myHr">Title</div>
    <div class="pageInfo">...</div>
    <div data-role="content"></div>
</div>

CSS:

.buttonWidth {
    width:48%; /* make buttons span longer, increase the width but keep it 48% or below */
    /* Optional Margin/Padding for Buttons */
    margin-top: 1px;
    padding-top:1px;
}

.buttonRight {
    float:right;
}

.myHr{
    width:100%;
    margin:0;
    margin-top: -6px;
    padding:0;
    padding-top: -6px;
    line-height:1em;
    font-size:1em;
}
.pageInfo{
    width:100%;
    margin:0;
    padding:0;
}

Upvotes: 0

Related Questions