How to position an element dead center in fluid layout with variable height?
Need to position box-inside div dead center to the wrapper div, where the
wrapper div's height depends on the sidebar div height. The box-inside div
was positioned absolute in relative to the wrapper div, and sets a
variable width and height which is respective to the images and content
inside it.
This can be accomplish by giving width and height to the box-inside div,
but have to do with variable width and height.(the box-inside div have to
be in same dimension as the img with padding)
The jsFiddle code here
This is the HTML code:
<body>
<div class="wrapper">
<div class="sidebar"></div>
<div class="inside-box">
<img src="badge.gif" />
</div>
</div>
</body>
The CSS
* {
margin: 0;
}
html,body {
height: 100%;
}
body {
background: white;
display: block;
font-family: Tahoma, Geneva, sans-serif;
margin: 0;
padding: 0;
}
.wrapper {
position:relative;
height: auto;
width:70%;
margin: 0 auto ;
background:green;
}
.sidebar {
height: 500px;
width:30%;
background: red;
clear:both;
}
.inside-box {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background:yellow;
min-width:275px; min-height:183px;
padding:10px;
}
Currently
Expected Output
No comments:
Post a Comment