homepage Welcome to WebmasterWorld Guest from 54.163.84.199
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Set width to rest-width
Xenji




msg:4481540
 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




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

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




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

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved