SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Zealot
    Join Date
    Jan 2008
    Location
    Hot Springs, Montana
    Posts
    195
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    trying to understand float behavior

    I'm revisiting floats and positioning ... trying to get away from the blocky look I"ve created in my n00b site. In the process of making some adjustments, I've gotten myself re-confused re. floats and float behavior, and I wonder if someone could shine some light in my direction.

    In FF, when looking at a site I'm working on, I notice that (as usual) my vertical links on the left side of the page remain stationary in relationship to the browser window until the window is open to about 1,000 px (roughly the width of the div "page" plus a little margin or padding to the left). Then, the links move away from the edge of the window.

    May I ask someone to explain that behavior? I'm missing some piece of information that I'm sure is in front of me (Meyer and a couple of sitepoint books) but won't click.I'll drop in some html and css. I've left the skeleton and only one link ("home") out of three. Thanks for any help.
    Code HTML4Strict:
    <body>
    <div id="page">
    	<div id="container">
     
     
    		<!--  Beginning of Masthead Container  -->
    		<div id="masthead_container"> 
    		</div>
    		<!--  End of masthead_container  -->
    		<!-- Beginning of Left Side bar -->
    		<div id="lsidebar">
    			<div class="links_level_1">  
    			<ul>
    				<li class="linkstyles_en">
    					<a href="uif_index.html">
    						Home
    					</a>
    				</li>
    			</ul>
    			<br></br>
    			</div>
    		</div>
    		<!--  End of Left Sidebar  -->	
    		<!-- Beginning of Main Content -->	
    		<div id="maincontent">
    		</div>
    		<!-- End of Main Content -->
    		<!-- Beginning of Right Image Bar -->
    		<div id="rsidebar">
     
    		</div>
    		<!--   End of Right Image Bar -->
    		<!--   Beginning of Footer   -->
    		<div id="footer">
    		</div>
    		<!--    End of Footer   -->	
    	</div>
    	<!--   End of Container Div    -->
    </div>
    <!-- End of Page Div -->
    </body>
    Code CSS:
    body {
    	text-align: center;
    	background-image: url(wui_3.jpg);
    	background-color: #808080;
    	background-position: top left;
    	}
    body * {text-align: left; 
    	}
    #container {
    	width: 1000px; 
    	}
    div#page {
    	width: 1000px;
    	margin: auto;
    	}
    /*   Masthead Related   */
    #masthead_container {
    	margin-top: 10px;
    	width: 100%;  
    	overflow: auto;
    	/*background: #ccc url(background_mast.jpg);*/
    	/* background-color: #BDB76B;  */
    	padding-bottom: 10px;
    	}
    /* End of Masthead Related */
    /* Left Sidebar Related */
    #lsidebar {
    	float: left;
    	width: 200px;
    	padding-top: 80px;
    	padding-bottom: 20px;
    	/*background-color: PaleGoldenrod; 	eee8aa  */
    	font: 65%  helvetica, verdana, arial, sans-serif; 
    	color: #800000;
    	list-style-type: none;
    	}
    .linkstyles_en {
    	list-style-type: none;
    	margin-top: 0px;
    	margin-left: -15px;
    	padding-top: 4px;
    	padding-right: 20px;
    	padding-bottom: 10px;
    	padding-left: 0px;
    	}
    /*  End of Left Sidebar Related */		
    /* Main Content Related */
    #maincontent {
    	float: left;
    	width: 544px;
    	margin-bottom: 0px;
    	padding-bottom: 5px;
    	padding-right: 8px;
    	font: 85% verdana, arial, sans-serif;
    	color: #000033;
    	}
    /*   End of Main Content   */
    /*   Beginning of Right Sidebar   */
    #rsidebar{
    	background-color: silver; #C0C0C0;
    	float: left;
    	width: 220px;
    	overflow: hidden;
    	}
    /*  End of Right Sidebar   */
    /*  Beginning of Footer   */
    #footer 
    	{
    	clear: both;
    	background: #ccc url(rotten_log.jpg);
    	/*background-color: #BDB76B;*/
    	padding-right: 50px;
    	height: 148px;
    	font: bold 55% verdana, sans-serif;
    	line-height: 1.5em;
    	text-align: center;
    	}
    /*  End of Footer   */
    /*  Pseudoselectors for links   */

  2. #2
    SitePoint Zealot
    Join Date
    Jan 2008
    Location
    Hot Springs, Montana
    Posts
    195
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I walked though it again and I see what's going on.

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,708
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    This is my guess (just skimmed through your code), you set the wrapping divs to 1000px and you centered it so when the browser window is greater then that it will center itself amoung the page because of the margin:auto; you declared.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  4. #4
    SitePoint Zealot
    Join Date
    Jan 2008
    Location
    Hot Springs, Montana
    Posts
    195
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ryan, I think that you're right.

    On another issue, I'm still trying to figure out why I inserted the "body *" rule instead of putting the "text-align: left" statement inside the "body" rule, as I didn't write notes. I think it was in response to a suggestion... but I don't know why nor remember from whom. So... I've switched it around (eliminating body*) and it seems to work....

    However, what would be the difference between "body" and "body *""? Why would one put in a universal selector like that? Any clue?

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,708
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    Most of the time it is to cate for IE5 because to center the site in IE5 you need to add text-align:center; to the body element and then add text-align:left; to ste the text only to the left.

    Antoher reason is to just reset the margins and paddings for every child of the body element (body *{}).

    body{} selects the body element only
    body *{} selects every child of the body element but just about anything can override it.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  6. #6
    SitePoint Zealot
    Join Date
    Jan 2008
    Location
    Hot Springs, Montana
    Posts
    195
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for this note and help with understanding!

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,708
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    Your welcome . If you have any more questions just ask.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


Bookmarks

Posting Permissions

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