Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 420
  • Last Modified:

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

0
DanSmir
Asked:
DanSmir
  • 8
  • 8
1 Solution
 
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
 
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
What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

 
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
 
SSupremeCommented:
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
 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

  • 8
  • 8
Tackle projects and never again get stuck behind a technical roadblock.
Join Now