...

View Full Version : Centering a div within a div



Psionicsin
09-18-2011, 01:56 AM
For some reason I can NEVER remember how to do this. I have no idea why.

The div#content isn't centering for some reason. When I remove the float it does, but I'm pretty sure I have to have that float there or else the div#slideshowHolder likes to apply it's margin settings to that as well.

This is my current css:

body {
background-color: #000000;
margin: 0;
padding: 0;
}

#container {
width: 100%;
margin: 0;
padding: 0;
}

#content {
float: left;
width: 960px;
height: 720px;
background-image: url("images/background.jpg");
background-repeat: no-repeat;
margin: 0 auto ;
}

/*IMAGE SLIDER
********************************************************/

#slideshowHolder {
border: 3px #000000 solid;
margin: 240px auto 0 auto;
padding: 0;
}


And my current HTML:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Nightclub</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script src="js/jqFancyTransitions.1.8.min.js" type="text/javascript"></script>
</head>

<body>
<div id="container">
<div id="content">
<div id="slideshowHolder">
<img src="images/slide1.jpg" alt="Monday" />
<img src="images/slide2.jpg" alt="Tuesday" />
<img src="images/slide3.jpg" alt="Wednesday" />
<img src="images/slide4.jpg" alt="Thursday" />
<img src="images/slide5.jpg" alt="Friday" />
<img src="images/slide6.jpg" alt="Saturday" />
<img src="images/slide7.jpg" alt="Sunday" />
</div>
</div>
</div>
</body>

<script type="text/javascript">
$('#slideshowHolder').jqFancyTransitions({
width: 618,
height: 246,
effect: 'curtain',
navigation: true,
links: false
});
</script>
</html>

alykins
09-18-2011, 04:01 AM
it is because of the float set to the content div. When you set float it is now floating outside of normal flow.... if you add float to the container then you remove it from the normal flow as well and then it will work... the margins though should not be an issue I SS it for you and made changes to your code for easy color see-able _______ (idk what word to put in there)



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
}

#container {
width: 100%;
margin: 0px;
padding: 0px;
background:blue;
}

#content {
width: 960px;
height: 720px;
margin: 0 auto ;
background:orange;
}

#slideshowHolder {
border: 3px #000000 solid;
margin: 240px auto 0 auto;
padding: 0;
background:red;
}

</style>

</head>

<body>
<div id="container">
<div id="content">
<div id="slideshowHolder">sample text</div>
</div>
</div>
</body>
</html>

Psionicsin
09-18-2011, 08:41 PM
it is because of the float set to the content div. When you set float it is now floating outside of normal flow.... if you add float to the container then you remove it from the normal flow as well and then it will work... the margins though should not be an issue I SS it for you and made changes to your code for easy color see-able _______ (idk what word to put in there)

Thank you for that. So...when IS IT a good time to use floats? I understand what they do, but never understand WHEN to use them.

Psionicsin
09-18-2011, 08:45 PM
And, also, I'm still having the issue to where DIV#slideshowHolder is applying it's margin to the whole project instead of just itself.

Psionicsin
09-18-2011, 08:49 PM
Here's the new updated code. As you can see DIV#schedule (formally #slideshowHolder) is dragging everything down with it.

HTML:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Nightclub</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>

<body>
<div id="container">
<div id="content">
<div id="schedule">
<img src="images/monday.jpg" alt="Monday" />
<img src="images/tuesday.jpg" alt="Tuesday" />
<img src="images/wednesday.jpg" alt="Wednesday" />
<img src="images/thursday.jpg" alt="Thursday" />
<img src="images/friday.jpg" alt="Friday" />
<img src="images/saturday.jpg" alt="Saturday" />
<img src="images/sunday.jpg" alt="Sunday" />
</div>
</div>
</div>
</html>

CSS:

/*Reset Styles
********************************************************/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin:0;
padding:0;
border:0;
outline:0;
font-weight:inherit;
font-style:inherit;
font-size:100%;
font-family:inherit;
vertical-align:baseline;
}

body {
width: 100%;
background-color: black;
margin: 0;
padding: 0;
}

#container {
width: 100%;
margin: 0px;
background-color: blue;
padding: 0px;
}

#content {
width: 960px;
height: 720px;
background-color: orange;
margin: 0 auto ;
padding: 0;
}

#schedule {
width: 618px;
border: 3px #000000 solid;
background-color: red;
margin: 240px auto 0 auto;
padding: 0;
}

/*WEEKLY SCHEDULE IMAGES
********************************************************/

#monday {
width: 618px;
height: 246px;
background-color: ;
}

#tuesday {
width: 618px;
height: 246px;
background-color: ;
}

#wednesday {
width: 618px;
height: 246px;
background-color: ;
}

#thursday {
width: 618px;
height: 246px;
background-color: ;
}

#friday {
width: 618px;
height: 246px;
background-color: ;
}

#saturday {
width: 618px;
height: 246px;
background-color: ;
}

#sunday {
width: 618px;
height: 246px;
background-color: ;
}

alykins
09-18-2011, 08:59 PM
Thank you for that. So...when IS IT a good time to use floats? I understand what they do, but never understand WHEN to use them.

for the most part you want to float your elements... the problem is moreover that you need to add in a "clearfix" (http://www.webtoolkit.info/css-clearfix.html)
I personally like to use the <hr/> tag along with some styling...


.hhr{clear:both; visibility:none;}

....
<hr class="hhr" />


but also keep in mind that margin:0px auto; won't center a floated element because it is floating

alykins
09-18-2011, 09:07 PM
that is due to collapsing margins (http://reference.sitepoint.com/css/collapsingmargins)... add 1px of padding to the #content

Note: look around figure four for area that specifies to your situation

Psionicsin
09-18-2011, 09:15 PM
that is due to collapsing margins (http://reference.sitepoint.com/css/collapsingmargins)... add 1px of padding to the #content

Note: look around figure four for area that specifies to your situation

I forgot about collapsing margins >_<! Is this is accepted way to handle them? Is there a way to circumvent them altogether?

alykins
09-18-2011, 09:22 PM
I forgot about collapsing margins >_<! Is this is accepted way to handle them? Is there a way to circumvent them altogether?

they will collapse vertically without padding or a border... I do not knwo of any other way to get around this... you might also be able to try modifing my hhr class to add in display:block; and then inserting that at the top... then the margin would go off of that (*******!!!!! Maybe, idk though)

on a side note...
I hope I am kinda-somewhat clear on the examples/explanations... sometimes I have a hard time translating what is in my head and explaining it properly :p

Psionicsin
09-18-2011, 09:26 PM
they will collapse vertically without padding or a border... I do not knwo of any other way to get around this... you might also be able to try modifing my hhr class to add in display:block; and then inserting that at the top... then the margin would go off of that (*******!!!!! Maybe, idk though)

on a side note...
I hope I am kinda-somewhat clear on the examples/explanations... sometimes I have a hard time translating what is in my head and explaining it properly :p

No you're doing a great job. It's true what they say about if you don't use it you lose it. I haven't had to do that in so long, so forgot all about it when it came time and internet explanations just weren't doing it for me lol.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum