CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
marcamillion
marcamillion

Reputation: 33775

How do I align these 3 elements the way I want them with Bootstrap classes?

I have a layout like this:

3 square layout

What I want to happen is, I want the square/rectangle on the right to have the flexibility to extend as much height as possible, but I want the square at the bottom to always be flush underneath the 1st square, rather than seemingly in the 2nd row created at the end of the 2nd square.

I have attempted to re-create this on JSFiddle here, but it hasn't come out exactly like I want. Either way, hopefully these should fully explain what I am trying to achieve.

Note that the solution must be responsive on mobile devices too.

Upvotes: 0

Views: 44

Answers (1)

jrran90
jrran90

Reputation: 695

try this 

html {
	overflow-y: scroll;
}

html, body {
	height: 100%;
}

body {
	font-family: 'Source Sans Pro', sans-serif;
  background: #F2F2F2;
  font-size: 1.3em;
}

.post, .comments {
  background: #fff;
  border-radius: 3px;
  box-shadow: 0px 1px 1px #aaa;
  padding: 3em;
  margin: 2em auto;
/*	margin-top: 1em;*/
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">


<body>
    
    <div class="container">
        <div class="row">
            <div class="col-xs-6">
                <div class="post">box 1</div>
                <div class="post">box 2</div>
            </div>
            <div class="post col-xs-6">
                <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
            </div>
        </div>
    </div>

</body>

Hope it helps..

Thanks

Upvotes: 1

Related Questions