SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Mar 2009
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Simple CSS layout problem (3 Column)

    Hi guys

    setting up the layout div's for a new website.

    Essentially i have three divs that will act as columns. I want a central (centered) column of fixed width 1000px. and the left and right columns to scale their width according to the remaining screen width. The three columns currently sit inside an overall container div.

    Here is the code:

    HTML ...

    Code:
    <div id="container">
    <div id="left_header"></div>
    <div id="central_header"></div>
    <div id="right_header"></div>
    </div>
    and CSS ...

    Code:
    body {margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; }
    
    #container {height:200px; width:100%;}
    
    #left_header {float:left; height:200px; width:100px; background-image: url(img/heading-left.png);background-repeat: repeat-x;background-position: left top;}
    
    #central_header {float:left; height:250px; width:1000px; background-image: url(img/main_header.png); background-position: left top;}
    
    #right_header {float:left; height:200px; width:100px; background-image: url(img/heading-right.png); background-repeat:repeat-x; background-position: left top;}

  2. #2
    SitePoint Enthusiast J32's Avatar
    Join Date
    Mar 2009
    Location
    Seoul
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    if I understand you right, all you need to do is using percents and not px in the width of the left and right header.

    Visit us at J32Teez or Business-Cards.uni.cc
    Follow me on Twitter @J32Teez

  3. #3
    SitePoint Member
    Join Date
    Mar 2009
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yeah thats what I thought and set it 50&#37; and 50% but this knocked them onto separate lines, then I realised 50 + 50 = 100% and that leaves no room for the 1000 px in the middle (mathematically speaking)

    HELP!!

  4. #4
    SitePoint Enthusiast J32's Avatar
    Join Date
    Mar 2009
    Location
    Seoul
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yeah sure it will knock them in another line if you go with 50&#37;. 50 plus 50 is 100%. Where do you think the middle part is going if there is nothing the 100% space left

    You have a quite wide area in the middle with 1000px so I would try the left and right side with 2 or 3 %. Don't forget there are still a lot of people having 1024x768 screen size.

    Visit us at J32Teez or Business-Cards.uni.cc
    Follow me on Twitter @J32Teez

  5. #5
    SitePoint Member
    Join Date
    Mar 2008
    Location
    MD, USA
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    try...

    Code:
    body { margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; }
    #container { height:200px; width:100&#37;;}
    #left_header { float:left; height:200px; width:100px; background-image: url(img/heading-left.png);background-repeat: repeat-x;background-position: left top; }
    #central_header { height:200px; width:100%; background-image: url(img/main_header.png); background-position: left top; }
    #right_header { float:right; height:200px; width:100px; background-image: url(img/heading-right.png); background-repeat:repeat-x; background-position: left top; }
    HTML Code:
    <div id="container">
    <div id="left_header"></div>
    <div id="right_header"></div>
    <div id="central_header"></div>
    </div>


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
  •