Solved

3 divs in line and dinamic width

Posted on 2011-10-01
17
375 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
Active Directory Webinar

We all know we need to protect and secure our privileges, but where to start? Join Experts Exchange and ManageEngine on Tuesday, April 11, 2017 10:00 AM PDT to learn how to track and secure privileged users in Active Directory.

 
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: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say 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

Suggested Solutions

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

829 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