SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,358
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)

    Need help with two column layout with sticky footer

    This is an example of a two-column layout with a sticky footer on Paul O'Brien's site:
    http://www.pmob.co.uk/temp/2colfixedtest_4.htm

    Currently the two columns on the page (div#left and div#centre-content) take up 100% of the available width.
    Would it be possible to wrap these columns in a containing div, give this new div a width of, for example, 960px and center it?

    I've been trying to do this all afternoon, but everything I tried just broke the layout.
    Grateful for any help.

    By way of illustration I have attached two images.

    Current:

    current.png

    Desired:

    desired.png

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,742
    Mentioned
    32 Post(s)
    Tagged
    1 Thread(s)
    Basically you will need to wrap #left , #centrecontent, and #clearfooter in a div and give that div a class ( i am calling it .center)

    edit the the CSS accordingly:

    Code:
    #outer > .center {  background:orange;}
    #outer > .center:before { content:""; position: absolute; left: -160px; right: 100%; border-left: 1px solid black;   border-right: 2px groove ; top:0; bottom:0; /*makes the boders*/}
    
    #outer {
    	min-height:100%;/*for mozilla as IE treats height as min-height anyway*/
    	color: #000000;
    	border-left:160px solid pink;
    	border-right:1px solid #000;
    	margin:0 auto; 
    	width:800px;   
    	background: orange;
    	position: relative;
    }
    That's it. hope that helps.

  3. #3
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,358
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    Oh wow. That's really great!! Thanks ever so much!

    A second question:
    Do you know how I would go about changing the column widths?
    I would ideally like the left column to be 640px wide and the right column to be 320px.
    I initially thought this would be simple, but my first attempts have produced quite rather bizarre results.

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,358
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    No, hang on, I got it! It's all good.
    Thanks again for your help, if there was an up-vote button, I'd hit it!


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
  •