CODEWITHSUNDEEP
htmlcss
Ilwan
Ilwan

Reputation: 55

Width 100% is larger than the screen size

I have a div which is directly child of the body which has "witdh: 100%". But it is larger than the real screen size. Of course the body and html tags have also "width 100%". Any idea?

Code : Fiddle

<div id="main-wrapper">
    <div id="text"></div>
    <div id="controlButtons">
        <div id="left-button" class="disabled">
            <div id="triangle-left"></div>
            <button class="previous-button button">Pr&eacute;c&eacute;dent</button>
        </div>
        <div id="page-number-display"><span id="page-number"></span>/8</div>
        <div id="right-button">
            <button class="next-button button">Suivant</button>
            <div id="triangle-right"></div>
        </div>
    </div>
</div>

Thanks!

Upvotes: 5

Views: 7374

Answers (4)

Johannes
Johannes

Reputation: 67748

Add box-sizing: border-box; to #main-wrapper - that fixes it.

#main-wrapper has 100% width PLUS 15px padding, which is more than 100%. box-sizing: border-box; includes the padding in the width.

https://jsfiddle.net/tx9wLb40/

Upvotes: 2

Masoud
Masoud

Reputation: 333

Change the style for your main-wrapper ID to:

#main-wrapper {
    width: 100%;
    position: absolute;
    top: 150px;
    left: 0px;
    background-color: #848484;
    padding: 15px;
    border-radius: 10px;
    box-sizing: border-box;
}

Upvotes: 2

Dasar
Dasar

Reputation: 360

Your problem occurs because your browser, by default, doesn't take into account values of border and padding when calculating the width. So it renders it as the value you've given, 100%, plus any padding and border values.

To fix this, add box-sizing: border-box to #main-wrapper. This will ensure that padding and border values will be included when calculating width

Upvotes: 0

Michael Coker
Michael Coker

Reputation: 53664

As others have said, it's the box model pushing the width beyond the declared width. Instead of using width: 100%, since your element is absolutely positioned, you can use left: 0; right: 0; and the item will span 100% width responsively without having to declare a width or your padding pushing the box model beyond 100%.

html,
body {
	width: 100%;
	height: 100%;
	padding: 0px;
	margin: 0px;
}

html {
	background-color: #1C1C1C;
}
body {
	font-family: "Arial";
	-webkit-user-select: none;
	   -moz-user-select: none;
	    -ms-user-select: none;
	        user-select: none;
}

#controlButtons {
	display: flex;
	justify-content: space-around;
}

.button {
	height: 35px;
	width: 85px;
	background-color: #1C1C1C;
	font-weight: 600;
	color: lightgrey;
	border:none;
	cursor: pointer;
	outline: none;
}

.next-button {
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
}

.previous-button {
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px; 
}
#triangle-right {
	position: relative;
	left: -3px;
	top: 0.45px;
	background-color: #1C1C1C;
	text-align: left;
	display: inline-block;
	cursor: pointer;
}

#triangle-right:before,
#triangle-right:after {
	content: "";
	position: absolute;
	background-color: inherit;
}

#triangle-right,
#triangle-right:before,
#triangle-right:after {
	width: 1.178em;
	height: 1.178em;
	border-top-right-radius: 20%;
}

#triangle-right {
	transform: rotate(-90deg) skewX(-30deg) scale(1,.866);
}

#triangle-right:before {
	transform: rotate(-135deg) skewX(-45deg) scale(1.414,.707) translate(0,-50%);
}

#triangle-right:after {
	transform: rotate(135deg) skewY(-45deg) scale(.707,1.414) translate(50%);
}

#triangle-left {
	position: relative;
	right: -3px;
	top: 0.45px;
	background-color: #1C1C1C;
	text-align: left;
	display: inline-block;
	cursor: pointer;
}

#triangle-left:before,
#triangle-left:after {
	content: "";
	position: absolute;
	background-color: inherit;
}

#triangle-left,
#triangle-left:before,
#triangle-left:after {
	width: 1.178em;
	height: 1.178em;
	border-top-right-radius: 20%;
}

#triangle-left {
	transform: rotate(-30deg) skewX(-30deg) scale(1,.866);
}

#triangle-left:before {
	transform: rotate(-135deg) skewX(-45deg) scale(1.414,.707) translate(0,-50%);
}

#triangle-left:after {
	transform: rotate(135deg) skewY(-45deg) scale(.707,1.414) translate(50%);
}

#main-wrapper {
	position: absolute;
	top: 150px;
	left: 0;
  right: 0;
	background-color: #848484;
	padding: 15px;
	border-radius: 10px;
}

.disabled {
	opacity: 0.2;
}

.disabled:hover {
	background-color: inherit;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<body>
		<div id="main-wrapper">
			<div id="text"></div>
			<div id="controlButtons">
				<div id="left-button" class="disabled">
					<div id="triangle-left"></div><button class="previous-button button">Pr&eacute;c&eacute;dent</button>
				</div>
				<div id="page-number-display"><span id="page-number"></span>/8</div>
				<div id="right-button">
					<button class="next-button button">Suivant</button><div id="triangle-right"></div>
				</div>
			</div>
		</div>
	</body>

Upvotes: 2

Related Questions