How do I use style for autostretch columns using css?
Hi,
I have the below div structure:
My CSS is:
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.
I have the below div structure:
<div class="company-pl-mainarea">
<div class="company-pl-home-mainarea-row company-pl-contentheader">
		 <p>Content</p>
</div>
<div class="company-pl-home-mainarea-row company-pl-header">
		 <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>My CSS is:
.company-pl-mainarea
{
	position: relative;
	width: 1024px;
	z-index: 1;
	margin-left:auto;
	margin-right:auto;
}
.company-pl-home-mainarea-row.company-pl-contentheader
{
width:1024px;
	position: relative;
	margin-left:auto;
	margin-right:auto;
}
.company-pl-home-mainarea-row.company-pl-header
{
width:1024px;
	position: relative;
	margin-left:auto;
	margin-right:auto;
}
.company-pl-home-mainarea-row.company-pl-newsbody2col
{
width:1024px;
	position: relative;
	margin-left:auto;
	margin-right:auto;
	padding-top:8px;
	height:219px;
}
.company-pl-home-mainarea-row.company-pl-newscol1of2
{	
	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
{	
	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
{
width:1024px;
	position: relative;
	margin-left:auto;
	margin-right:auto;
	height:100%
}
.company-pl-home-mainarea-row.company-pl-officecol1of2
{	
	padding-bottom: 10px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	width: 507px;
float:left;
z-index:2;
position: relative;
height:100%
}
.company-pl-home-mainarea-row.company-pl-officecol2of2
{	
	padding-bottom: 10px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	width: 507px;
float:right;
z-index:2;
position: relative;
height:100%
}
.company-pl-home-mainarea-row.company-pl-officebody3col
{
width:1024px;
	position: relative;
	margin-left:auto;
	margin-right:auto;
	height:100%
}
.company-pl-home-mainarea-row.company-pl-officecol1of3
{	
	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
{	
	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
{	
	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
{
background-color: #CDD315;
width:1024px;
	position: relative;
	margin-left:auto;
	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
}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.
LZ1
I'm not understanding your question entirely. Do you have an image of what it's supposed to look like?
ASKER
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"
Thanks.
divStructure.pdf
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"
Thanks.
divStructure.pdf
The pdf provides a little information. the code posted provides a little; but we need a link to the page to:
Without the code access provided by a link it is difficult to do anything more than make guesses.
Cd&
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&
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-r
I would suggest taking out the height and adding a float maybe -
.company-pl-home-mainarea-
{
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-
{
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-
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-r
I would suggest taking out the height and adding a float maybe -
.company-pl-home-mainarea-
{
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-
{
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-
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;
}ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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&
@ 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.
at least I got somtin to show, as crap as it may be.
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&
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&
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?
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?
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.
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&
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&
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!
No one is hopeless, and I'm sure The users in Delphi are glad you are around.
Cd&
Cd&
ASKER
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.