Set width to rest-width

Hello everybody,

I've got following problem building a template.

I got three background-images (2 repeatable, 1 static) and need to make a three column page.

The left column uses a repeatable image and should get a width of about 20%, the second column uses the static image and its width is set to 100px. The last column should use the other repeatable image and its width should fill the rest of the screen.

I'm not sure how to solve this problem via css, for now I did it with JavaScript. I read out the actual screen width and calculate the needed information.

But I am very sure there must be a clean solution using Stylesheets and hope you can help me solving this problem.

<!DOCTYPE html> <html> <head> <title>Floats and Flexible Column Widths Test</title> <style type="text/css"> * { margin:0; padding:0; } #flexColumn { float:left; width:20%; background-color:#e0e0e0; } #fixContainer { margin-left:20%; overflow:hidden; } #fixedColumn { float:left; width:100px; background-color:#ffffd7; } #fillColumn { margin-left:100px; background-color:#ffd7ff; } </style> </head> <body> <div id="flexColumn"> <p>Flexible Column<br /> Flexible Column<br /> Flexible Column<br /> Flexible Column<br /> Flexible Column<br /> </p> </div> <div id="fixContainer"> <div id="fixedColumn"> <p>Fixed Column<br /> Fixed Column<br /> Fixed Column<br /> Fixed Column<br /> Fixed Column<br /> </p> </div> <div id="fillColumn"> <p>Fill Column<br /> Fill Column<br /> Fill Column<br /> Fill Column<br /> Fill Column<br /> </p> </div> </div> <p style="margin-top:1em;">And now for the rest of the story.... </p> <br /> </body> </html>

Set width to rest-width

Xenji

rainborick

Xenji

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week