Flexible width columns

Just need, say, 3 columns [will change - could be up to 4] that are all flexible width (filling in the screen).

Is there a way to do this w/ CSS? So like three blocks, all lined up horizontally, fill in the screen.

Answers


Your question is a bit vague. However, the simple solution is:

EDITED: Duh, forgot my positioning info.

HTML

<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>

CSS

html, body {
   height: 100%;
   position: relative; 
}

.c1 {
   height: 100%;
   width: 33.3%;
   position: absolute;
   left: 0;
   top: 0;
}

.c2 {
   height: 100%;
   width: 33.3%;
   position: absolute;
   left: 33.3%;
   top: 0;
}

.c3 {
   height: 100%;
   width: 33.3%;
   position: absolute;
   left: 66.6%;
   top: 0;
}

Note: there are various ways to do it. Floats can be used, inline-block, etc.


There is also a jQuery Layout plugin which might fit your needs, though it is more than CSS:

http://layout.jquery-dev.net/demos/accordion.html


Need Your Help

Using a link and submit button to submit a form

php html

I am working on a website. I would like the website to redirect from index.php to index.php?lang=En.

website to install applications directly to the system

website system

is it possible to have websites installing applications (games and softwares) directly onto the system? the webpage may copy the required installation files from the server onto the specified desti...

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.