CODEWITHSUNDEEP
htmlcss
Brooklyn Nicholson
Brooklyn Nicholson

Reputation: 646

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.

Upvotes: 1

Views: 429

Answers (3)

ScottS
ScottS

Reputation: 72261

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.

Upvotes: 2

cjroth
cjroth

Reputation: 173

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

Upvotes: 2

Roman Goyenko
Roman Goyenko

Reputation: 7070

sure you can, 

<style>
.column1 {
  float: left;
  width: 33%;
  height: 100%;
}

.column2 {
  float: left;
  width: 33%;
  height: 100%;
}

.column3 {
  float: left;
  width: 33%;
  height: 100%;
}

</style>

<div class="column1">
  Col1 content
</div>
<div class="column2">
  Col2 content
</div>
<div class="column3">
  Col3 content
</div>

you can specify the same height if you want them to be the same.

Upvotes: 1

Related Questions