japanlinked wrote:
I have found a solution to the problem this might not work on all templates but it works for bentobox.
beat wrote:
Another fix is to replace it instead of table with this
Tables are evil, but that will work.
I'm going to expand on beat's solution so that it might be a little easier to understand.
I didn't have the luxury of contacting my template designer, since I *am* my template designer. The "clear:both" was killing my layout as well, and using beat's solution didn't help, because of the way my CSS is laid out:
[code:1]
#leftnav {
float: left;
width: 160px;
margin: 10px 0 10px 0;
padding: 5px;
color: #EAE8D0;
background: #9C9473;
}
#content {
margin: 10px 0 0 180px;
padding: 10px;
}
[/code:1]
With those two DIVs in a fixed-width container, beat's "width:100%" also destroyed the layout, shoving it off to the right side.
My solution was to float the "content" and give it a fixed width. If I did not do both those things, the layout was destroyed.
Now my CSS reads:
[code:1]
#leftnav {
float: left;
width: 160px;
margin: 10px 0 10px 0;
padding: 5px;
color: #EAE8D0;
background: #9C9473;
}
#content {
margin: 10px 10px 0 0px;
padding: 10px;
float: right;
width: 530px;
}
[/code:1]
If your template designer is unable or unwilling (which will most likely be the case) to help you out on this, you can find the DIV your content is in by viewing the HTML under "Templates" and finding the <?php mosMainbody(); ?> (for 1.5) or <jdoc:include type="component" /> (for 1.x/1.5 Legacy).
The DIV may be called "main_body" or "content" or something like that. Once you know the name of the DIV, you can go into the CSS for your template, find the appropriate DIV and add the fixed width and float command for it.
If you are unfamiliar with CSS, there are a ton of free CSS resources online. A quick Google search will yield you many options.
Hopefully this will help someone out.