Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 4 of 4
  1. #1
    Senior Member mikeycorn's Avatar
    Join Date
    Mar 2003
    Posts
    272
    Member #
    891
    Here's the body css:

    Code:
    body {
    	width: 768px;
    	margin-right: auto;
    	margin-left: auto;
    	background-color: #ACC9E8;
    }
    And I was able to get the the first two columns floating just fine with one floating left and the other floating right.

    The next row, however, I need five columns, 1 x 368 and 4 x 100, to fit the body width, but I've tried different combinations of floating the first on left, not setting a float for the middle three, float right on the last or another attempt with the first four left, the last one right and always either they're all on separate rows, or I get close but padding prevents the last column from making the row.

    So of course, I tried "padding: 0px" all over the place, but can't seem to get rid of that gap that's showing up between each column.

    What am I missing in trying to get more than two columns tight up against each other in the same row?
    ~ mikeycorn
    With over 72,000 questions worth of user submitted quizzes, it's the world's most popular quiz creation software:
    PEST - The Personal Exam Self-Tester

  2.  

  3. #2
    Senior Member
    Join Date
    May 2003
    Location
    UK
    Posts
    2,354
    Member #
    1326
    I may be totally off with this, but this has 5 divs floated left and the last div does not drop below the test. You will notice I extended the width of the body just to make sure they stay on the same line.

    The elements do not use the extra pixels so all is well.

    Not very semantic naming the divs one,two.. etc but you are better placed to id them.

    HTML Code:
    <html>
    
    <head>
    
    	<title>CSS Columns</title>
    
    	<style type="text/css">
    
    	html, body
    	{
    		margin: 0;
    		padding: 0;
    		width: 780px;
    	}
    
    	#one
    	{
    		border: 1px solid red;
    		float: left;
    		width: 368px;
    	}
    
    	#two
    	{
    		border: 1px solid blue;
    		float: left;
    		width: 100px;
    	}
    
    	#three
    	{
    		border: 1px solid green;
    		float: left;
    		width: 100px;
    	}
    	#four
    	{
    		border: 1px solid red;
    		float: left;
    		width: 100px;
    	}
    
    	#five
    	{
    		border: 1px solid yellow;
    		float: left;
    		width: 100px;
    	}
    
    	</style>
    
    </head>
    
    <body>
    
    	<div id="one">div1</div>
    	<div id="two">div2</div>
    	<div id="three">div3</div>
    	<div id="four">div4</div>
    	<div id="five">div5</div>
    
    </body>
    </html>

  4. #3
    Senior Member mikeycorn's Avatar
    Join Date
    Mar 2003
    Posts
    272
    Member #
    891
    Very cool! Thanks for taking the time.
    ~ mikeycorn
    With over 72,000 questions worth of user submitted quizzes, it's the world's most popular quiz creation software:
    PEST - The Personal Exam Self-Tester

  5. #4
    Senior Member aeroweb99's Avatar
    Join Date
    Feb 2008
    Location
    Port Huron, Michigan
    Posts
    1,037
    Member #
    16468
    Liked
    1 times
    When you float 1 column left and 1 right, it needs to be coded a little opposite of what you might think. In the code you would have div left, div right, then the middle content goes last and it will fill up in between the two.

    I tried that method before and didn't like the lack of control.
    bfsog's method works easier, you just need to watch your widths and leave a little wiggle room in your container div.

    By the way, if you want to put all those divs in a centered container,

    #container {
    margin: 0, auto;
    width: 780px;
    }


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 09:36 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com