Solved

How do I use style for autostretch columns using css?

Posted on 2013-01-30
15
265 Views
Last Modified: 2013-04-18
Hi,

I have the below div structure:

<div class="company-pl-mainarea">
        <div class="company-pl-home-mainarea-row company-pl-contentheader">
&#9;&#9;    <p>Content</p>
        </div>
        <div class="company-pl-home-mainarea-row company-pl-header">
&#9;&#9;    <WebPartPages:WebPartZone runat="server" Title="<%$Resources:cms,WebPartZoneTitle_Header%>" ID="Header"/> 
        </div>
        <div class="company-pl-home-mainarea-row company-pl-newsbody2col">
            <div class="company-pl-home-mainarea-row company-pl-newscol1of2">
                <WebPartPages:WebPartZone runat="server" Title="<%$Resources:cms,WebPartZoneTitle_TopLeft%>" ID="NewsTopLeftRow" />
            </div> 
            <div class="company-pl-home-mainarea-row company-pl-newscol2of2">
                <WebPartPages:WebPartZone runat="server" Title="<%$Resources:cms,WebPartZoneTitle_TopRight%>" ID="NewsTopRightRow" /> 
            </div>
        </div>
        <div class="company-pl-home-mainarea-row company-pl-office-seperator">
            <span>Office</span>
        </div>
        <div class="company-pl-home-mainarea-row company-pl-officebody2col">
            <div class="company-pl-home-mainarea-row company-pl-officecol1of2">
                <WebPartPages:WebPartZone runat="server" Title="<%$Resources:cms,WebPartZoneTitle_TopLeft%>" ID="OfficeTopLeftRow" />
            </div> 
            <div class="company-pl-home-mainarea-row company-pl-officecol2of2">
                <WebPartPages:WebPartZone runat="server" Title="<%$Resources:cms,WebPartZoneTitle_TopRight%>" ID="OfficeTopRightRow" /> 
            </div>
        </div>
        <div class="company-pl-home-mainarea-row company-pl-officebody3col">
            <div class="company-pl-home-mainarea-row company-pl-officecol1of3">
                <WebPartPages:WebPartZone runat="server" Title="<%$Resources:cms,WebPartZoneTitle_CenterLeft%>" ID="OfficeCenterLeftColumn" /> 
            </div>
            <div class="company-pl-home-mainarea-row company-pl-officecol2of3">
                <WebPartPages:WebPartZone runat="server" Title="<%$Resources:cms,WebPartZoneTitle_Center%>" ID="OfficeCenterColumn"  /> 
            </div>
            <div class="company-pl-home-mainarea-row company-pl-officecol3of3">
                <WebPartPages:WebPartZone runat="server" Title="<%$Resources:cms,WebPartZoneTitle_CenterRight%>" ID="OfficeCenterRightColumn" />
            </div>
        </div>
    </div>

Open in new window


My CSS is:

.company-pl-mainarea
{
&#9;position: relative;
&#9;width: 1024px;
&#9;z-index: 1;
&#9;margin-left:auto;
&#9;margin-right:auto;
}

.company-pl-home-mainarea-row.company-pl-contentheader
{
    width:1024px;
&#9;position: relative;
&#9;margin-left:auto;
&#9;margin-right:auto;
}

.company-pl-home-mainarea-row.company-pl-header
{
    width:1024px;
&#9;position: relative;
&#9;margin-left:auto;
&#9;margin-right:auto;
}

.company-pl-home-mainarea-row.company-pl-newsbody2col
{
    width:1024px;
&#9;position: relative;
&#9;margin-left:auto;
&#9;margin-right:auto;
&#9;padding-top:8px;
&#9;height:219px;
}

.company-pl-home-mainarea-row.company-pl-newscol1of2
{&#9;
&#9;padding-bottom: 10px;
&#9;box-sizing: border-box;
&#9;-moz-box-sizing: border-box;
&#9;width: 506px;
    float:left;
    z-index:2;
    position: relative;
}

.company-pl-home-mainarea-row.company-pl-newscol2of2
{&#9;
&#9;padding-bottom: 10px;
&#9;box-sizing: border-box;
&#9;-moz-box-sizing: border-box;
&#9;width: 508px;
    float:right;
    z-index:2;
    position: relative;
}

.company-pl-home-mainarea-row.company-pl-officebody2col
{
    width:1024px;
&#9;position: relative;
&#9;margin-left:auto;
&#9;margin-right:auto;
&#9;height:100%
}

.company-pl-home-mainarea-row.company-pl-officecol1of2
{&#9;
&#9;padding-bottom: 10px;
&#9;box-sizing: border-box;
&#9;-moz-box-sizing: border-box;
&#9;width: 507px;
    float:left;
    z-index:2;
    position: relative;
    height:100%
}

.company-pl-home-mainarea-row.company-pl-officecol2of2
{&#9;
&#9;padding-bottom: 10px;
&#9;box-sizing: border-box;
&#9;-moz-box-sizing: border-box;
&#9;width: 507px;
    float:right;
    z-index:2;
    position: relative;
    height:100%
}

.company-pl-home-mainarea-row.company-pl-officebody3col
{
    width:1024px;
&#9;position: relative;
&#9;margin-left:auto;
&#9;margin-right:auto;
&#9;height:100%
}

.company-pl-home-mainarea-row.company-pl-officecol1of3
{&#9;
&#9;padding-bottom: 10px;
&#9;box-sizing: border-box;
&#9;-moz-box-sizing: border-box;
&#9;width: 258px;
    float:left;
    z-index:2;
    position: relative;
}

.company-pl-home-mainarea-row.company-pl-officecol2of3
{&#9;
&#9;padding-bottom: 10px;
&#9;box-sizing: border-box;
&#9;-moz-box-sizing: border-box;
&#9;width: 258px;
    float:left;
    z-index:2;
    position: relative;
}

.company-pl-home-mainarea-row.company-pl-officecol3of3
{&#9;
&#9;padding-bottom: 10px;
&#9;box-sizing: border-box;
&#9;-moz-box-sizing: border-box;
&#9;width: 508px;
    float:left;
    z-index:2;
    position: relative;
}

.company-pl-home-mainarea-row.company-pl-office-seperator
{
    background-color: #CDD315;
    width:1024px;
&#9;position: relative;
&#9;margin-left:auto;
&#9;margin-right:auto;
}

.company-pl-home-mainarea-row.company-pl-office-seperator span
{
    padding:5px 5px 5px 3px;
    color: #655C59;
    font-family: Tahoma, Arial, Verdana, sans-serif;
    font-size: 14pt;
    font-weight:bold;
    display:inline-block; 
    vertical-align:middle
}

Open in new window


As you can see from the above I have a 2 column structure sitting above a 3 column structure. How can I alter my CSS to allow the highest of col1of2 or col2of2 to dictate where my 3 column structure begin? I want this 3 column structure to line up horizontally you see. I thought setting "height:100%" on col1of2 and col2of2 would work but this is not the case, my 3 column structure seems to invade the space above left by the shortest column within my 2 column structure.

Thanks.
0
Comment
Question by:aspnet-scotland
  • 5
  • 5
  • 2
  • +2
15 Comments
 
LVL 30

Expert Comment

by:LZ1
ID: 38835884
I'm not understanding your question entirely. Do you have an image of what it's supposed to look like?
0
 

Author Comment

by:aspnet-scotland
ID: 38837487
LZ1,

Please find a wireframe attached showing my desired structure. I've purposly set no fixed heights for my columns as multiple web parts can be placed in each column so I want the columns height to auto stretch dynamically (height:100% didn't work?). Unfortunately with my existing CSS "company-pl-officecol1of3" moves up to the shortest of either "company-pl-office1of2" or "company-pl-office2of2", I can't seem to group "company-pl-officecol1of3", "company-pl-officecol2of3", "company-pl-officecol3of3" so they all sit horizontally below the highest of either "company-pl-office1of2" or "company-pl-office2of2"?

Thanks.
divStructure.pdf
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 38845756
The pdf provides a little information.  the code posted provides a little; but we need a link to the page to:

Get context
identify if there are validation errors
use diagnostic tools

Without the code access provided by a link it is difficult to do anything more than make guesses.

Cd&
0
 
LVL 33

Expert Comment

by:Slick812
ID: 38847749
greetings  aspnet-scotland,  ,  I have messed with the column thing with DIV as float:left, if you want to have uniform column heights and even display without overlapping (as you have here)' you may want to switch to a css5 TABLE layout, it's easier to get uniform results with column display.

but back to this question and DIV as column, if you do NOT place your FLOAT div columns inside of another FLOAT div, the the two FLOATs will not use or have any relation to the height or width of the  container DIV, your container is -
company-pl-home-mainarea-row.company-pl-newsbody2col
I would suggest taking out the height and adding a float maybe -

.company-pl-home-mainarea-row.company-pl-newsbody2col
{
width:1024px;
position: relative;
float:left;
margin-left:auto;
margin-right:auto;
padding-top:8px;
 border:1px solid #000;
}

you can take out the border after development, but you need to SEE where this DIV exists and the relation to the other DIV inside and out, without the height, it should re-size with the largest inner column, , also you need to add this  clear: both;  to the div directly after the newsbody div

.company-pl-home-mainarea-row.company-pl-office-seperator
{
clear: both;
background-color: #CDD315;
width:1024px;
position: relative;
margin-left:auto;
margin-right:auto;
}

I really can not see why you use such long names for the CSS sections?
wouldn't it be easier to use
.officebody2col

instead of -

.company-pl-home-mainarea-row.company-pl-officebody2col
0
 
LVL 21

Expert Comment

by:Kim Walker
ID: 38850894
I believe Slick812 is referring to css3 TABLE layout above. I am not yet familiar with this and will certainly be looking into that for my own use. Other than that possibility, there is no way to set the height of one column based on the height of another column using css alone. If you can accept the height of the two columns being independent, you can push the set of three columns to the bottom of the longest of the two columns by adding a clear attribute to the div surrounding the three column set. The styles for this element begin on line 91 in your original css posted above. I've added the attribute on line 8 below.
.company-pl-home-mainarea-row.company-pl-officebody3col
{
    width:1024px;
    position: relative;
    margin-left:auto;
    margin-right:auto;
    height:100%;
    clear:both;
}

Open in new window

0
 
LVL 33

Accepted Solution

by:
Slick812 earned 500 total points
ID: 38852698
Hello  aspnet-scotland, , are you still here ? ?

after reading  xmediaman  comment, I looked at this  STYLE setup another time, and I saw I did not get the correct DIV as you have TWO 2 column divs,  so I tried to copy and paste in to a test page, and had to change the css names in firefox to get display,
WOW, you got more non- functioning CSS in this thing!, as I said if you use a FLOAT on a DIV it ignores the container DIV positioning and containment boundries, for me any time I use DIV as columns with FLOAT, I have a container DIV that is also set to FLOAT, other wise the inner float div do NOT pay any attention to the "bottom" of the container.

here is some code that works for me in firefox to get the "DIV STRUCTURE" you have in your pdf.

<style>
/* company-pl-home-mainarea-row.company-pl-newsbody2col */
.nbody2col
{
width:1024px;
position: relative;
margin-left:auto;
margin-right:auto;
padding-top:8px;
height:219px;
float:left;
border:1px solid #000;
}

/* company-pl-home-mainarea-row.company-pl-newscol1of2 */
.ncol1of2
{
padding-bottom: 10px;
box-sizing: border-box;
-moz-box-sizing: border-box;
width: 506px;
float:left;
z-index:2;
position: relative;
}

/* company-pl-home-mainarea-row.company-pl-newscol2of2 */
.ncol2of2
{
padding-bottom: 10px;
box-sizing: border-box;
-moz-box-sizing: border-box;
width: 508px;
float:right;
z-index:2;
position: relative;
}

/* company-pl-home-mainarea-row.company-pl-officebody2col */
.cebody2col
{
width:1024px;
position: relative;
float:left;
margin-left:auto;
margin-right:auto;
border:1px solid #000;
}

/* company-pl-home-mainarea-row.company-pl-officecol1of2 */
.cecol1of2
{
padding-bottom: 10px;
box-sizing: border-box;
-moz-box-sizing: border-box;
width: 507px;
float:left;
z-index:2;
position: relative;
}

/* company-pl-home-mainarea-row.company-pl-officecol2of2 */
.cecol2of2
{
padding-bottom: 10px;
box-sizing: border-box;
-moz-box-sizing: border-box;
width: 507px;
float:right;
z-index:2;
position: relative;

}

/* company-pl-home-mainarea-row.company-pl-officebody3col */
.cebody3col
{
clear: both;
width:1024px;
float:left;
position: relative;
margin-left:auto;
margin-right:auto;
border:1px solid #0c0;
}

/* company-pl-home-mainarea-row.company-pl-officecol1of3 */
.cbcol1of3
{
padding-bottom: 10px;
box-sizing: border-box;
-moz-box-sizing: border-box;
width: 258px;
float:left;
z-index:2;
position: relative;
}

/* company-pl-home-mainarea-row.company-pl-officecol2of3 */
.cbcol2of3
{
padding-bottom: 10px;
box-sizing: border-box;
-moz-box-sizing: border-box;
width: 258px;
float:left;
z-index:2;
position: relative;
}

/* company-pl-home-mainarea-row.company-pl-officecol3of3 */
.cbcol3of3
{
padding-bottom: 10px;
box-sizing: border-box;
-moz-box-sizing: border-box;
width: 508px;
float:left;
z-index:2;
position: relative;
}

/* company-pl-home-mainarea-row.company-pl-office-seperator */
.seperator
{
clear: both;
background-color: #CDD315;
width:1024px;
position: relative;
margin-left:auto;
margin-right:auto;
}

.seperator span
{
padding:5px 5px 5px 3px;
color: #655C59;
font-family: Tahoma, Arial, Verdana, sans-serif;
font-size: 14pt;
font-weight:bold;
display:inline-block; 
vertical-align:middle
}
                                  
</style>

Open in new window


I have done many many web pages , and I really feel you be 10 times better off using a TABLE or several tables, with simpler HTML and much less problems, for width and height.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 38853227
I have done many many web pages , and I really feel you be 10 times better off using a TABLE or several tables, with simpler HTML and much less problems, for width and height.

YES ... we should definitely go back to the twentieth century instead of taking the actual code through 15 seconds of validation; fixing the errors and then looking at modern approaches to a solution.  A HACK IS ALWAYS BETTER THAN WRITING QUALITY VALID CODE.!

Cd&
0
Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

 
LVL 33

Expert Comment

by:Slick812
ID: 38853457
@ COBOLdinosaur, , not sure your estimate of "15 seconds" would do it for this stack o code,, , and most all is - "modern approaches to a solution" at one time or another? Since when is EE about "WRITING QUALITY VALID CODE" , , , LOL,
at least I got somtin to show, as crap as it may be.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 38855735
You either take enough professional pride to do the job right and to a consistent standard, or you produce crap that floats around until it rots and sinks to the bottom of the Internet cesspool.

There are millions who call themselves "web developers" who don't know better than to produce junk.  Those who know better but continue take the route of "crap is better than nothing" should be ashamed of themselves because they could enlighten and teach; instead of making developer look like fastfood burger flippers.

Cd&
0
 
LVL 33

Expert Comment

by:Slick812
ID: 38856529
OK cobalD, can't disagree wid that last one, I guess I'm always wrong on EE, or so it seems, but I'm used to it by now.
but that still does not solve aspnet-scotland's problem.

but because of  cobalD last post. I again looked at this problem, and looked at  xmediaman solution in comment ID: 38850894 and did some wid it. I will defer to that as useful here,, more than mine anyway, ,  and say it will likely give the display wanted, but it does not give the structure outlined in the pdf, but the DIV structure used here is unnecessary since there are several divs with a width of 1024, which do not contain any view restrictions like overflow:scroll;   or  overflow:hidden; so for inner floats they seem unnessary to me, but what do I know?
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 38856815
At this point we have an incomplete picture.  We do not know what doctype is being used, so we don't know the rules the browser is using to render.  Is it in quirksmode?  The questioner has not post for almost a week, and all we have is an image of what they want, a fragment of HTML code without context, and a fragment of CSS without context.  I am still waiting for a response to my request for a link.

So all anyone we can do is guess and get lucky; and even with a guessing game it is pointless if the user goes a week without any hints.

that still does not solve aspnet-scotland's problem

They are not likely to get any solution unless they do more than throw partial information in a post and then walk away.

So I guess I shall also just walk away.  I have wasted enough time that would be better spent on users who are prepared to participate.

Cd&
0
 
LVL 33

Expert Comment

by:Slick812
ID: 38856937
yes  Cd&   this is a waist here, but I did learn more about the float div thing, LOL so i be lesser dumb now, , still hopeless thoug!
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 38857054
No one is hopeless, and I'm sure The users in Delphi are glad you are around.

Cd&
0
 

Author Comment

by:aspnet-scotland
ID: 38978387
Thanks for your efforts guys. Sorry I couldn't produce a link, it was a local application, i.e. wasn't hosted anywhere for you to view. Comments taken on board though and points awarded for effort.
0

Featured Post

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

705 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now