CODEWITHSUNDEEP
htmlcssnewline
user4043210
user4043210

Reputation:

HTML CSS why a set divs not start new line

Divs inside Div (id="icons") not starting new line (like Windows 7 icons)

I want the divs inside div with id="icons" don't start a new line it flows vertically. Why not start new line?

JsFiddle

///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// 

body {
	margin:0;
	padding:0;
}
#icons {
	position: fixed;
	background: red;
	width: 100%;
	height: 100%;
	overflow: auto;
}
#icons1 {
	position: relative;
	background: blue;
	width: 20%;
	height: 25%;
}
#icons2 {
	position: relative;
	background: yellow;
	width: 20%;
	height: 25%;
}
#icons3 {
	position: relative;
	background: lime;
	width: 20%;
	height: 25%;
}
#icons4 {
	position: relative;
	background: pink;
	width: 20%;
	height: 25%;
}
#icons5 {
	position: relative;
	background: purple;
	width: 20%;
	height: 25%;
}
#icons6 {
	position: relative;
	background: blue;
	width: 20%;
	height: 25%;
}
#icons7 {
	position: relative;
	background: yellow;
	width: 20%;
	height: 25%;
}
#icons8 {
	position: relative;
	background: lime;
	width: 20%;
	height: 25%;
}
#icons9 {
	position: relative;
	background: pink;
	width: 20%;
	height: 25%;
}
#icons10 {
	position: relative;
	background: purple;
	width: 20%;
	height: 25%;
}
<div id="desktop">

<div id="icons">
<div id="icons1"></div>
<div id="icons2"></div>
<div id="icons3"></div>
<div id="icons4"></div>
<div id="icons5"></div>
<div id="icons6"></div>
<div id="icons7"></div>
<div id="icons8"></div>
<div id="icons9"></div>
<div id="icons10"></div>
<div id="icons1"></div>
<div id="icons2"></div>
<div id="icons3"></div>
<div id="icons4"></div>
<div id="icons5"></div>
<div id="icons6"></div>
<div id="icons7"></div>
<div id="icons8"></div>
<div id="icons9"></div>
<div id="icons10"></div>
</div>
    
</div>

Upvotes: 2

Views: 303

Answers (2)

bingo
bingo

Reputation: 2308

Change the display type on those icon divs.

#icons div {
  display:inline-block;
  margin:5px;
}

http://jsfiddle.net/0y7ktkd2/1/

Upvotes: 1

Hugo Yates
Hugo Yates

Reputation: 2111

A DIV by default is a display type of 'block' and therefore forces in the line break.

You can get around this by using display: inline-block; in your CSS like so:

#icons1 {
    position: relative;
    background: blue;
    width: 20%;
    height: 25%;
    display: inline-block;
}

#icons2 {
    position: relative;
    background: blue;
    width: 20%;
    height: 25%;
    display: inline-block;
}
/* etc */

You can add this in at the higher level (Icons) but if you're trying to do Windows style then you probably want more control over what and where breaks occur.

(hopefully I interpreted your question correctly!)

Upvotes: 2

Related Questions