Welcome to WebmasterWorld Guest from 54.147.44.93

Forum Moderators: not2easy

Message Too Old, No Replies

Set width to rest-width

     

Xenji

9:45 am on Aug 3, 2012 (gmt 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.

rainborick

6:05 pm on Aug 3, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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>

Xenji

12:16 pm on Aug 5, 2012 (gmt 0)



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

Featured Threads

Hot Threads This Week

Hot Threads This Month