CODEWITHSUNDEEP
htmlcss
SurajS
SurajS

Reputation: 497

Removing top padding from table cell div

I have the same issue.

.mainDiv {
    border-spacing: 15px;
}

.formDiv {
    width: 300px;
    background-color: #F5F6CE;
    padding: 10px;
    margin-left: 20px; 
    display: table-cell;
    vertical-align: top;
}

.resultDiv {

    background-color: #F5F6CE;
    padding: 20px;
    box-shadow: 5px 5px 5px #888888;
    margin-left: 20px;
    display: table-cell;
    width: 100%;
}

Now, I want to add <h1> to formDiv which results in:

enter image description here

I want the company registration to be aligned to top.

I found many threads giving answer:

vertical-align: top;

but it's not working for me. Please help.

HTML is:

<div class="mainDiv">
        <div class="formDiv" align="center">

            <h1 align="center">Company Registration</h1>

            <form id="compReg" onsubmit="SaveData();return false;">
                <Table align="center" cellspacing="5px">
                    <tr>
                        <td>
                        <Input id="txtEmail" type="email" class="text" placeholder="Contact Email"  />
                        </td>
                    </tr>
                    <!-- other input types -->

                    <tr>
                        <td>
                        <Input type="submit" value="Submit" />
                        &nbsp; &nbsp; &nbsp;
                        <Input type="reset"/>
                        </td>
                    </tr>

                </table>

            </form>
        </div>

        <div class="resultDiv" id="result">
            <div align="right">
                <input type="button" onclick="clearData()" value="Clear" />
                <br>
                <br>
            </div>
            <table class="dataTable" width="300">
                <thead>
                    <th width="20px">Id</th>
                    <th width="250px">Email</th>

                    <!-- other headers -->

                    <th width="50px">Color</th>

                </thead>

                <tbody id="tbody">

                </tbody>
            </table>
        </div>

    </div>

check JSFiddle I want the "problem" h1 to be aligned at top of left div.

Upvotes: 1

Views: 2730

Answers (4)

Pranita Hedaoo
Pranita Hedaoo

Reputation: 26

h1 tag has default margin. Try to set it to 0px.

h1{
  margin:0px;

}

Upvotes: 1

roNn23
roNn23

Reputation: 1652

You mean this? Please post your HTML-Markup next time!

h1 { margin:0; background: blue; }
.formDiv {
  width: 300px;
  background-color: #F5F6CE;
  margin-left: 20px;
  padding: 0 10px 10px 10px;
  display: table-cell;
}
<div class="wrapper">
  <div class="formDiv">
    <h1>Lorem</h1>
    <p>ipsum dolor</p>
    <input name="test" type="text">
  </div>
</div>

Look at your fiddle: http://jsfiddle.net/xsmzLb3g/2/

You have to change the margin/padding of the h1 and div.

Upvotes: 0

shanidkv
shanidkv

Reputation: 1103

As from my understanding if you are using table and trying to solve table cell spacing issue. try to make zero cell-spacing and cell-padding.

<table cellpadding="0" cellspacing="0">

CSS to H1 spacing

table h1{ margin:0; padding:0; }

JSFIDDLE DEMO

Upvotes: 0

cspete
cspete

Reputation: 170

Try resetting the default table padding and margin values

#yourtable {
   margin: 0;
   padding: 0;
}

Upvotes: 0

Related Questions