Solved

3 divs in line and dinamic width

Posted on 2011-10-01
17
356 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
 
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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
change password links 7 72
How do I put a session for a radio button? 4 12
Bootstrap on PLNKR 3 13
PHP: Insert Data into MySQL 5 7
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

914 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now