Two divs left and right. Left is shorter so white space below. Fill it with an image.

Question

Bootstrap: I have a list on the left side that is shorter than the table on its right. As a result it looks awkward and I would like to put an image below the list on the left side to fill the white space on the left below the list. I would like this image to be center vertically and horizontally and scale as best as possible. The problem right now is the image doesn't center and it won't center.

Alexei Zababurin · Accepted Answer

@charset "utf-8";
html {
	background: #ccc;
	min-height: 100%;
	font-family: sans-serif;
	font-size: 5px;
	display: -webkit-flex;
	display: flex;
	flex-direction: column;
}
body {
	margin: 0;
	padding: 15px;
	display: -webkit-flex;
	display: flex;
	flex-direction: column;
	flex: auto;
}

.box {
	width: 100%;
	/*max-width: 960px;*/
	margin: 0 auto;
	display: -webkit-flex;
	display: flex;
	flex-wrap: wrap;
}
.box-base {
	background: #222;
	min-height: 430px;
	font-size: 5rem;
	color: #eee;
	flex: auto;

	display: -webkit-flex;
	display: flex;
	justify-content: center;
	align-items: center;
}
.box-side {
	margin-right: 30px;
	display: -webkit-flex;
	display: flex;
	flex: 0 0 220px;
	flex-direction: column;
}
.box-itm {
	background: #222;
	min-height: 200px;
	font-size: 5rem;
	color: #eee;
	margin-bottom: 0px;
	flex: auto;

	display: -webkit-flex;
	display: flex;
	justify-content: center;
	align-items: center;
}
.box-itm:last-child {
	margin-bottom: 0;
}

Let me offer approach with flexbox. Img is included as background in Div №3. In fullscreen mode you can see a work of snippet. I should note flexbox formatting are included into Bootstrap 4. I suppose my decision will be useful for you.

Two divs left and right. Left is shorter so white space below. Fill it with an image.

Answers (2)

Related Questions