CSS: min and max Width

Joined: 11/28/2008
User offline. Last seen 2 years 2 weeks ago.

Hey everyone,

I've really enjoyed posting here... so I figured I would post some more...

I've got a template that I am working on.

I am trying to give the center content a variable width based on the other objects around it.

For instance I have a left, center and right columns.

I want the center column to expand based on whether the left or right columns are enabled.

But as it seems, when I change the max-width to something higher than what is available... then the object moves beneath the left and right columns. Or at least something to that same effect.

Any ideas?

The HTML that that I am using is strictly using the variables set in CSS. So all of the HTML is nothing but < div > elements and some PHP to enable the elements.

Here is the CSS that I am using:

#right{
	position: relative;
	top: 0px;
	width: 15%;
	margin: 5px 0px 5px 5px;
	float: right;
	z-index: 1;
}
 
#left{
	position: relative;
	top: 0px;
	width: 15%;
	float: left;
	margin: 5px 5px 5px 0px;
	z-index: 1;
}
 
#centercontent{
	position: relative;
	margin: 5px 0px;
	min-width: 66%;
/*	max-width: 100%; */
	float: left;
}

Thank you guys and God bless,
Johnathan

Do you want to learn more about the Christian Worldview or need some prayer or other support? Go to:
Your issue is the

Your issue is the "float:left;" on the center block. Take it out, and you'll get what you want, at least in modern browsers, I didn't check it in IE.

Joined: 06/06/2009
User offline. Last seen 1 year 42 weeks ago.
I would concur with the

I would concur with the float: left being the issue. But this will break the left and right columns so for the left you will need left: 0px /* Or what ever */ and the inverse for the right column.

max and min width has issues in MSIE6 so youll need to decide if you want to support it or not.

Joined: 11/28/2008
User offline. Last seen 2 years 2 weeks ago.
OK, so it is OK to have the

OK, so it is OK to have the float: left; on the leftcolumn, then have left: 0px; on the centercolumn and a right: 0px; on the rightcolumn... can I still use the float: right; on the rightcoumn?

Also, so why can't you have float: left; and max-width on the same div element?

Do you want to learn more about the Christian Worldview or need some prayer or other support? Go to:
Joined: 11/28/2008
User offline. Last seen 2 years 2 weeks ago.
OK and I did that... and the

OK and I did that... and the page doesn't look right...

http://default.tsgcomputers.net/

Everything is still left aligned.

Do you want to learn more about the Christian Worldview or need some prayer or other support? Go to:
Joined: 10/18/2008
User offline. Last seen 1 year 27 weeks ago.
The code you had originally

The code you had originally should have lined up your areas nicely. The issue is if you want the content area to expand depending on sidebars being enabled, then you're going to have to define some classes (either in a template file, php, or somewhere - I can't tell you where since I'm not a joomla guy (yet)).

In drupal, you'd modify your template.php file to check to see if the sidebars are there. If, for example, the left one was there, you'd add a class "sidebar-left" which would push the content over where it needed to be. If both sidebars are there, then sidebar-right would squish the content inwards where it needed to be.

You can't do what you want purely in css (afik), not without defining some extra classes and adding them to your template depending on if the sidebars are there.

/ * Begin Signature */
It's a strange thing about determined seekers-after-wisdom that, no matter where they happen to be, they'll always seek that wisdom which is a long way off. Wisdom is one of the few things that looks bigger the further away it is.

Joined: 11/28/2008
User offline. Last seen 2 years 2 weeks ago.
@BishopBooyah, OK, so how

@BishopBooyah,

OK, so how would something like that look like?

And as far as Joomla is concerned, the PHP file shows the HTML while the CSS/CSS file has all of the CSS content that the HTML references.

Do you want to learn more about the Christian Worldview or need some prayer or other support? Go to:
Joined: 10/18/2008
User offline. Last seen 1 year 27 weeks ago.
Umm, you need to move your

Umm, you need to move your right block to underneath the content block (it's floating up above your content area where it's at now).

What does your php file look like? Do you have something like

<?php print $right_sidebar ?>

If so, then when I went to print out the center block:

<?php if ($right_sidebar) $sidebarclass = "rightsidebar "; ?>
<?php if ($left_sidebar) $sidebarclass .= "leftsidebar"; ?>
<?php if ($right_sidebar) $sidebarclass = "bothsidebars"; ?>
<div id="centercontent" class="<?php print $sidebarclass ?>">

Then you can create the classes (rightsidebar, leftsidebar, bothsidebars) which would then define the width of the center content.

both width:66%
one only then width:85%
none then width:100%

/ * Begin Signature */
It's a strange thing about determined seekers-after-wisdom that, no matter where they happen to be, they'll always seek that wisdom which is a long way off. Wisdom is one of the few things that looks bigger the further away it is.

Float and max-width:

Floats want a width, and when you give them max-width, they assume the max right away.

The best way to address your issue is in the PHP itself -- change the class name you're using depending upon the columns going to be displayed on the page.

countModules is the php function you need to figure out if there are any modules in a position that will be displayed. I've not seen your template code, so I won't speculate on where you should use it.

Have look here for further details: http://docs.joomla.org/JDocumentHTML/countModules

The basic idea is to create multiple layouts in your CSS depending on the class name, then decide which class name to use based on what modules will be displayed.