iefpw iefpw - 5 months ago 8
CSS Question

Two column list fill div width

I have a two column list in a div, and I want the two columns to fill the entire width of the div.

<body>
<div class="box">
<ul class="list">
<li class="list-item">asdfasfd</li>
<li class="list-item">asdfasfd</li>
<li class="list-item">asdfasfd</li>
<li class="list-item">asdfasfd</li>
<li class="list-item">asdfasfd</li>
</ul>
</div>
</body>


.box {
border: 1px solid black;
background-color: gray;
width: 450px;
box-sizing: border-box;
}

ul.list {
list-style-type: none;
padding: 0;
}

li.list-item {
display: inline;
display: inline-block;
height: 40px;
width: 47%;
padding: 10px;
margin: 5px;
box-sizing: border-box;
background-color: green;
}


Here is the fiddle:

https://jsfiddle.net/h7112hrm/1/

Right now there is 1-2px more spacing in the end. Is there a way to fill the two column green boxes to entire 100% of the outer div? Is there a cleaner way to do this?

San San
Answer

Please check the code, I have modified few things. Dont leave any space between each li. Else use "float:left" instead of "display: inline-block" .

.box {
	border: 1px solid black;
	background-color: gray;
	width: 450px;
}

ul.list {
	list-style-type: none;
	padding: 0;
  margin:0;
}


li.list-item {
	display: inline-block;
	height: 40px;
	width: calc( 50% - 10px );
	padding: 10px;
  margin: 5px;
	box-sizing: border-box;
	background-color: green;
}
<body>
	<div class="box">
	<ul class="list">
		<li class="list-item">asdfasfd</li><li class="list-item">asdfasfd</li><li class="list-item">asdfasfd</li><li class="list-item">asdfasfd</li><li class="list-item">asdfasfd</li>
	</ul>
	</div>
</body>

Comments