Web Analytics Made Easy -
StatCounter Problem with static width element in a fluid width design - CodingForum

Announcement

Collapse
No announcement yet.

Problem with static width element in a fluid width design

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Resolved Problem with static width element in a fluid width design

    This is my first attempt at a fluid width site, and I'm having trouble achieving the layout I want.

    Basically, I want a fixed width image on the right (#staticDiv in the code), a fluid width paragraph on the left (#fluidDiv in the code), and a footer under all of that. The problem is that I can't seem to this to work without resorting to some javascript.

    Here's a simplified version of what I'm working with now

    Code:
    <html>
    
    	<head>
    		<title>Test</title>
    		
    		<style type="text/css">
    
    			#fluidDiv
    			{
    				background-color: orange;
    				float: left;
    				margin-right: 375px;
    			}
    			
    			#staticDiv
    			{
    				background-color: green;
    				width: 350px;
    				height: 482px;
    				position: absolute;
    				right: 20px;
    			}
    			
    			footer
    			{
    				display: block;
    				background-color: yellow;
    				width: 100%;
    				clear: both;
    			}
    			
    		</style>
    		
    	</head>
    	
    	<body>
    		<div id="fluidDiv">
    			Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    		</div>
    		<div id="staticDiv"></div>
    		<footer>Copyright ©2011</footer>
    	</body>
    	
    </html>
    I fully understand WHY it's not working, the "staticDiv" is absolutely positioned, therefore outside of the normal element flow, so the footer sits below the #fluidDiv, which is the only element still in the "flow"... but this is the closest I've been able to get to the result I want.

    Any ideas before I give up and start using Javascript?
    Last edited by Cidixat; Aug 25, 2011, 02:16 AM.

  • #2
    Have a try with:

    Code:
    #fluidDiv
    			{
    				background-color: orange;
    				margin-right: 375px;
    			}
    			
    			#staticDiv
    			{
    				background-color: green;
    				width: 350px;
    				height: 482px;
    				float:right;
    			}
    			
    			footer
    			{
    				display: block;
    				background-color: yellow;
    				clear: both;
    			}
    with

    Code:
    		<div id="staticDiv"></div>
    		<div id="fluidDiv">
    			Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    		</div>
    
    		<footer>Copyright ©2011</footer>
    Absolute positioning is best avoided for this type of layout.
    Use the W3C HTML Validator and CSS Validator to check your code and Firebug to see what css is applied to an element
    Read Steve Krug's book Don't Make Me Think - essential reading on web usability
    I don't recommend much, but I do recommend Clook for UK web hosting

    Comment


    • #3
      I would also recommend adding a valid doctype to your document to help with cross-browser compatibility.
      Teed

      Comment


      • #4
        Originally posted by teedoff View Post
        I would also recommend adding a valid doctype to your document to help with cross-browser compatibility.
        Absolutely.
        Use the W3C HTML Validator and CSS Validator to check your code and Firebug to see what css is applied to an element
        Read Steve Krug's book Don't Make Me Think - essential reading on web usability
        I don't recommend much, but I do recommend Clook for UK web hosting

        Comment


        • #5
          SB65 - Awesome! I hadn't thought of switching the elements around in the markup.

          teedoff - I've got all that good stuff in my real code, I just threw this barebones example of my issue together so people wouldn't have to read through the 200ish lines in my actual front page

          Comment

          Working...
          X