I need to do CSS positioning and I have no idea how.

Discussion in 'OT Technology' started by deusexaethera, Sep 18, 2007.

  1. deusexaethera

    deusexaethera OT Supporter

    Joined:
    Jan 27, 2005
    Messages:
    19,712
    Likes Received:
    0
    Specifically, I need to arrange a set of items on a webpage in two columns, more or less like so:

    [​IMG]

    ...and I need to do it without using tables, because something about using tables totally fucks up the code that makes the items auto-resize and auto-wrap. I'm completely lost. Can someone lend me a hand with this?

    And no, this isn't homework. I don't do homework anymore.
     
  2. P07r0457

    P07r0457 New Member

    Joined:
    Sep 20, 2004
    Messages:
    28,491
    Likes Received:
    0
    Location:
    Southern Oregon
  3. kingtoad

    kingtoad OT Supporter

    Joined:
    Sep 2, 2003
    Messages:
    55,919
    Likes Received:
    10
    Location:
    Los Angeles
    Quick mock up. You should be able to make any adjustments necessary.

    Code:
    #wrapper {
    	border: 2px solid black;
    	padding: 3px;
    	width: 800px;
    	overflow: hidden;
    }
    
    #wrapper #left_column {
    	float: left;
    	width: 160px;
    	padding-right: 8px;
    }
    
    #wrapper #left_column #block {
    	width: 100%;
    	height: 135px;
    	margin-bottom: 5px;
    	border: 2px solid black;
    }
    
    #wrapper #content_container {
    	float: left;
    	width: 628px;
    }
    
    #wrapper #content_container #headline {
    	width: 100%;
    	height: 15px;
    	margin-bottom: 3px;
    	border: 2px solid black;
    }
    
    #wrapper #content_container #content_area {
    	width: 100%;
    	height: 565px;
    	border: 2px solid black;
    }
    
    Code:
    <div id="wrapper">
    	<div id="left_column">
    		<div id="block">
    		
    		</div>
    		<div id="block">
    		
    		</div>
    		<div id="block">
    		
    		</div>
    	</div>
    
    	<div id="content_container">
    		<div id="headline"></div>
    		<div id="content_area">
    		
    		</div>
    	</div>
    </div>
    
     
  4. P07r0457

    P07r0457 New Member

    Joined:
    Sep 20, 2004
    Messages:
    28,491
    Likes Received:
    0
    Location:
    Southern Oregon
    and please don't use a scroll bar in that div.... bad mojo.
     
  5. deusexaethera

    deusexaethera OT Supporter

    Joined:
    Jan 27, 2005
    Messages:
    19,712
    Likes Received:
    0
    Thanks guys, that helped a lot. I eventually found out the problem I was having was that IE6 doesn't support position:fixed, so I had to make them position:absolute and then use a special CSS sub-block to change the positions to fixed if the browser supports proper CSS. All's well now.
     
  6. kingtoad

    kingtoad OT Supporter

    Joined:
    Sep 2, 2003
    Messages:
    55,919
    Likes Received:
    10
    Location:
    Los Angeles
    You should not be using position if floats can accomplish the task.
     
  7. Deleted User

    Deleted User Guest


    what he said :big grin:
     
  8. P07r0457

    P07r0457 New Member

    Joined:
    Sep 20, 2004
    Messages:
    28,491
    Likes Received:
    0
    Location:
    Southern Oregon
  9. deusexaethera

    deusexaethera OT Supporter

    Joined:
    Jan 27, 2005
    Messages:
    19,712
    Likes Received:
    0
    Dude, my web programming skills hover somewhere around the turn of the millenium. It's just not what I do. I'm doing this because my company can't seem to retain real web programmers, because the gov't projects they work on are so unbelievably fucked-up that they get overwhelmed and quit.

    So I'm trying to at least make sure my code is clean. Can you show me an example of how I would use floats to accomplish the layout I need? What is the advantage of using floats in place of absolute/fixed-positioned DIV blocks, anyway?
     
  10. kingtoad

    kingtoad OT Supporter

    Joined:
    Sep 2, 2003
    Messages:
    55,919
    Likes Received:
    10
    Location:
    Los Angeles
    Well, I can't help you if you didn't even bother to read your own thread.
     
  11. Deleted User

    Deleted User Guest

  12. deusexaethera

    deusexaethera OT Supporter

    Joined:
    Jan 27, 2005
    Messages:
    19,712
    Likes Received:
    0
    I assume you're referring to the csszengarden website. No, I haven't had a chance to read it yet. I had to switch to a different task.
     
  13. kingtoad

    kingtoad OT Supporter

    Joined:
    Sep 2, 2003
    Messages:
    55,919
    Likes Received:
    10
    Location:
    Los Angeles
    No, you asked for an example of how you would use floats to accomplish the task that you need. The CSS file I posted was entirely constructed of floats.

    You have more control with floats. Whereas, not as much control with positioning. You can run into a lot of issues and disadvantages with positioning. The main issue with it right now is that IE is unable to interpret absolute/fixed positioning correctly. Considering IE 6 is still the most used browser on the net, I would steer clear from absolute/fixed positioning with IE6. In fact, IE6 treats both position: absolute, and position: fixed the same. This does not even cover the positioning problems in Safari as well. Another common issue of position is the inability to function under certain circumstances when it comes to screen resolution.

    I cannot count how many websites I've launched this year, but what I can recall is the amount of times I've been forced to use position: absolute. And that was once, and it was only because a float couldn't accomplish what I needed to get done.

    You should position elements using position as a last resort. Most of everything, including your layout, can be done utilizing floats. It is more safe using floats, more cross platform/browser compatible, and you will not run into nearly as many problems.

    Keep positioning to a minimum.
     

Share This Page