CODEWITHSUNDEEP
htmlcss
Anurag Awasthi
Anurag Awasthi

Reputation: 6223

margin-right is not showing

Below is my CSS and HTML code. As you can see the margin on right is not coming.

  1. Can anybody tell me the reason for this?
  2. Is the structure of HTML, CSS right? I have to show two windows in the middle of the page and a footer and a header. So, I have positioned everything absolute.

Is that correct practice?

*{
    margin:0;
    padding: 0;
    box-sizing: border-box;
}

body{
    min-height: 100vh;
    min-width: 100vh;
}

.wrapper{
    position: absolute;
    top: 0%;
    bottom: 0%;
    left: 0%;
    right: 0%;
    background-color: #666;
    overflow-x: hidden;
}

.header{
    position: absolute;
    margin: 0;
    top: 0%;
    height: 10%;
    width: 100%;
    background-color: #fff;
}

.footer{
    position: absolute;
    bottom: 0%;
    height: 10%;
    width: 100%;
    background-color: #f7f7f7;
}

.header .brand-header{

}

.window{
    position: absolute;
    width: 100%;
    top: 10%;
    bottom: 10%;
    background-color: #eee;
    margin: 10px;
}
<!DOCTYPE html>
<html>
<head>
    <title>Layout</title>
</head>
<body>

<div class="wrapper">
    <div class="header"> </div>

    <div class="window">
        <div class="sub-window left-window"> </div>
        <div class="sub-window right-window"> </div>
    </div>

    <div class="footer"> </div>
</div>
</body>
</html>

Upvotes: 0

Views: 81

Answers (2)

ADH - THE TECHIE GUY
ADH - THE TECHIE GUY

Reputation: 4373

that is just because your width is 100% and you applied an margin of 20 px(margin-left:10,margin-right:10) => in effect it requires space of 100% + 20px. that is the reason for you can trace out margin on your right side.

use width: calc(100% - 20px); on your .window ,it will works fine.

*{
	margin:0;
	padding: 0;
	box-sizing: border-box;
}

body{
	min-height: 100vh;
	min-width: 100vh;
}

.wrapper{
	position: absolute;
	top: 0%;
	bottom: 0%;
	left: 0%;
	right: 0%;
	background-color: #666;
	overflow-x: hidden;
  
}

.header{
	position: absolute;
	margin: 0;
    top: 0%;
    height: 10%;
    width: 100%;
    background-color: #fff;
}

.footer{
	position: absolute;
	bottom: 0%;
	height: 10%;
	width: 100%;
	background-color: #f7f7f7;
}

.header .brand-header{

}

.window{
	position: absolute;
	width: calc(100% - 20px);
	top: 10%;
	bottom: 10%;
	background-color: #eee;
	margin: 10px;
}
<!DOCTYPE html>
<html>
<head>
	<title>Layout</title>
</head>
<body>

<div class="wrapper">
	<div class="header">
	</div>

	<div class="window">
		<div class="sub-window left-window">
			
		</div>
		<div class="sub-window right-window">
			
		</div>

	</div>

	<div class="footer">
		
	</div>
</div>

</body>
</html>

Upvotes: 1

Lalji Tadhani
Lalji Tadhani

Reputation: 14149

Apply width calc like

.window {
    background-color: #eee;
    bottom: 10%;
    margin: 10px;
    position: absolute;
    top: 10%;
    width: calc(100% - 20px); /*You apply margin:10px;*/
}

Upvotes: 1

Related Questions