Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder PHP6's Avatar
    Join Date
    Aug 2008
    Location
    Czech Republic
    Posts
    238
    Thanks
    18
    Thanked 34 Times in 33 Posts

    design with 3 columns (non standard)

    Hello,

    Can anyone tell me if there is any way to make similar design with pure DIV and CSS? As you can see the whole design contains 3 columns. The center one has fixed size 600 px and it is located in the center of a page. The left and right ones are stretched to the max allowed width.

    Code:
    <table width="100%"  border="1">
      <tr>
        <td bgcolor="#0000FF">&nbsp;</td>
        <td width="600" bgcolor="#FF0000">&nbsp;</td>
        <td bgcolor="#00FF00">&nbsp;</td>
      </tr>
    </table>
    Thanks in advance and waiting for your reply

  • #2
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,788
    Thanks
    8
    Thanked 131 Times in 129 Posts
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • Users who have thanked harbingerOTV for this post:

    PHP6 (04-25-2011)

  • #3
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    something like this

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
            <title></title>
            <style type="text/css">
                #wrapper {
                    width: 900px;
                    margin: 0px auto 0px auto;
                    border: 1px solid black;
                }
                #content {
                    width: 100%;
                    position: relative;
                }
                #col1 {
                    float: left;
                    width: 16%;
                    border: 1px solid red;
                }
                #col2 {
                    margin: 0px auto 0px auto;
                    width: 66%;
                    border: 1px solid blue;
                }
                #col3 {
                    float: right;
                    width: 16%;
                    border: 1px solid red;
                }
            </style>
            <script type="text/javascript"></script>
        </head>
        <body>
            <div id="wrapper">
                <div id="content">
                    <div id="col1">COLUMN 1</div>
                    <div id="col3">COLUMN 3</div>
                    <div id="col2">COLUMN 2</div>
                </div>
            </div>
        </body>
    </html>

  • #4
    Regular Coder PHP6's Avatar
    Join Date
    Aug 2008
    Location
    Czech Republic
    Posts
    238
    Thanks
    18
    Thanked 34 Times in 33 Posts
    Quote Originally Posted by harbingerOTV View Post
    That's exactly what I was looking for! Thank you very much.

    Quote Originally Posted by bullant View Post
    something like this
    That's not right solution since you have fix size for left and right columns. % is not a solution since center column should have fixed size (600 px). But thank you anyway for your time and will to help!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •