Welcome to WebmasterWorld Guest from 50.17.16.177

Forum Moderators: not2easy

Message Too Old, No Replies

Set width to rest-width

     
9:45 am on Aug 3, 2012 (gmt 0)

New User

joined:Aug 3, 2012
posts: 4
votes: 0


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.
6:05 pm on Aug 3, 2012 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 15, 2003
posts:904
votes: 5


I'm pretty rotten at floats, but I took a stab at it:

<!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><!-- end #flexColumn -->
<div id="fixContainer">
<div id="fixedColumn">
<p>Fixed Column<br />
Fixed Column<br />
Fixed Column<br />
Fixed Column<br />
Fixed Column<br />
</p>
</div><!-- end #fixedColumn -->
<div id="fillColumn">
<p>Fill Column<br />
Fill Column<br />
Fill Column<br />
Fill Column<br />
Fill Column<br />
</p>
</div><!-- end #fillColumn -->
</div><!-- end #fixContainer -->
<p style="margin-top:1em;">And now for the rest of the story....
</p>
<br />
</body>
</html>
12:16 pm on Aug 5, 2012 (gmt 0)

New User

joined:Aug 3, 2012
posts: 4
votes: 0


Yeah, nice one! That works very well :) Thanks a lot.