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 8 of 8
  1. #1
    New Coder
    Join Date
    May 2005
    Location
    Leeds, UK
    Posts
    83
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Centering elements on page when using floats

    I have some divs which I want to line up next to each other subject to wrapping according to screen width.
    I've floated them, but how do I center them within the available screen width?
    Here's where I've got so far:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <head>
    	<style>
    		.c{
    			width:100%;
    			text-align:center;
    			padding:auto;
    			background:yellow;
    		}
    		.i{
    			width:150px;
    			height:100px;
    			border:1px solid #555;
    			float:left;
    			margin:20px;
    			background:white;
    		}	
    	</style>
    </head>
    
    <body>
    	<div class="c">
    		<div class="i">
    			<img src="../images/1075641.jpg" width=50>
    			Some content
    		</div>
    
    		<div class="i">
    			<img src="../images/1075641.jpg" width=50>
    			Some content
    		</div>
    
    		<div class="i">
    			<img src="../images/1075641.jpg" width=50>
    			Some content
    		</div>
    
    		<div class="i">
    			<img src="../images/1075641.jpg" width=50>
    			Some content
    		</div>
    	</div>
    </body>

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello hessodreamy,
    You could make .c the width of the 4 .i divs and center that. Would look something like
    Code:
    .c{
    			width:688px;
    			text-align:center;
    			margin: 0 auto;
    			background:yellow;
    		}
    (Width is the width of the boxes plus the margin and the border. It may need to be wider if I missed something.)
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    or use margin: 0 auto; within the .c div. DOn't forget to set a height auto too tho
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #4
    New Coder
    Join Date
    May 2005
    Location
    Leeds, UK
    Posts
    83
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I tried margin: 0 auto; on the .c div and there was no change in IE7 or FF.

    To clarify what I'm trying to do: I need a fluid layout, so I can't use a fixed width. I need the container (.c) to fill the available width, and the .i divs in a row, centered horizontally within the container, and will wrap according to the container width.

    What happens at the moment is that the divs line up, but sit on the left side of the container.

    Is it the right approach to float the divs? I could use display:inline but I read that using block level elements inside inline elements (which I will be doing, once I get the overall layout sorted) will give unpredictable results, as the behaviour is not specified in the w3c.

    Any ideas?

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello hessodreamy,

    Are you trying to do this??? -see my last post there.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #6
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,304
    Thanks
    28
    Thanked 276 Times in 270 Posts
    If the “c” div can’t have a fixed width, then stick another div element (containing the four “i” elements) inside it that can. Since your “i” elements all have fixed dimensions, make the new div element’s dimensions equal to the combined dimensions of the “i” elements so that it fits them exactly and then use margin: 0 auto on that to center it.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #7
    New Coder
    Join Date
    May 2005
    Location
    Leeds, UK
    Posts
    83
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Are you trying to do this??? -see my last post there
    Excavator, that approach works pretty good (unconventional though it is). I've used the <p> and the <span> to get everything in line, and put a <div> inside containing all the margins/borders etc, as applying them to the inline elements gives unpredictable results in different browsers.

    I included a hack to get IE6 to do min-height. I've checked major browsers in windows and also screenshots for a number of other browsers at browsershots.org.

    All looks good except in IE 5.01 where the boxes are displayed block, not inline. Not a massive pain, but any idea how I can get IE 5.0 to work?
    Also, the textarea border does not seem to be rendered in konquerer. Any idea how to fix?

    So it looks like this:
    Code:
    	<style type="text/css">
    		#productcontainer {
    			text-align:center;
    		}
    		#productcontainer p {
    			display:inline;
    		}
    		#productcontainer span {
    			vertical-align:top;
    			display:table-cell;
    			display:inline-table; 
    			display:inline-block;
    		}
    		.productbox {
    			min-height:250px;
    			width:300px;
    			border:1px solid #555;
    			margin:10px;
    			padding:10px;
    
    		}
    		/* for IE6 */
    		/*\*/
    		* html .productbox {
    		height: 250px;
    		}
    		/**/
    		textarea
    		{
    			display:block;
    			border:1px solid #888;
    		}
    		p {
    			margin:0.5em;
    		}
    	</style>
    
    	<div id="productcontainer">
    		
    	<p><span>
    		<div class="productbox" id="b1">
    			<h5>Air Freshener Digital Dispenser</h5>
    			<textarea name="comment[1181]"></textarea>
    			<div>Rating : <select name="rating[1181]">
    						
    		                       <option value='' SELECTED >-</option>
    				</select>
    			</div>
    		</div>
    	</span>
    	</p>
    	
    		
    	<p><span>
    		<div class="productbox" id="b2">
    			<h5>ALASKAN 30cm BRUSHED NICKEL FAN</h5>
    			<textarea name="comment[116719]"></textarea>
    			<div>Rating : <select name="rating[116719]">
    						
    		                          <option value='' SELECTED >-</option>
    				</select>
    			</div>
    		</div>
    	</span>
    	</p>
    </div>

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Goodmorning hessodreamy,
    Well, I played with the code a bit... have to say I'm amazed at what you've done with it.
    Not a clue though how to get it to display correctly in those browsers you mention and I don't have them to test it in anyway.
    My best sugestion would be to work with the validator and strip the code down to the very basics...then add elements and validate each step along the way till it fails again. At least then you'll know why it's not working.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

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