SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    I want my 4th arrow! garlinto's Avatar
    Join Date
    Jun 2002
    Location
    Riding the electron wave
    Posts
    372
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Absolute positioning in fluid layout

    I am recoding a page to utilize a 3-column layout, but need to absolutely position some divs so that my *switchable* divs in the left column will work right. I think my absolutely positioned divs are screwing up my layout, 'cuz nothng is right.

    How can I go about accomplishing my goals without sacrificing ease of layout/cross-browser compatability? Or am I stuck with my existing layout?

    See the page as it is now.

    See the *new* page here.

    Some code:
    Code:
    /* 3-Column layout divs */
    #leftcontent {
            position: absolute;
    	left:10px;
    	top:50px;
    	width:250px;
    	background:#fff;
    	border:1px solid #000;
    	}
    		
    #leftcontent .myButtons {
            text-align: center;
    	font-size: 9pt; 
    	font-family: verdana, arial, courier;
    	text-decoration: none;
    	background-color: #ffffff;
    	margin: 10px 0px 20px 0px;
    	top: 10px; left: 0px; width: 245px; height: 765px;
    	visibility: visible;
    	z-index: 1;
    	}
    
    #leftcontent .myTables {
    	font-size: 9pt; 
    	font-family: verdana, arial, courier;
    	text-decoration: none;
    	background-color: #ffffff; 
    	position: absolute;
    	top: 237px; left: 1px; width: 245px; height: 555px;
    	visibility: visible;
    	z-index: 1;
    	}
    		
    #centercontent {
    	background:#fff;
      	margin-left: 199px;
       	margin-right:199px;
    	border:1px solid #000;
    	voice-family: "\"}\"";
    	voice-family: inherit;
      	margin-left: 201px;
      	margin-right: 201px;
    	}
    html>body #centercontent {
    	margin-left: 201px;
    	margin-right:201px;
    	}
    
    #centercontent	.pics {
            background-color: #ffffff;
    	position: relative;
    	margin: 10px;
    	top: 30px; left: 0px; width: 700px; height: 190px;
    	margin: 5px 0px 10px 0px;
    	visibility: visible;
    	z-index: 1;
    	float: right;
    	}
    		
    #rightcontent {
    	position: absolute;
    	right:10px;
    	top:50px;
    	width:200px;
    	background:#fff;
    	border:1px solid #000;
    	}
    	
    #banner {
    	background:#fff;
    	height:100px;
    	border-top:1px solid #000;
    	border-right:1px solid #000;
    	border-left:1px solid #000;
    	voice-family: "\"}\"";
    	voice-family: inherit;
    	height:100px;
    	}
    html>body #banner {
    	height:100px;
    	}
    	
    #banner .logo {
    	text-align: left
    	}
    		
    #footer {
            font-size: 10pt; 
    	font-family: verdana, arial, courier; 
    	text-decoration: none; 
    	height: 60px;
    	voice-family: "\"}\"";
    	voice-famiy: inherit;
    	height: 60px;
    	}
    html>body #footer {
            height: 60px;
    	 }
    Any input would be well recieved.
    Ducharme's Axiom: "If you view your problem closely
    enough, you will recognize yourself as part of the problem."


  2. #2
    SitePoint Zealot Run2Web's Avatar
    Join Date
    Apr 2002
    Location
    Indiana
    Posts
    165
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I use css for fluid layouts and one thing that I have found that helps me position things the way I want them to appear is to use a container to hold the div's that belong in that container.

    You might also consider changing this

    Code:
    #centercontent {
    	background:#fff;
      	margin-left: 199px;
       	margin-right:199px;
    	border:1px solid #000;
    	voice-family: "\"}\"";
    	voice-family: inherit;
      	margin-left: 201px;
      	margin-right: 201px;
    	}
    to this

    Code:
    #centercontent {
    	background:#fff;
      	left: 199px;
    	border:1px solid #000;
    	voice-family: "\"}\"";
    	voice-family: inherit;
      	margin-left: 201px;
      	margin-right: 201px;
    	}
    You might have to play with the above code a little but there were 2 margin-left's and 2 margin-right's. You also haven't told it how far from the top you want it to be.
    RUN2Web

    Has Anyone seen my Furry Little Mind?


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
  •