CODEWITHSUNDEEP
css
Irvin Dominin
Irvin Dominin

Reputation: 30993

Inner element overlap a parent sibling

I have a div that contains an ul and some li. The li are styled to display them as a list. In the left of the wrapping div there is a floating div.

I can't understand why the li can overlap the floating div, I checked the display, border-box property and so on, but I have no clues.

Screen:

enter image description here

div.myDropdown {
	position: relative;
	display: inline-block;
	font-size: 13px;
	zoom: 1;
	*display: inline;
	-webkit-user-select: none;
	   -moz-user-select: none;
		    user-select: none;
}
div.myDropdown * {
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
		    box-sizing: border-box;		
}
div.myDropdown  div.mySelect {
	width: 100%;
	height: 24px;
	border: 1px solid #4195fc;
	border-radius: 6px;
	box-shadow: 0px 0px 4px #4195fc; 
	padding-top: 2px;
	padding-bottom: 2px;
	height: 100% !important;
}


div.myDropdown>a div.myArrow {
	position: absolute;
	top: 2px;
	right: 0;
	display: block;
	width: 18px;
	height: 100%;
}
div.myDropdown>a div.myArrow.myArrowDown::before {
    font-family: FontAwesome;
    content: "\f078";
    font-size: 17px;
	color: #999;
}
div.myDropdown  ul.mySelection {
	display: inline;
	list-style-type: none;
	padding: 0;
}
div.myDropdown  div.mySelect ul.mySelection>li {
	display: inline-block;
	border: 1px solid #4195fc;
	margin: 2px;
	border-radius: 3px;
	padding-left: 2px;
	padding-right: 2px;
}
div.myDropdown  div.mySelect ul.mySelection>li>span.myDeselect::before {
	font-family: FontAwesome;
    content: "\f00d";
    font-size: 10px;
	padding-left: 2px;
	padding-right: 2px;
}
<div class="myDropdown" style="width: 296px;"><a><div class="mySelect myMultiple"><span class="myValue" style="display: none;"></span><div class="myArrow myArrowDown"></div><ul class="mySelection"><li data-val="CL">Chile<span class="myDeselect"></span></li><li data-val="CN">China<span class="myDeselect"></span></li><li data-val="CX">Christmas Island<span class="myDeselect"></span></li><li data-val="CC">Cocos (Keeling) Islands<span class="myDeselect"></span></li><li data-val="CG">Congo<span class="myDeselect"></span></li><li data-val="CO">Colombia<span class="myDeselect"></span></li></ul></div></a></div>

Demo: http://jsfiddle.net/IrvinDominin/aoro5pas/

Upvotes: 2

Views: 599

Answers (3)

David Taiaroa
David Taiaroa

Reputation: 25495

Browser defaults could be an issue here as well.

For consistent cross browser results it wouldn't hurt to start with a browser CSS reset. Using normalize.css with your HTML and CSS code unchanged, here's what I get:
http://jsfiddle.net/panchroma/2xs1u941/1/

Easy to check, add the following to your head

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.2/normalize.min.css">

Normalize.css

Upvotes: 0

Jackson
Jackson

Reputation: 3518

I presume the div you are talking about is '#myArrow'? This div is styled with position:absolute which means other components will overlap it. See this

I would put

padding-right: 20px;

on the container div to prevent overlapping

Upvotes: 2

Pattle
Pattle

Reputation: 6016

It's because you .myArrow div is positioned absolute with a width of 18px. You ul has a width of 100% so it doesn't account for these 18px. You could do

div.myDropdown ul.mySelection {
    display: inline-block;
    list-style-type: none;
    padding: 0;
    width: calc(100% - 18px); /*Reduce the ul width by 18px so avoid overlapping*/
}

Or another solution is to add margin or padding to your ul

div.myDropdown ul.mySelection {
    display: inline-block;
    list-style-type: none;
    /*Add either of these 2 */
    padding: 0 18px 0 0;
    margin: 0 18px 0 0;
}

Upvotes: 2

Related Questions