PDA

View Full Version : Is there a way to do a Percent - Pixels?


fsstore.net
08-20-2008, 08:42 PM
See this screen shot for a rough sketch of what I am trying to do:

http://img92.imageshack.us/img92/6202/66024862ik5.jpg

I have two columns, both a fixed width, and the last column I want to stretch the width of the page. If I just make the width 100%, it will stretch 100% + the width of the two previous columns.

Is there a way I can sort of do the opposite of this? Like Width = 100% - 350 px?

Thanks for any help

_Aerospace_Eng_
08-20-2008, 09:01 PM
Well CSS can't do math but there is a way to accomplish what you want.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin:0;
padding:0;
background:#000;
height:100%;
}
#column1 {
width:150px;
background:#F00;
height:400px; /* heights are for visual purposes */
float:left;
}
#column2 {
width:200px;
background:#00F;
height:400px;
float:left;
}
#content {
margin-left:350px;
height:400px;
background:#008000;
}
#content p {
padding:5px 10px;
margin:0;
}
h1 {
margin:0;
padding:5px 10px;
}
.clear {
clear:both;
font-size:0;
line-height:0;
}
</style>
</head>
<body>
<div id="container">
<div id="column1">First Column</div>
<div id="column2">Second Column</div>
<div id="content">
<h1>Third Column that expands</h1>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque nibh. Donec nec risus posuere mauris vestibulum dictum. Duis ultrices. Maecenas et magna. Integer ut risus. Duis ut massa. Quisque pulvinar turpis nec magna. Etiam venenatis vulputate nunc. Phasellus eget lorem. Praesent vel eros. Nunc sodales. Duis eget odio quis neque pellentesque consequat. Etiam sit amet ligula aliquam nunc tincidunt sodales. Curabitur dapibus quam sit amet nisi. Phasellus venenatis. Morbi ipsum enim; placerat consequat, eleifend sit amet, ultricies vitae, nisl. Maecenas gravida dui sed libero? Fusce eu magna vitae dui sodales lobortis? </p>
<p> Quisque ipsum dolor, condimentum vitae; porttitor laoreet, ultrices vel, ante! Fusce pharetra placerat ligula. Cras purus. Nam vulputate faucibus felis. Ut eu eros in purus facilisis malesuada. Sed placerat! Cras quis est quis sapien cursus rhoncus. Fusce nec urna sed mi laoreet faucibus. Vestibulum sed magna a neque auctor posuere. Nulla facilisi. Mauris vestibulum euismod lectus. Pellentesque at leo. Morbi congue lobortis ligula. Donec cursus purus pellentesque turpis. Ut ut augue pellentesque leo blandit rhoncus. Aliquam et lectus vel purus sagittis imperdiet. Vestibulum nulla. Cras tristique neque vitae turpis. </p>
<p> Nulla ultricies condimentum lacus. Donec lectus. Phasellus placerat interdum nisl. Phasellus neque! Cras vulputate, risus sit amet tempus venenatis, nibh sem lacinia orci, vel tempus nulla nibh id lacus. Curabitur sit amet odio. Nullam semper lacus eget turpis. Mauris dolor odio, dapibus sed, luctus in, accumsan ultricies, tellus. Ut sit amet mauris. Proin scelerisque, justo nec rhoncus hendrerit, purus turpis commodo nunc, et volutpat nunc felis a elit. Duis rhoncus. Integer ac quam. </p>
</div>
<div class="clear">&nbsp;</div>
</div>
</body>
</html>

fsstore.net
08-20-2008, 09:28 PM
Excellent, I guess I was just trying to make it too complicated. Thanks for your help!!