3 divs in line and dinamic width

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

DanSmirAsked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
SSupremeConnect With a Mentor Commented:
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
 
SSupremeCommented:
It will resize automatically if you don't specify the width for it.
0
 
DanSmirAuthor Commented:
SSupreme,
Hello, you right but it will make the width to be minor is possible, i need resize it auto to maximum width
0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
SSupremeCommented:
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
 
jaxbrianCommented:
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
 
DanSmirAuthor Commented:
Jaxbrain, if i do so it drops left and right divs to the top and bottom
0
 
SSupremeCommented:
Have you tried my solution?
0
 
DanSmirAuthor Commented:
SSupreme:

That not a solution, cause it makes 224px margin to the sides.
0
 
DanSmirAuthor Commented:
Yes , i did. I got 224 px margin from both sides, instead of "maximum possible with fill"
0
 
DanSmirAuthor Commented:
Yes , i did. I got 224 px margin from both sides, instead of "maximum possible with fill"
0
 
SSupremeCommented:
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
 
SSupremeCommented:
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
 
DanSmirAuthor Commented:
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
 
SSupremeCommented:
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
 
DanSmirAuthor Commented:
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
 
DanSmirAuthor Commented:
Perfect!!

That exact what i need.!!!

Thank you.
0
 
SSupremeCommented:
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
All Courses

From novice to tech pro — start learning today.