Adding module next to existing in Joomla - joomla

Question

in my Joomla template is of course the component included:
<jdoc:include type="component" />
That fills the whole width of the parent container at the moment (with margins). The parent container has a background that stretches from the top of the site to the bottom of the component. What I want to do is add a position after the component to place a module there, but I want it next to the component.
But once I make the component float:left and add a width:80% or something so the module on the new position will float next to the component. But, the background from the parent container changes when I add a width other than 100% to the component and stops before the component begins.
How can I have the component have a smaller width than 100% and float:left with another position next to it without changing the background of the parent container?
Edit: I like to add that I cannot use overflow:hidden on the parent container since another element will be clipped if I do. Adding a background to component and the other position won't work either since the original background is wider.
Edit2: I found a solution to my problem. For future reference if anyone is interested: the float clearing part on this page described my problem and clearing the float by adding a <div style="clear: both;"></div> after the last floating element solved my problem. If anyone has a cleaner, better solution I love to see it!

Answer 1

I'm not sure which version of Joomla you're using, but if it's 3.x, then you can use the clearfix class that comes with Bootstrap. It's a cleaner and more efficient approach to adding a clear div at the end of the parent element. So simply add the following to your parent container:
class="clearfix"
If you're using Joomla 2.5 then you can add the following to your template css file:
.clearfix:before,
.clearfix:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1;
}
and then add the class as mentioned above.
Hope this helps