CODEWITHSUNDEEP
htmlcssframecentering
urschman
urschman

Reputation: 13

How to center a frame div inside the page container

Hello I have a question about centering a frame div inside a parent div. I would like to center the frame inside the page, which is 70% wide, but I just cant make it work. I woud like the frame to be inside the parent div WRAP and the WRAP div inside the MAINWRAPPER which is 70% wide.

Please help :)

html{ 
		background-color:#EEE;
		font-family: 'Lato',Calibri,Arial,sans-serif;
		font-size:16px;
		color:#888;}
body{
		position:absolute;
		width:100%;	
		margin:0px;
		padding:0px;
}
#MAINWRAPPER {
		min-height:100%;
		position:absolute;
		right: 0;
    	left: 0;
    	margin:0 auto;
		padding:0;
		width:70%; /* page width */	
        background-color: #39f;
        border:1px solid #959595;
        }
#WRAP {
        position:relative;
		display:block;
		margin:0 auto;
        border:1px solid red;
}
.frame {
        width:100%;
        height:300px;
		position:relative;
		float:left;
		background-color:#fff;
		display:block;
		border:1px solid #959595;
		border-radius:4px;
		text-align:center;
		margin:2%;
}	
.frame a{
		display:block;
		width:100%;
		height:100%;
		color:#333;
		}		
.frame a:hover{
		display:block;
		color:#FFF;
	}
.title {
		display:block;
		position:absolute;
		overflow:hidden;
		top:0;
		background-color:#ccc;
		padding:3px 0;
		width:100%;
		height:auto;
		border-bottom:1px solid #959595;}
		
div.price {
	display: block;
	position: absolute;
	bottom: 1px;
	right: 0;
	height: 1.6em;
	width: 3em;
	background-color: #33CCFF;
	border-radius:5px;
	border:2px solid #FFF;
	color:#FFF;
	font-size:1.2em;
	font-weight:bold;
	text-align:center;
}
<body>
<div id="MAINWRAPPER">
    <div id="WRAP">
  <div class="frame"><a href="#">
  <object class="title">TITLE</object></a><div class="price">50</div></div>
</div>
</div>
</div>    
</body>

Upvotes: 1

Views: 1997

Answers (2)

Tshni Music
Tshni Music

Reputation: 9

How to center a div inside a page container in your HTML page :-

Just add following bootstrap class to do this in your HTML page :-

text-center col-md-offset-2

Description :-

Here offset value is the margin from the left hand side so by increasing decreasing the value of the offset you can set the margin.

Upvotes: -1

G.L.P
G.L.P

Reputation: 7207

Remove width and float from .frame and try like this: Demo

.frame {
    height:300px;
    position:relative;
    background-color:#fff;
    display:block;
    border:1px solid #959595;
    border-radius:4px;
    text-align:center;
    margin:2%;
}

Upvotes: 2

Related Questions