CODEWITHSUNDEEP
htmlcss
user3117275
user3117275

Reputation: 367

HTML not lining up

https://www.citywidelaw.com/

For this page, there is a section with a Q and A (you click on question and answer is next to it. The Q symbol and A symbol are supposed to line-up. I'm not sure why the A is dropping. I tried a , but it had no effect.

I added an image. Thanks in advance.

HTML

<div class="row">
<div class="col-xs-12">
<div id="verticalTab" class="resp-vtabs" style="display: block; width: 100%; margin: 0px;">
<h2 class="resp-vtabs-heading">
<ul class="resp-tabs-list">
<div class="resp-tabs-container">
</div>
</div>
</div>

CSS: 

.resp-vtabs .resp-tabs-container {
    clear: none;
    float: left;
    min-height: 350px;
    padding: 0 0 0 40px;
    width: 53%;
}
.resp-tabs-container {
    background-color: #fff;
    clear: left;
    padding: 0;
}

enter image description here

Upvotes: 0

Views: 63

Answers (1)

Leland
Leland

Reputation: 2119

The "Q" symbol, the <h2> element, is an element above the two columns.Original

So here's what I would do. Create a <div> element around the <h2> and <ul> elements with a class of, say, resp-tabs-list-container. Then just rename, in your CSS, the selector .resp-vtabs ul.resp-tabs-list to .resp-vtabs .resp-tabs-list-container.

Pow.

Fixed

Upvotes: 1

Related Questions