Can this be done using CSS?

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

Can this be done using CSS?

Post by alex.barylski »

Basically I want to create several rows and columns of varying widths.

<div class="column" style="width: 100%">Head</div>

<div class="column" style="width: 50%">left column</div>
<div class="column" style="width: 50%">right column</div>

Ideally I need each DIV to fall into place accordingly. So if each div's width was 33% I would have all three shown on the same row. In order to introduce another row, you would make the width of a DIV 100% thus pushing the other DIV's onto a new row.

Here is the caveat: The same CSS must be applied to all columns/rows equally...no exception (hard to explain why). The only CSS value I can change dynamically is the width inline. The ID's are basically dunamically generated and thus impossible to assign unique CSS attributes to any given column using the ID. These columns are generated in PHP based on settings from a user so the width is the only variable controller by the end user.

I have tried display: inline, position: relative|absolute and float: left...

Display inline works but it seems all DIV's assume 100% width

One more caveat, is the widths are all percentages not pixels -- no exception.

Any ideas?
alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

Re: Can this be done using CSS?

Post by alex.barylski »

Seems I lose the ability to set the width on a DIV which is inlined...that is causing problems. So floating and positioning are the only options.

If a DIV has a width of 50% and the next DIV is only 40% width and their positions are relative should they not follow behind each other on the same row or does the default block mode still apply?
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

Re: Can this be done using CSS?

Post by JAB Creations »

A divisible element is a block level element, in fact when converting block to inline or vice versa I've only ever found converting inline elements to blocks useful.

You'll never get an even number when multiplying by an odd number greater then 1.

Are you making the common mistake of adding border, margin, and or padding to parent divisible elements? You can't do padding on parent though you can get "padding" by giving child divisible elements margin.

If you can't do a basic layout using divisible elements then it's clear you're lacking some sort of fundamental understanding of how CSS1 works. A header and two columns will work perfectly in Internet Explorer 4 and Opera 4 in total standards compliance.
User avatar
Eran
DevNet Master
Posts: 3549
Joined: Fri Jan 18, 2008 12:36 am
Location: Israel, ME

Re: Can this be done using CSS?

Post by Eran »

Seems I lose the ability to set the width on a DIV which is inlined...that is causing problems. So floating and positioning are the only options.

If a DIV has a width of 50% and the next DIV is only 40% width and their positions are relative should they not follow behind each other on the same row or does the default block mode still apply?
You should probably have a go at the manual - http://www.w3.org/TR/CSS2/visuren.html

Every HTML element can be set to one of several display options. Not all are supported the same across different browsers, so using 'block','inline' and 'none' is the safest choice. (see this table - http://www.quirksmode.org/css/display.html)

A block element occupies a box-like area, to which you can define height, width and other properties that define the box (padding, margin etc). The content of an inline element is distributed into lines, and does not form a new box-like area - therefor block properties such as width and height do not apply to it.

Positioning does something else altogether - it allow you to position elements differently than how they would normally be positioned in the document flow. Relative positioning moves an element relative to where it was originally positioned, and absolute positioning moves an element to a specific offset within its containing positioned block. This means the first parent element that has a position different than static (the default). If no such element exists, than it will be offset against the entire document.

Things get more complicated with the float property. Block elements can be aligned in the same line if they are floated, provided that their total width does not exceed the parent element width (or the document width if there is no parent).

There are plenty of techniques for creating a css-based column layout that combines all those properties, you can google it a little (this one is a good start - http://www.glish.com/css/home.asp). If you'd explain what is it exactly you are trying to achieve, you would get a more concrete answer.
alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

Re: Can this be done using CSS?

Post by alex.barylski »

Relative positioning moves an element relative to where it was originally positioned, and absolute positioning moves an element to a specific offset within its containing positioned block
Although that is what I understood it to be...I still needed to hear that confirmed for some reason. :)
Things get more complicated with the float property. Block elements can be aligned in the same line if they are floated, provided that their total width does not exceed the parent element width (or the document width if there is no parent).
This I realized as well, yet I was still confused by the fact that the floats which dropped to the next line were rendered under neath the top row.

In retrospect it actually makes sense as each top row DIV has varying heights so which DIV bottom should the next row align to? Unlike with table rows I do not believe that information is available to the next row DIV's.

I got everything figured out anyways...thanks again :)
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

Re: Can this be done using CSS?

Post by JAB Creations »

Block Elements
<div></div>
<div></div>
<div></div>

Floating Block elements
<div></div><div></div><div></div>

Header and two columns
<div></div>
<div></div><div></div>

So...

Code: Select all

<div id="head">head</div><div id="content">content</div><div id="side">side</div>

Code: Select all

#head {background-color: #ddd;}#content {background-color: #bdd; float: left; width 80%;}#side {background-color: #ddb; float: left; width 80%;} 
Try it out for yourself. :wink:
Post Reply