www.webdeveloper.com
Results 1 to 5 of 5

Thread: Fixed center and variable sides with CSS?

  1. #1
    Join Date
    Jul 2009
    Posts
    15

    Question Fixed center and variable sides with CSS?

    Hi,

    how can i solve the following table hack with CSS?
    The mid area should be fixed with 1020px, the left and right one should be variable up to the (left/right) browser borders.

    Example: css_table_example.gif

    HTML 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" xml:lang="de">
    	<head>
    		<style type="text/css">
    			#left {
    				height     : 50px;
                min-width  : 75px;
                background : url('left.jpg');
    			}
    
    			#mid {
    				width      : 1020px;
                min-width  : 1020px;
                height     : 50px;
                background : url('mid.jpg');
    			}
             
    			#right {
                height      : 50px;
                min-width   : 75px;
                background  : url('right.jpg');
    			}
    
    		</style>
    	</head>
    	<body>
          <table style="width:100%; border-collapse:collapse; text-align:center;">
             <tr>
                <td id="left">left</td>
                <td id="mid">mid</td>
                <td id="right">right</td>
             </tr>
          </table>
    	</body>
    </html>	
    Left Image: left.jpg
    Mid Image: mid.jpg
    Right Image: right.jpg


    Thanks a lot
    Soda

  2. #2
    Join Date
    Jul 2009
    Posts
    91
    Just add width:auto; to the styles for left and right.

  3. #3
    Join Date
    Jul 2009
    Posts
    15
    Thank you, but it does not work Now the left and right areas are only about 20px width, not up to the borders:
    (changed mid to width : 820px; but this shouldn't be a problem.)

    HTML 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" xml:lang="de">
       <head>
          <style type="text/css">
          
             #container {
                width       : 100%;
                text-align  : center;
             }
             
             #left {
                border : 1px solid blue;
                height     : 50px;
                width      : auto;
                background : url('left.jpg');
                float      : left;
             }
    
             #mid {
             border : 1px solid red;
                height     : 50px;
                width      : 820px;
                min-width  : 820px;
                background : url('mid.jpg');
                float      : left;
                margin     : 0px auto;
             }
             
             #right {
             border : 1px solid green;
                height     : 50px;
                width      : auto;
                background : url('right.jpg');
                float      : left;
             }
             
             .clear {
                clear       : both;
                width       : 0px;
                height      : 0px;
                margin      : 0px;
                padding     : 0px;
             }
    
          </style>
       </head>
       <body>
          <div id="container">
             <div id="left">left</div>
             <div id="mid">mid</div>
             <div id="right">right</div>
             <div class="clear"></div>
         </div>
       </body>
    </html>   

  4. #4
    Join Date
    Jul 2009
    Posts
    91
    I used your code as originally posted and added those two lines. It worked perfectly for me. Just tried it again and ditto. The side divs never go below 75px as expected:

    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" xml:lang="de">
    	<head>
    		<style type="text/css">
    			#left {
    				height     : 50px;
                min-width  : 75px;
                background : url('left.jpg');
    			background-color:red;
    			width:auto;
    			}
    
    			#mid {
    				width      : 1020px;
                min-width  : 1020px;
                height     : 50px;
                background : url('mid.jpg');
    			
    			}
             
    			#right {
                height      : 50px;
                min-width   : 75px;
                background  : url('right.jpg');
    			background-color:red;
    			width:auto;
    			}
    
    		</style>
    	</head>
    	<body>
          <table style="width:100&#37;; border-collapse:collapse; text-align:center;">
             <tr>
                <td id="left">left</td>
                <td id="mid">mid</td>
                <td id="right">right</td>
             </tr>
          </table>
    	</body>
    </html>

  5. #5
    Join Date
    Jul 2009
    Posts
    15
    ah, ok, I think you understood me wrong.
    My table solution worked fine. But I like to do it only with css divs and without the help of the table.

    Something like this:

    HTML Code:
    <body>
       <div id="left" />
       <div id="mid" />
       <div id="right" />
    </body>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles