Solved

3 divs in line and dinamic width

Posted on 2011-10-01
17
381 Views
Last Modified: 2012-05-12
Hello Experts,

I have a joomla page with 3 divs inlie, left ad right have fixed width, but left one shows only on a single page. My question, how can i make middle (center) div be resized automatically to largest width?
Example:
Div left(100px)>Div center (maximum) >Div right (100px)
Div center (Maximum)> Div right(100px)

Code attached

Thanks for assistance...
Index.php

<?php if($this->countModules('right')) : ?>
			 	<div id="rightmodules">
					<jdoc:include type="modules" name="right" style="module" />
	        	</div>
	        	<?php endif; ?>
				<div id="maincontent"><jdoc:include type="component" /></div>
				<?php if($this->countModules('left')) : ?>
			 	<div id="leftmodules">
					<jdoc:include type="modules" name="left" style="module" />
	        	</div>
	        	<?php endif; ?>	


CSS
#leftmodules {
	float:right;
	width:222px;
	margin-right:10px;
}

#maincontent {
	float:right;
	display:block;
	margin-left:auto;
	margin-right:auto;
	border:1px solid red;
	margin-top:10px;
}

#rightmodules {
	float:right;
	width:222px;
	margin-left:10px;
}

Open in new window

0
Comment
Question by:DanSmir
  • 8
  • 8
17 Comments
 
LVL 16

Expert Comment

by:SSupreme
ID: 36896685
It will resize automatically if you don't specify the width for it.
0
 

Author Comment

by:DanSmir
ID: 36896704
SSupreme,
Hello, you right but it will make the width to be minor is possible, i need resize it auto to maximum width
0
 
LVL 16

Expert Comment

by:SSupreme
ID: 36896735
I assume you need middle div to fill all available space between side-divs.
Try this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content="HTML Tidy for Linux (vers 6 November 2007), see www.w3.org" />
<style type="text/css">
#leftmodules {
	float:left;
	width:222px;
	background:yellow;
}

#maincontent {
	display:block;
	margin-left:224px;
	margin-right:224px;
	border:1px solid red;
	margin-top:10px;
	background:pink;
}

#rightmodules {
	float:right;
	width:222px;
	background:red;
}
html, body {width:100%;heigh:100%;}
#wrap {width:100%;}
</style>
<title></title>
</head>
<body>
<div id="wrap" >
<div id="leftmodules">
AAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAA
</div>
<div id="rightmodules">
AAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAA
</div>
<div id="maincontent">
AAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAA
</div>

</div>
</body>
</html>

Open in new window

0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 2

Expert Comment

by:jaxbrian
ID: 36896737
could you set the middle to have a width of 100%?

#maincontent {
      float:right;
      display:block;
      margin-left:auto;
      margin-right:auto;
      border:1px solid red;
      margin-top:10px;
        width="100%"

}
0
 

Author Comment

by:DanSmir
ID: 36896750
Jaxbrain, if i do so it drops left and right divs to the top and bottom
0
 
LVL 16

Expert Comment

by:SSupreme
ID: 36896772
Have you tried my solution?
0
 

Author Comment

by:DanSmir
ID: 36896775
SSupreme:

That not a solution, cause it makes 224px margin to the sides.
0
 

Author Comment

by:DanSmir
ID: 36896780
Yes , i did. I got 224 px margin from both sides, instead of "maximum possible with fill"
0
 

Author Comment

by:DanSmir
ID: 36896781
Yes , i did. I got 224 px margin from both sides, instead of "maximum possible with fill"
0
 
LVL 16

Expert Comment

by:SSupreme
ID: 36896799
it size of side-div+border, you can make side-div with width 100px without any boarder and make margin for middle-div equal to 100px. I guess you didn't check the result, because "it makes 224px margin to the sides"  is a solution for making divs display inline one next to another.
0
 
LVL 16

Expert Comment

by:SSupreme
ID: 36896823
I made it like this: 1 by 1, 3 in lineor you want full (maximum page width) middle width: side-divs on top of middle, but middle div is full widthI drop a little side-divs so you can see that middle div is full (maximum) width of page:
 support for Capture2.JPG
0
 

Author Comment

by:DanSmir
ID: 36896830
Ill try to explain my question once again.

I have div left div center and div right.
Left and Right divs has fixed size, center div should be maximum width.

Problem, left div sown only one ONE page, so toher will have center div and right div.
Problem, center div not resized to fill left div space
0
 
LVL 16

Expert Comment

by:SSupreme
ID: 36896875
So you want left div to be shown on one page, and center div and right div on another page.
What do you mean by "largest width"?
0
 

Author Comment

by:DanSmir
ID: 36896887
page one: (left div 220px) (center div maximum width "automatically set to 560px") (right div 220px) (global for all width 1000px)

page two: (NO LEFT DIV) (center div maximum width "automatically set to 780px") (right div 220px) (global for all width 1000px)

I need center be ALWAYS maximum free width, but dynamically change his width in case left div enabled
0
 
LVL 16

Accepted Solution

by:
SSupreme earned 500 total points
ID: 36896955
Try this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content="HTML Tidy for Linux (vers 6 November 2007), see www.w3.org" />
<style type="text/css">
#leftmodules {
	float:left;
	width:220px;
	background:yellow;
}

#maincontent {
	float:left;
	width:780px;
	margin-top:10px;
	background:pink;
}
#leftmodules+#maincontent {width:560px;}
#rightmodules {
	float:left;
	width:220px;
	background:red;
}
html, body {width:100%;heigh:100%;}
#wrap {width:1000px;}
</style>
<title></title>
</head>
<body>
<div id="wrap" >
<div id="leftmodules">
AAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAA
</div>


<div id="maincontent">
AAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAA
</div>
<div id="rightmodules">
AAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAA
</div>
</div>

</body>
</html>

Open in new window

0
 

Author Closing Comment

by:DanSmir
ID: 36896972
Perfect!!

That exact what i need.!!!

Thank you.
0
 
LVL 16

Expert Comment

by:SSupreme
ID: 36896986
Or even this one, it checks for any missing side-div, so even if right div is missing, it will expand to max with left-div:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content="HTML Tidy for Linux (vers 6 November 2007), see www.w3.org" />
<style type="text/css">
#leftmodules {
	float:left;
	width:220px;
	background:yellow;
}

#maincontent {
	float:right;
	width:1000px;
	margin-top:10px;
	background:pink;
}
#rightmodules+#maincontent {width:780px;}
#leftmodules+#maincontent {width:780px;}
#leftmodules+#rightmodules+#maincontent {width:560px;}
#rightmodules {
	float:right;
	width:220px;
	background:red;
}
html, body {width:100%;heigh:100%;}
#wrap {width:1000px;}
</style>
<title></title>
</head>
<body>
<div id="wrap" >
<div id="leftmodules">
AAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAA
</div>

<div id="rightmodules">
AAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAA
</div>
<div id="maincontent">
AAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAA
</div>
</div>

</body>
</html>

Open in new window

0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

These days socially coordinated efforts have turned into a critical requirement for enterprises.
Introduction This article is intended for those who are new to PHP error handling (https://www.experts-exchange.com/articles/11769/And-by-the-way-I-am-New-to-PHP.html).  It addresses one of the most common problems that plague beginning PHP develop…
The viewer will learn how to count occurrences of each item in an array.
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…

679 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