Aligning Text From 2 Different Divs

CMS & WordPress
1

Hi there,
I am designing a website and have a question regarding vertical alignment. I have the header of the website, and content area in the center of the page at 960 px wide. I then have the footer spanning across the whole width of the page. Now I would like to know how to get the content from both divs to line up, because as of now the footer content will just display at the very left of the page.

I should mention that I am designing this website with Joomla. So it is the 3 module positions in the footer that I want centered basically. I know where in the CSS file I need to edit to make this happen, i just don’t know how to edit it.

Thanks for any help.
Amber

2

Create a <div> put the elements inside </div> then style your div with a .class {width:960px; margin:0 auto;}

Edit: Andddd…i dont have a clue working with cms, sorry if i’m mistaken!

Let me know if it works!

Cheers!

3

Thanks for the quick reply. I added another div and class around the entire thing (starting before the div id for the content and ending after the end of the footer), and then added the class to the css file. It did vertically align then, but only because it also shrunk the footer to 960 px, and then it also made the three modules go down vertically, instead of spanning across the footer. I’ll keep playing around with it but let me know if you have any more ideas, or know what I’m doing wrong. Thanks.

4

spanning across the footer? they have width declared? position?

See if its what you want:

http://www.bydecronics.com.br/site_v2/examples/amberbam.html

5

That’s what I’m looking for, except for I want the content, content, content to be side by side instead of on top of each other. Take a look at the website at http://newwebsite.prosperaplace.com/ I’vve just got three example modules in the footer for previewing purposes. It’s hard to explain what I’ve done with all the different divs/classes etc. involved. Do you have firebug so you can take a look at the coding?

The modules look like this in index.php:

<div id=“footer-contents” div class=“widthSpan”>
<?php if ($this->countModules(‘user4’)) : ?>
<div class=“archives”>
<jdoc:include type=“modules” name=“user4” style=“customized” />
</div>
<?php endif; ?>
<?php if ($this->countModules(‘user5’)) : ?>
<div class=“site-info”>
<jdoc:include type=“modules” name=“user5” style=“xhtml” />
</div>
<?php endif; ?>
<?php if ($this->countModules(‘user6’)) : ?>
<div class=“contact-info”>
<jdoc:include type=“modules” name=“user6” style=“xhtml” />
</div>
<?php endif; ?>
</div>

The content i want to line it up with is <div id=“content-wrap” class=“clearfix”>

I currently do not have any CSS for widthSpan, which I’m sure is a mistake, and then here is some css for the footer-contents

#footer-contents {
border-top: 1px solid #ffcc66;
font-family: Tahoma, sans-serif;
font-weight: normal;
background: url(…/images/footer-content-bg.jpg) repeat;
width: 100%;
height: auto;
text-align: left;
padding: 20px;
font-size: 12px;
margin-left: auto;
margin-right: auto;
}

#footer-contents .moduletable,
#footer-contents .moduletable_menu {
width: 250px;
height: 175px;
color: #fff;
float: left;
margin-right: 50px;
overflow: hidden;
}

It’s all a mix of my own code and the code that existed in this particular joomla template.

Thanks for the help.

6

You don’t have the right structure in place to center those footer elements.

Inside your footer-contents div you will need an inner element that is 960px wide and centered using auto:margins and then it can contain all your inner content (as already mentioned by the previous poster).


<div id="footer-contents">
  <div class="inner">
footer content goes here ..............
 </div>
</div>



.inner{width:960px;margin:auto}

You can then float your inner elements inside that 960px centred container as required making sure that everything fits (including margins).

As you can see from your stripped down code you do not have the three modules contained within an inner element.


<div id="footer-contents" div class="widthSpan">
		<div class="archives">
				<div class="moduletable">
						<div id="jweather_" class="jweather">
								<table border="0">
								</table>
						</div>
				</div>
				<div class="moduletable">
						<div id="jweather_" class="jweather">
								<table border="0">
								</table>
						</div>
				</div>
		</div>
		<div class="contact-info">
				<div class="moduletable">
						<div id="jweather_" class="jweather">
								<table border="0">
								</table>
						</div>
				</div>
		</div>
</div>

You would need this structure:


<div id="footer-contents" div class="widthSpan">
		<div class="inner">
				<div class="archives">
						<div class="moduletable">
								<div id="jweather_" class="jweather">
										<table border="0">
										</table>
								</div>
						</div>
						<div class="moduletable">
								<div id="jweather_" class="jweather">
										<table border="0">
										</table>
								</div>
						</div>
				</div>
				<div class="contact-info">
						<div class="moduletable">
								<div id="jweather_" class="jweather">
										<table border="0">
										</table>
								</div>
						</div>
				</div>
		</div>
</div>

And then float the two moduletable divs and the contact-info div with appropriate widths.

7

Thanks so much. I completely fudged up the index.php file a second ago, so as soon as I get that figured out I’ll try out what you said.

8

Exactly, put width: and float:left;

In the case i send you the link:

#footer p {float:left;}

and the content (paragraphs in the case, Your case is <div>'s) will display side by side, dont forget the width!!

9

Dumb question, but where does the big chunk of code go? I originally thought the index.php file but it doesn’t contain any of the jweather stuff. Or should I be replacing the user 4/5/6 code with that?

10

This is really a CMS question now so I have moved the thread.

I would guess you just need to insert the inner div into the code you posted above.


<div id="footer-contents" div class="widthSpan">
[B]<div class="inner">[/B]
<?php if ($this->countModules('user4')) : ?>
<div class="archives">
<jdoc:include type="modules" name="user4" style="customized" />
</div>
<?php endif; ?>
<?php if ($this->countModules('user5')) : ?>
<div class="site-info">
<jdoc:include type="modules" name="user5" style="xhtml" />
</div>
<?php endif; ?>
<?php if ($this->countModules('user6')) : ?>
<div class="contact-info">
<jdoc:include type="modules" name="user6" style="xhtml" />
</div>
<?php endif; ?>[B]
</div>[/B]
</div>

Of course I know nothing about CMS so have no idea if that’s feasible with your current system.

11

Sorry for the delayed response, the holidays were busy! Thanks so much, I have now gotten the content centered. I’ll have to do some playing around to get it just how i want it but for now, this is awesome. :slight_smile:

12

I’ve got another question about setting the widths for each individual module. I divided 960 by 3 and went to set each modules width to 320, but this pushes the third one down below the other two. I kept going lower and lower with the px amount but it seems like no matter how low I go with the pixel amount it will not allow all three modules to be seen. What’s with that? I know that I have some things to learn about pixels…

13

Scratch that, I figured it out.