Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    Regular Coder Psionicsin's Avatar
    Join Date
    Aug 2010
    Location
    Detroit, Michigan
    Posts
    349
    Thanks
    54
    Thanked 0 Times in 0 Posts

    Centering a div within a div

    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:
    Code:
    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:
    Code:
    <!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>
    Last edited by Psionicsin; 09-18-2011 at 01:09 AM.

  • #2
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,823
    Thanks
    42
    Thanked 199 Times in 198 Posts
    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)

    Code:
    <!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>
    Attached Thumbnails Attached Thumbnails Centering a div within a div-delete.jpg  

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • #3
    Regular Coder Psionicsin's Avatar
    Join Date
    Aug 2010
    Location
    Detroit, Michigan
    Posts
    349
    Thanks
    54
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by alykins View Post
    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.
    Last edited by Psionicsin; 09-18-2011 at 07:44 PM.

  • #4
    Regular Coder Psionicsin's Avatar
    Join Date
    Aug 2010
    Location
    Detroit, Michigan
    Posts
    349
    Thanks
    54
    Thanked 0 Times in 0 Posts
    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.

  • #5
    Regular Coder Psionicsin's Avatar
    Join Date
    Aug 2010
    Location
    Detroit, Michigan
    Posts
    349
    Thanks
    54
    Thanked 0 Times in 0 Posts
    Here's the new updated code. As you can see DIV#schedule (formally #slideshowHolder) is dragging everything down with it.

    HTML:
    Code:
    <!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:
    Code:
    /*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: ;
    }
    Attached Thumbnails Attached Thumbnails Centering a div within a div-screen-shot-2011-09-18-2.51.46-pm.png  
    Last edited by Psionicsin; 09-18-2011 at 07:52 PM.

  • #6
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,823
    Thanks
    42
    Thanked 199 Times in 198 Posts
    Quote Originally Posted by Psionicsin View Post
    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"
    I personally like to use the <hr/> tag along with some styling...
    Code:
    .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

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • #7
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,823
    Thanks
    42
    Thanked 199 Times in 198 Posts
    that is due to collapsing margins... add 1px of padding to the #content

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

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • #8
    Regular Coder Psionicsin's Avatar
    Join Date
    Aug 2010
    Location
    Detroit, Michigan
    Posts
    349
    Thanks
    54
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by alykins View Post
    that is due to collapsing margins... 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?

  • #9
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,823
    Thanks
    42
    Thanked 199 Times in 198 Posts
    Quote Originally Posted by Psionicsin View Post
    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

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • #10
    Regular Coder Psionicsin's Avatar
    Join Date
    Aug 2010
    Location
    Detroit, Michigan
    Posts
    349
    Thanks
    54
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by alykins View Post
    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
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •