CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrap
Sujata Hulsurkar
Sujata Hulsurkar

Reputation: 115

Always keep same vertical distance between two divs

Here is my Markup:

 <div class="col-lg-6 col-md-6">
 <h1 class="text-info">Headline One</h1><hr>
 <button>Show More</button>
 </div>

 <div class="col-lg-6 col-md-6">
 <h1 class="text-info">Headline Two</h1><hr>
 <button>Show More</button>
 </div>

 <div class="col-lg-6 col-md-6">
 <h1 class="text-info">Headline Three</h1><hr>
 <button>Show More</button>
 </div>

First div is on left, second to its right and third one below first. Now, if I click on show more in the second div, there is a lot of blank space between first div and the third div vertically. How can I keep the distance between these divs always the same like 50px no matter if show more is clicked or not? I will attach an image if it is confusing.

Upvotes: 2

Views: 567

Answers (2)

Michal
Michal

Reputation: 2532

Looks like you are using bootstrap. You need to stick both your first and third divs into the same column, and give them their own columns to fill.

<div class="col-xs-6">
    <div class="col-xs-12">
        <h1 class="text-info">Headline One</h1>
        <hr />
        <button>Show More</button>
    </div>
    <div class="col-xs-12">
        <h1 class="text-info">Headline Two</h1>
        <hr />
        <button>Show More</button>
    </div>
</div>
<div class="col-xs-6">
    <h1 class="text-info">Headline Three</h1>
    <hr />
    <button>Show More</button>
</div>

You will notice I also used just col-xs. This is because bootstrap column classes scale up from the small. This will have the same layout no matter the screen size. Using col-lg-6 and col-md-6 like you were before is redundant. If you wish to change the layout per device size, always remember that xs will apply to all, and each larger one will override the smaller ones for the appropriate screen sizes.

Here is a fiddle: https://jsfiddle.net/uqu835mc/2/

As Jason W mentioned in comments below, you can use <div class="row">...</div> on the rows you are making to control the margin and padding of these columns inside a container. Here's how that looks:

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-6">
            <div class="row">
                <div class="col-xs-12">
                    <h1 class="text-info">Headline One</h1>
                    <hr />
                    <button>Show More</button>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <h1 class="text-info">Headline Two</h1>
                    <hr />
                    <button>Show More</button>
                </div>
            </div>
        </div>
        <div class="col-xs-6">
            <h1 class="text-info">Headline Three</h1>
            <hr />
            <button>Show More</button>
        </div>
    </div>
</div>

Here is a fiddle using rows: https://jsfiddle.net/uqu835mc/4/

EDIT: to have them all in a column on small screens, use <div class="col-xs-12 col-md-6"> for both of the outermost columns like so:

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12 col-md-6">
            <div class="row">
                <div class="col-xs-12">
                    <h1 class="text-info">Headline One</h1>
                    <hr />
                    <button>Show More</button>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <h1 class="text-info">Headline Two</h1>
                    <hr />
                    <button>Show More</button>
                </div>
            </div>
        </div>
        <div class="col-xs-12 col-md-6">
            <h1 class="text-info">Headline Three</h1>
            <hr />
            <button>Show More</button>
        </div>
    </div>
</div>

Upvotes: 1

MrMadsen
MrMadsen

Reputation: 3012

If you put the bootstrap class pull-right on all the divs in the right column then it will do the trick. Here is the html:

<div class="col-md-6">
  <h1 class="text-info">Headline One</h1><hr>
  <button>Show More</button>
</div>

<div class="col-md-6 pull-right">
  <h1 class="text-info">Headline Two</h1><hr>
  <button>Show More</button>
</div>

<div class="col-md-6">
  <h1 class="text-info">Headline Three</h1><hr>
  <button>Show More</button>
</div>

Here is a working fiddle: https://jsfiddle.net/kg8sh1wp/

Be sure to wrap the columns in a row like I did in my example or it may ruin the positioning of other dom elements.

Upvotes: 0

Related Questions