SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    one section not floating properly

    Hi all, I'm trying to get a div of four thumbnails to float to the right underneath a bigger image but the div or the thumbnails in it keep floating to the left. I'm also trying to get the little caption to show up underneath the image, but it usually just moves to the right on bigger monitors. I've been reading up on floats and how the parent element's width needs to be stated explicitly, but it doesn't seem to work, and I'm getting confused now between SP and the other tutorial sites, and I'm running out of time. I would really appreciate any help on this.

    Here's the CSS minus properties for color or elements not on this page:
    Code:
    html, * { margin: 0;}
    
    body {
    	background: #fcfcf7;
    	color: #000;
    	font-size: 76%;
    	font-family: Garamond, Baskerville, Georgia, Caslon, "Adobe Caslon", "Times New Roman", Times, serif;
    }
    
    p {
    	margin-bottom: 1em;
    }
    img {
    	float: left;
    	margin-right: 10px;
    }
    #wrapper {
    	margin: 1em auto;
    	position: relative;
    }
    #header {
    	margin-top: 1em;
    	border-bottom: 1px solid #CCCCCC;
    }
    #header h1 {
    	margin:1em;
    	font-style: italic;
    	letter-spacing: .25em;
    }
    #header #nav {
    	margin: 0 0 -.25em;
    	list-style: none;
    	padding: 0 2em;
    	font-family: Arial, Helvetica, sans-serif;
    	text-align:right;
    }
    #header #nav li {
    	display:inline;
    	margin: 0 12px 0;
    	font-size: 0.85em;
    	font-weight: bold;
    }
    
    #main {
    	margin: 1em auto;
    	position: relative;
    	width: 85%;
    	max-width: 1020px;
    	padding-bottom:2em;
    	top:0;
    	left: 0;
    	overflow: auto;
    }
    .clear {
    	font-size: 1px;
    	height: 1px;
    	margin-top: 2em;
    }
    #content {
    	margin: 0 0 0 11em;
    	padding: 1em;
    	background: #f9f0f0;
    	position: relative;
    	overflow: auto;
    }
    
    #sidebar {
    	position: absolute;
    	top: 0;
    	left: 0;
    	margin: 0;
    	padding: 1em .5em 1em 1em;
    	width: 9.25em;
    	max-width: 11em;
    	background: #f0f0f9;
    	z-index:10;
    }
    #sidebar ul {
    	list-style: none;
    	margin: 0px;
    	padding: 0px;
    }
    #sidebar li {
    	line-height: 2.5em;
    }
    
    #footer {
    	position:relative;
    	font-size: 0.85em;
    	color: #ababab;
    	text-align: center;
    	border-top: 1px dashed #CCCCCC;
    	padding: 5px;
    	margin: 2em 1em 1em;
    	clear: both;
    }
    #footer p {
    	margin-top: 10px;
    }
    
    #portfoliohomelist {
    	position: relative;
    	list-style: none;
    	margin: 0;
    	padding: 0;
    }
    #portfoliohomelist li {
    	padding: 1em 1em 2em;
    	float: left;
    	width: 160px;
    	font-size: 1.25em;
    }
    #portfoliohomelist li a {
    	text-align: center;
    	display: block;
    	padding-bottom: 315px;
    }
    #portfoliohomelist li#painting {
    	background:   url() no-repeat 50% 3em;
    }
    #portfoliohomelist li#worksonpaper {
    	background:   url() no-repeat 50% 3em;
    }
    #portfoliohomelist li#multimedia {
    	background:   url() no-repeat 50% 3em;
    }
    #portfoliohomelist li#archives {
    	background:   url() no-repeat 50% 3em;
    }
    #thumbnails {
    	clear: both;
    	width: 80%;
    	float: right;
    	padding: 5px;
    	margin: 5px;
    }
    .caption {
    	font-size: .9em;
    	margin: 5px;
    	clear: both;
    }
    Here's the HTML:
    Code:
    <body>
    	<div id="wrapper">
    		<!-- Begin HEADER AND NAV -->
    		<div id="header">
    			<h1><a href="../index.html">blah blah blah</a></h1>
    			<ul id="nav">
    				<li><a href="../resume.html">The Artist</a></li>
    				<li><a href="index.html">Portfolio</a></li>
    				<li><a href="../news.html">News</a></li>
    				<li><a href="../service.html">Service</a></li>
    				<li><a href="../links.html">Links</a></li>
    				<li><a href="../contact.html">Contact</a> </li>
    			</ul>
    		</div><!-- End HEADER AND NAV -->
    		<div id="main"><!-- Begin MAIN -->
    	    	<!-- InstanceBeginEditable name="maincontent" -->
    				
    				<div id="content">
                    	<h2>Archives</h2>
                    	<p><img src="" alt="" name="bigimage" width="357" height="480" id="bigimage" /> </p>
    					<p class="caption">title, medium, dimensions, date</p>
    				</div>
    				<div id="thumbnails">
    					<img name="thumb" src="" width="89" height="120" alt="" />
    					<img name="thumb" src="" width="120" height="92" alt="" />
    					<img name="thumb" src="" width="87" height="120" alt="" />
    					<img name="thumb" src="" width="120" height="95" alt="" />
    				</div>
    	  			<div id="sidebar">
    					<ul>
    					  <li><a href="painting.html">Painting</a></li>
    					  <li><a href="worksonpaper.html">Works on paper</a></li>
    					  <li><a href="multimedia.html">Multimedia</a></li>
    					  <li><a href="archives.html">Archives</a></li>
    					</ul>
    	  			</div>
    				
    			<!-- InstanceEndEditable -->
    		</div><!-- End MAIN -->
    		<div class="clear">&nbsp;</div>
    	
    		<div id="footer"><!-- Begin FOOTER -->
    			<p><a href="../index.html">Home</a> | <a href="../resume.html">The Artist</a> | <a href="index.html">Portfolio</a> | <a href="../news.html">News</a> | <a href="../links.html">Links</a> | <a href="../contact.html">Contact</a> </p>
    				<p>Copyright &copy; 1995-2007 , All rights reserved. </p>
    		</div><!-- End FOOTER -->
    	</div>
    	<!-- End WRAPPER -->
    
    
    </body>

  2. #2
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    absolute positioning will cause you lots of problems unless you fully understand the constraints it has.

    Personally, I'd consider using float's for all your positioning and then use padding and margin's to push things into position.

    Try something like this...

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head><title>Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
    * { padding: 0; margin: 0; }
    body {
    	background: #fcfcf7;
    	color: #000;
    	font-size: 100&#37;;
    	font-family: Garamond, Baskerville, Georgia, Caslon, "Adobe Caslon", "Times New Roman", Times, serif;	
    }
    h1 {
    	font-style: italic;
    	letter-spacing: .25em;
    	font-size: 2em;
    	padding: 1em 0 0 1em;
    }
    .hidden {
    	position: absolute;
    	left: -999em;
    }	
    #container {
    	font-size: 0.8em;	
    }
    #header {
    	border-bottom: 1px solid #ccc;
    	margin-bottom: 1em;
    	overflow: hidden;	
    }
    * html #header {
    	height: 1%;	
    }
    #header ul {
    	float: right;
    	list-style-type: none;	
    }
    #header li {
    	float: left;
    	margin-right: 2em;
    	padding-bottom: 5px;	
    }
    #subnav {
    	background: #f0f0f9;
    	float: left;
    	width: 10em;
    	margin-left: 1em;
    	list-style-type: none;
    	padding: 1em;
    	display: inline;
    }
    #subnav li {
    	padding-bottom: 1em;
    }
    #content {
    	margin-left: 14em;
    	background-color: #f9f0f0;
    	margin-right: 1em;
    	padding: 1em;
    }
    #thumbnails {
    	float: right;
    	margin: 1em;
    }
    #thumbnails img {
    	margin-left: 0.5em;
    }
    br {
    	clear: both;	
    }
    #footer {
    	clear: both;
    	border-top: dashed 1px #CCC;
    	padding-top: 1em;
    	margin-top: 1em;
    	text-align: center;
    }
    #footer ul {
    	margin: 0 auto;	
    }
    #footer li {
    	display: inline;
    	padding: 0 1em;
    }
    #footer p {
    	padding: 1em;	
    }
    </style>
    </head>
    <body>
    <div id="container">
    	<div id="header">
    		<h1><a href="../index.html">blah blah blah</a></h1>
    		<ul>
    			<li class="hidden"><a href="#content">Skip to Content</a></li>
    			<li><a href="../resume.html">The Artist</a></li>
    			<li><a href="index.html">Portfolio</a></li>
    			<li><a href="../news.html">News</a></li>
    			<li><a href="../service.html">Service</a></li>
    			<li><a href="../links.html">Links</a></li>
    			<li><a href="../contact.html">Contact</a> </li>
    		</ul>
    	</div>
    	<ul id="subnav">
    		<li><a href="painting.html">Painting</a></li>
    		<li><a href="worksonpaper.html">Works on paper</a></li>
    		<li><a href="multimedia.html">Multimedia</a></li>
    		<li><a href="archives.html">Archives</a></li>
    	</ul>
    	
    	<div id="content">
    		<h2>Archives</h2>
    		<img src="" width="357" height="480"  alt="image" />
    		<p class="caption">title, medium, dimensions, date</p>
    	</div>
    	<div id="thumbnails">
    		<img name="thumb" src="" width="89" height="120" alt="1" />
    		<img name="thumb" src="" width="120" height="92" alt="2" />
    		<img name="thumb" src="" width="87" height="120" alt="3" />
    		<img name="thumb" src="" width="120" height="95" alt="4" />
    	</div>
    	<br class="clear" />
    	<div id="footer">
    		<ul>
    			<li><a href="../index.html">Home</a></li> 
    			<li><a href="../resume.html">The Artist</a></li> 
    			<li><a href="index.html">Portfolio</a></li>
    			<li><a href="../news.html">News</a></li>
    			<li><a href="../links.html">Links</a></li> 
    			<li><a href="../contact.html">Contact</a></li>
    			<li>
    		</ul>
    		<p>Copyright &copy; 1995-2007 , All rights reserved. </p>
    	</div>
    	
    	</div>
    </div>
    </body>
    </html>
    I've only had time to test it in Firefox and put in a few fixes for IE6 but it should be fine to go in Opera, Safari and IE7 as well.

    Hope that helps.

  3. #3
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi csswiz, thanks for taking the time to help! You're right, I still don't fully understand the positioning constraints; I didn't realize the absolutely positioned box was causing so many problems. OK, I had a song from Wizard of Oz in my head, and then I saw your avatar and the song came to a screeching halt. I need sleep! Thanks again!

  4. #4
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by webbydebby View Post
    Hi csswiz, thanks for taking the time to help! You're right, I still don't fully understand the positioning constraints; I didn't realize the absolutely positioned box was causing so many problems.
    Absolute positioning can be useful for overlapping layouts but in most cases it's used unnecessarily.

    It also often causes problems because you'll usually have to create new styles for each pages that you want to create. Float's are much more flexible as you can easily allow the content to control the height and therefore it doesn't matter from page to page if you have content that is 100px in height or 1000px in height

    Quote Originally Posted by webbydebby View Post
    OK, I had a song from Wizard of Oz in my head, and then I saw your avatar and the song came to a screeching halt. I need sleep! Thanks again!


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
  •