I have a div that needs to be centered horizontally inside another div. The problem is that the inner div is almost centered - i.e., it is centered but with a left margin/padding (I can't determine which) of about 5-10px. How can I make the inner div centered within the outer div?
HTML:
<div class="outer">
<div class="inner">
// stuff
</div>
</div>
CSS:
.outer {
position:relative;
display:inline-block;
width:100%;
}
.inner {
position:relative;
padding:10px;
width:200px;
height:200px;
}
you could do something like this:
#parent {
display: table-cell;
width: 300px;
height: 300px;
vertical-align: middle;
text-align: center;
border: 1px solid black;
}
#child {
display: inline-block;
width:100px;
height: 100px;
border: 1px solid black;
}
here's a fiddle: http://jsfiddle.net/De36Y/
I would try to make the inner div have a position: absolute, then set margin equally like the following:
CSS:
.outer {
position:relative;
display:inline-block;
width:100%;
}
.inner {
position: absolute;
margin-left: auto;
margin-right: auto
width:200px;
height:200px;
}
On .inner use:
width: 50%;
margin: 0 auto;
You could do this
.outer {
position:relative;
display:inline-block;
width:100%;
text-align: center;
}
.inner {
position:relative;
display: inline-block;
padding:10px;
width:200px;
height:200px;
}
How about this code?
.inner {
position:relative;
padding:10px;
width:200px;
height:200px;
/* included */
left:50%;
margin-left:-100px;}
Related
I'm trying to make my footer stick to the bottom of the page but somehow it just can't do. I've looked in the internet for answers with no luck, so I decided to give it a shot in here.
http://jsfiddle.net/f54eq3w8/
html:
<div id="container">test</div>
<footer></footer>
css:
html{
height:100%;
position:relative;
min-height:100%;
}
body{
height:100%;
padding:0;
display:inline-block;
width:100%;
min-height:100%;
}
footer{
position:relative;
background-color:#003300;
color:red;
width:100%;
height:100px;
border-top:4px solid #B8B8B8;
}
#container{
width:1024px;
margin:auto;
margin-top:60px;
min-height:100%;
}
JSFiddle - DEMO
Use an extra div inside container to push the footer with the same height as footer's height and apply bottom margin the negative value of the footer's height to container.
HTML:
<div id="container">
<div class="footer-push">
</div>
</div>
<footer></footer>
CSS:
html, body {
background-color: #00FF00;
height: 100%;
margin: 0px;
}
#container {
z-index: 999;
background-color: #00FF00;
position: relative;
width: 1024px;
margin: 0 auto;
min-height: 100%;
margin: 0px auto -104px auto;
}
.footer-push {
position: relative;
height: 104px;
}
footer {
z-index: 99999;
position: relative;
height: 100px;
background-color: #003300;
width: 100%;
border-top:4px solid #B8B8B8;
}
change your CSS like this. Please note that besides the footer, I got rid of the html styling, which is the culprit of your issues
body{
height:100%;
padding:0;
display:inline-block;
width:100%;
min-height:100%;
}
footer{
position:absolute;
bottom:0;
background-color:#003300;
color:red;
width:100%;
height:100px;
border-top:4px solid #B8B8B8;
}
#container{
width:1024px;
margin:auto;
margin-top:60px;
min-height:100%;
}
See your updated fiddle
hi i would like to make full height for a left and side bars i must be 100% height but it made a little buggy my css looks like
html{
height: 100%;
min-height: 100%;
}
body{
height: 100%;
}
.container{
background-color: #999;
padding: 20px;
height:100%;
}
.sidebar{
background-color: #9999ff;
float:left;
width:30%;
height:100%;
}
.content{
background-color: #99ff99;
float:left;
width:70%;
height:100%
}
this is my fiddle
demo
if i did height:100% for childs means most of the contents are get overflowed.
display .container as table:
.container{
background-color: #999;
padding: 20px;
display:table;
height:100%;
}
.sidebar{
background-color: #9999ff;
display:table-cell;
width:30%;
}
.content{
background-color: #99ff99;
display:table-cell;
width:70%;
}
http://jsfiddle.net/56C9v/15/
i've updated your fiddle
HTML:
<div class="container">
<div class="wrapper">
<div class="sidebar"></div>
<div class="content"></div>
</div>
</div>
CSS:
html{
height: 100%;
min-height: 100%;
}
body{
height: 100%;
}
.container{
background-color: #999;
padding: 20px;
}
.wrapper {
position: relative;
}
.sidebar{
background-color: #9999ff;
float:left;
width:30%;
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
}
.content{
width: 70%;
background-color: #99ff99;
float:right;
}
Problem
I have "boxes" that float left so that I can display them in a line until they need to wrap. This works well, but my coloured background doesn't shrink to the minimum, it expands to the maximum.
JSFiddle
http://jsfiddle.net/RLRh6/
(Expand and shrink the Result section to see the effect)
HTML
<div class="container">
<div class="boxes">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
CSS
.container {
background: #fcc;
margin: 0 auto;
max-width: 300px;
}
.boxes {
background: #cfc;
overflow: hidden;
}
.box {
border: 1px dashed blue;
width: 70px;
height: 50px;
float: left;
margin: 2px;
}
What I Get
Note the extra green colour, right of the boxes:
Example 1
Example 2
What I Want
Example 1
Example 2
Question
Is it possible to have the green-background div (".boxes") shrink to the minimum possible size to display the boxes without Javascript? You should be able to shrink and expand the div freely and not see any green to the right of the boxes.
Working DEMO http://jsfiddle.net/RLRh6/56/
If you want to achieve this only with html, css, should use media queries.
CSS
.container {
margin: 0 auto;
min-width: 76px;
max-width: 228px;
}
#media only screen and (min-width: 76px) {
.boxes {
float:left;
background: #cfc;
width: 76px;
}
}
#media only screen and (min-width: 152px) {
.boxes {
float:left;
background: #cfc;
width: 152px;
}
}
#media only screen and (min-width: 228px) {
.boxes {
float:left;
background: #cfc;
width: 228px;
}
}
.boxes {
float:left;
background: #cfc;
}
.box {
border: 1px dashed blue;
width: 70px;
height: 50px;
float: left;
margin: 2px;
}
Remove the min-width from the .container and add display:inline-block;
also if you want to center the .container then wrap the .container with a div and apply text-align:center to it.
.container {
background: #fcc;
margin: 0 auto;
display:inline-block;
}
jsFiddle Link
your container will wrap if there's a clear 'break to next line'.
Here is a pen to see different test, just set via CSS how many per line.
3.2.1 is that what you want ?
http://codepen.io/gcyrillus/pen/gHwjz
.container {
background: #fcc;
margin: 0 auto;
max-width:300px;
}
.container.table {
display:table;
}
.boxes {
background: #cfc;
display:inline-block ;/* or float */
vertical-align:top;
}
.box {
border: 1px dashed blue ;
width: 70px;
height: 50px;
float:left;
margin: 2px;
}
/* ====== test */
.container {clear:left;margin:1em auto;}
.container.inline-block {
display:inline-block;
}
.container.table {
display:table;
}
.container.float {
float:right
}
section {
width:450px;
margin:auto;
padding:0.5em 1.5em;
background:#ddd;
overflow:hidden;
}
.container:before { /* see classes */
content:attr(class);
display:block;
position:absolute;
margin-top:-1.2em;
}
/* wrap to next-line */
.float .box:nth-child(1n) {
clear:left;
}
.inline-block .box:nth-child(4n) {
clear:left;
}
.table .box:nth-child(odd) {
clear:left;
}
I have done little bit changes in your css, check the jsFiddle link here if it works for you.
Followings are the css chagnes:
.container {
background: #fcc;
margin: 0 auto;
max-width: 300px;
}
.boxes {
background: #cfc;
overflow: hidden;
padding:2px;
}
.box {
border: 1px dashed blue;
width: 70px;
height: 50px;
float: left;
margin: 0 2px 2px 0;
}
Take a look at this image...
All of the boxes are divs. How can I position them like that? Here's what I got so far...
#container{
position:relative;
padding:25px;
}
#div1 {
float:left;
margin-left: 50px;
margin-top: 50px;
width: 300px;
padding:25px;
}
#div2 {
clear:both;
margin-left: 50px;
width: 300px;
padding:25px;
}
#div3 {
float:right;
margin-right: 50px;
margin-top: -100px;
width: 300px;
padding:25px;
}
With the code above..div1 and div2 is position properly somehow. But div3 is on the lower part of the page.
I would float:right div3 and have it first in your HTML and then just have div1 and div2 not floated.
Something like this: http://jsfiddle.net/eErVT/
...or you could wrap div1 and div2 in its own wrap, and float that.
Wrap your left divs in a single column. So your markup would look something like this:
<div id="container">
<div id="main">
<div id="div1">div1</div>
<div id="div2">div2</div>
</div>
<div id="div3">div3</div>
</div>
Then your css would look like this:
#container{
position:relative;
padding:25px;
}
#main {
float:left;
width:100px;
}
#div1 {
padding:25px;
}
#div2 {
padding:25px;
}
#div3 {
float:right;
width: 100px;
padding:25px;
}
Here's an example fiddled: http://jsfiddle.net/neilheinrich/ez2rQ/
An alternate that doesn't require adding extra divs is to use absolute positioning on div3, along with extra padding on container to create space for div3.
See the fiddle here: http://jsfiddle.net/y2fJS/
CSS:
div {
border: 1px solid blue;
}
#container{
position:relative;
border-color: green;
padding: 50px 200px 50px 50px; /* right padding (150) should include div3 width+padding+margin */
}
#div1 {
padding:25px;
}
#div2 {
padding:25px;
}
#div3 {
position: absolute;
top: 50px;
right: 50px;
width: 50px;
padding:25px;
}
EDIT: One problem I forgot to mention is that the absolutely positioned div3 will no longer contribute to the height of the outer div. So, if you have a long div3 this may not work without some additional trickery.
Here this looks like your picture, but i would suggest looking at sites like http://www.cssplay.co.uk/ for site design.
<html>
<head>
<title>Div Positioning</title>
<style type='text/css'>
#div1
{
position: absolute;
top: 25px;
left: 25px;
height: 200px;
width: 200px;
border: 1px solid red;
}
#div2
{
position: absolute;
top: 250px;
left: 25px;
height: 200px;
width: 200px;
border: 1px solid red;
}
#div3
{
position: absolute;
top: 25px;
left: 250px;
height: 425px;
width: 300px;
border: 1px solid red;
}
</style>
</head>
<body>
<div id='div1'></div>
<div id='div2'></div>
<div id='div3'></div>
</body>
</html>
Div with min-height and the child div have the height of parent.
Is it possible with only CSS or javascript is needed?
Example:
#main {
min-height: 300px;
width: 100%;
}
#menu, #content {
float: left;
width: 50%;
}
#menu {
height: 150px;
background-color: red;
}
#content {
height: 100%;
background-color: green;
}
<div id="main">
<div id="menu">menu</div>
<div id="content">content</div>
<div>
may be you can give position:absolute to your content div to make it's equal height of it's parent
css:
#main {
min-height: 300px;
width: 100%;
position:relative;
background-color: yellow;
}
#menu, #content {
float: left;
width: 50%;
overflow:hidden;
}
#menu {
height: 150px;
background-color: red;
}
#content {
height: 100%;
background-color: green;
position:absolute;
top:0;
right:0;
}
check this http://jsfiddle.net/sandeep/hKttB/
EDIT
there are other option also . You can give min-height to your content div also if the content increase the height of the main div also increase.
#content {
height: 100%;
min-height:300px;
background-color: green;
}
check this fiddle http://jsfiddle.net/sandeep/SRJrF/2/
I would try this:
In this case I forced same min height for the child div when there is less content.
If content exceeds, the automatic overflow.
#content {
min-height: 300px;
overflow:auto;
background-color: green;
}
This is how we have content div in our nested master page.
Hope same will work for you.
Thanks
i think its not possible.
but you can try something like this. jsFiddle
#main {
width: 100%;
height:300px;
min-height:300px;
}
#menu,
#content{
float: left;
display:inline;
width: 50%;
position:relative;
}
#menu {
height: 150px;
background-color: red;
}
#content {
height: 100%;
background-color: green;
}
also please read this min-height
regarding min-height.