I have 4 boxes in my page and all the boxes has display: inline-block;. The problem is with vertical align, all these boxes content is dynamic so one box might have more rows than the other for different users.
Please advise on how can I avoid the vertical gap for Audit Administration box.
body {
font-family: 'Arial';
font-size: 12px;
}
a,
a:link,
a:active {
text-decoration: none;
color: blue;
background-color: transparent;
}
a:visited {
color: purple;
background-color: transparent;
}
a:hover,
.ui-state-hover a:hover {
text-decoration: underline;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<body style="padding-left:20px;width:70%">
<br/>
<div style="padding-top: 1em;">
<div style="display: inline-block; width: 300px; vertical-align:top; ">
<div>
<div id="id61">
<div>
<div class="ui-widget">
<div class="ui-widget-header ui-corner-all">
<div style="padding: .25em; text-align: center; ">
<label>My Audits Summary</label> (<a href="javascript:;" id="id56">Refresh</a>) </div>
</div>
<div class="ui-widget-content ui-corner-all">
<div style="padding: .25em;">
<ul style="margin-bottom: 0;">
<li>
<a href="javascript:;" id="id57">
<span>Review New Audit Assignment from Audit Liaison (1)</span>
</a>
</li>
</ul>
<ul style="margin-bottom: 0;">
<li>
<a href="javascript:;" id="id58">
<span>Assign Audit Analyst to Audit Recommendation Code (1)</span>
</a>
</li>
</ul>
<ul style="margin-bottom: 0;">
<li>
<a href="javascript:;" id="id59">
<span>Perform Audit Assignment (8)</span>
</a>
</li>
</ul>
<ul style="margin-bottom: 0;">
<li>
<a href="javascript:;" id="id5a">
<span>Review Returned ARP (1)</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="display: inline-block; width: 350px; vertical-align:top;">
<div>
<div>
<div class="ui-widget ui-corner-all">
<div class="ui-widget-header ui-corner-all">
<div style="padding: .25em;">
<span>Overdue Rec code Actions Summary <span>(<a href="javascript:;" id="id5b">Refresh</a>) </span> </span>
</div>
</div>
<div class="ui-widget-content ui-corner-all">
<div style="padding: 5px;">
<div id="id62">
<span>No items found.</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="display: inline-block; width: 100px; vertical-align: top;">
<div class="ui-widget">
<div class="ui-widget-header ui-corner-all">
<div style="text-align: center; padding: .25em;">
<label>Find Audit</label>
</div>
</div>
<div class="ui-widget-content ui-corner-all">
<div>
<ul style="margin: 0;">
<li>
<a href="javascript:;" id="id35"><span>Rejected</span></a>
</li>
</ul>
<ul style="margin: 0;">
<li>
<a href="javascript:;" id="id36"><span>Pending</span></a>
</li>
</ul>
<ul style="margin: 0;">
<li>
<a href="javascript:;" id="id37"><span>Closed</span></a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div style="display: inline-block; width: 200px; vertical-align: top;">
<div class="ui-widget">
<div class="ui-widget-header ui-corner-all">
<div style="text-align: center; padding: .25em;">
<label>Reports</label>
</div>
</div>
<div class="ui-widget-content ui-corner-all">
<div style="padding: .25em">
<ul style="margin-bottom: 0;">
<li>
<a href="javascript:;" id="id38"><span>Audit Tracking by Program office Report</span></a>
</li>
</ul>
<ul style="margin-bottom: 0;">
<li>
<a href="javascript:;" id="id39"><span>Audit Tracking Report by FY-Quarter Report</span></a>
</li>
</ul>
<ul style="margin-bottom: 0;">
<li>
<a href="javascript:;" id="id3a"><span>Audit Workflow Bottleneck Report</span></a>
</li>
</ul>
<ul style="margin-bottom: 0;">
<li>
<a href="javascript:;" id="id3b"><span>Audit Actions Report</span></a>
</li>
</ul>
<ul style="margin-bottom: 0;">
<li>
<a href="javascript:;" id="id3c"><span>Stewardship Report 4</span></a>
</li>
</ul>
<ul style="margin-bottom: 0;">
<li>
<a href="javascript:;" id="id3d"><span>Disallowance Report</span></a>
</li>
</ul>
<ul style="margin-bottom: 0;">
<li>
<a href="javascript:;" id="id3e"><span>Audit Summary Report by CO and RO</span></a>
</li>
</ul>
<ul style="margin-bottom: 0;">
<li>
<a href="javascript:;" id="id3f"><span>Recommendation Code Summary Report by CO and RO</span></a>
</li>
</ul>
<ul style="margin-bottom: 0;">
<li>
<a href="javascript:;" id="id40"><span>Recommendation Code Summary Report by Program Office</span></a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div style="display: inline-block; vertical-align: top; width: 200px; ">
<div>
<div class="ui-widget">
<div class="ui-widget-header ui-corner-all">
<div style="text-align: center; padding: .25em;">
<label>Audit Administration</label>
</div>
</div>
<div class="ui-widget-content ui-corner-all">
<div style="padding: .25em">
<ul style="margin-bottom: 0;">
<li>
<a href="javascript:;" id="id41"><span>Audit Data Preparation and Processing</span></a>
</li>
</ul>
<ul style="margin-bottom: 0;">
<li>
<a href="javascript:;" id="id42"><span>My Monitored Audits</span></a>
</li>
</ul>
<ul style="margin-bottom: 0;">
<li>
<a href="javascript:;" id="id43"><span>Audit Logging and Maintenance</span></a>
</li>
</ul>
<ul style="margin-bottom: 0;">
<li>
<a href="javascript:;" id="id44"><span>Audit Amendment</span></a>
</li>
</ul>
<ul style="margin-bottom: 0;">
<li>
<a href="javascript:;" id="id45"><span>Reset Audit & Assignments</span></a>
</li>
</ul>
<ul style="margin-bottom: 0;">
<li>
<a href="javascript:;" id="id46"><span>Archive Audit</span></a>
</li>
</ul>
<ul style="margin-bottom: 0;">
<li>
<a href="javascript:;" id="id47"><span>Reassign Official</span></a>
</li>
</ul>
<ul style="margin-bottom: 0;">
<li>
<a href="javascript:;" id="id48"><span>Reassign Recommendation Codes</span></a>
</li>
</ul>
<ul style="margin-bottom: 0;">
<li>
<a href="javascript:;" id="id49"><span>Grantee Name and Address Maintenance</span></a>
</li>
</ul>
<ul style="margin-bottom: 0;">
<li>
<a href="javascript:;" id="id4a"><span>Attach Document to Audit</span></a>
</li>
</ul>
<ul style="margin-bottom: 0;">
<li>
<a href="javascript:;" id="id4b"><span>My Delegated Authority</span></a>
</li>
</ul>
<ul style="margin-bottom: 0;">
<li>
<a href="javascript:;" id="id4c"><span>Delegate Account Access</span></a>
</li>
</ul>
<ul style="margin-bottom: 0;">
<li>
<a href="javascript:;" id="id4d"><span>My Open Audits</span></a>
</li>
</ul>
<ul style="margin-bottom: 0;">
<li>
<a href="javascript:;" id="id4e"><span>Users</span></a>
</li>
</ul>
<ul style="margin-bottom: 0;">
<li>
<a href="javascript:;" id="id4f"><span>Program-Organization</span></a>
</li>
</ul>
<ul style="margin-bottom: 0;">
<li>
<a href="javascript:;" id="id50"><span>User Assistants</span></a>
</li>
</ul>
<ul style="margin-bottom: 0;">
<li>
<a href="javascript:;" id="id51"><span>User Reports</span></a>
</li>
</ul>
<ul style="margin-bottom: 0;">
<li>
<a href="javascript:;" id="id52"><span>Batch Reassignments</span></a>
</li>
</ul>
<ul style="margin-bottom: 0;">
<li>
<a href="javascript:;" id="id53"><span>Overdue Rec Codes Status Tracking</span></a>
</li>
</ul>
<ul style="margin-bottom: 0;">
<li>
<a href="javascript:;" id="id54"><span>Document Library</span></a>
</li>
</ul>
<ul style="margin-bottom: 0;">
<li>
<a href="javascript:;" id="id55"><span>Fac Data</span></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
