SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2011
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Aligning Text From 2 Different Divs

    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. #2
    SitePoint Enthusiast
    Join Date
    Dec 2011
    Posts
    31
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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. #3
    SitePoint Enthusiast
    Join Date
    Oct 2011
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    SitePoint Enthusiast
    Join Date
    Dec 2011
    Posts
    31
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    spanning across the footer? they have width declared? position?

    See if its what you want:

    http://www.bydecronics.com.br/site_v.../amberbam.html

  5. #5
    SitePoint Enthusiast
    Join Date
    Oct 2011
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,802
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    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).
    Code:
    <div id="footer-contents">
      <div class="inner">
    footer content goes here ..............
     </div>
    </div>
    Code:
    .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.

    Code:
    <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:

    Code:
    <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. #7
    SitePoint Enthusiast
    Join Date
    Oct 2011
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #8
    SitePoint Enthusiast
    Join Date
    Dec 2011
    Posts
    31
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    And then float the two moduletable divs and the contact-info div with appropriate widths.
    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. #9
    SitePoint Enthusiast
    Join Date
    Oct 2011
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,802
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by amberbam View Post
    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?
    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.

    Code:
    <div id="footer-contents" div class="widthSpan">
    <div class="inner">
    <?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>
    </div>
    Of course I know nothing about CMS so have no idea if that's feasible with your current system.

  11. #11
    SitePoint Enthusiast
    Join Date
    Oct 2011
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  12. #12
    SitePoint Enthusiast
    Join Date
    Oct 2011
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #13
    SitePoint Enthusiast
    Join Date
    Oct 2011
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Scratch that, I figured it out.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •