Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

Wordpress Themes - WP Forum at BFA » Forum Usage » Forum How-To »

[SOLVED] How to horizontally align div elements within a container


  #1  
Old Jul 9, 2013, 02:37 PM
New WordPress Fan
 
141 posts · Jul 2010
[SOLVED] How to horizontally align div elements within a container

Sorry; I spoke too soon when I said the alignment problem described here http://forum.bytesforall.com/showthread.php?t=20603 was solved.

I'm still having the same problem! Can't find the right CSS code to align div elements properly in horizontal rows, floated left, without leaving a big space before the element starting in the second row.

The php code for the template in question defines:

Code:
<div class="associated-posts">
  <div class="associated-post">
    
    <div class="thumb-frame">
         <div class="thumb-frame img">       
         <div class="sub_title">
    </div>
  </div>
</div>


The following CSS aligns the .associated-post elements horizontally, within the .associated-posts container displayed on a page, but there still is a big gap in the second row, before the second row elements start. The third row, however, does wrap back left to the left margin:

Code:
#post-756 .associated-posts {
margin: 0;
padding: 0;
width:100%;
overflow: hidden;
}

#post-756 .associated-post {
border: none !important;
margin-top: 0px;
margin-bottom: 30px;
padding-top: 0px;
padding-bottom: 0px;
margin-right: 20px;
float: left;
width: 160px;
}

#post-756 .associated-post .sub_title {
font: 10px Arial;
font-weight: normal;
width: 150px;
text-align: justify;}
When I add
Code:
white-space: nowrap;
after the "overflow: hidden" in the above CSS code, it does take out the extra space and make the elements in row 2 start at the left margin of row 2, as they should. However, this makes the <sub_title> elements disobey the above CSS code styling them, so that they extent right, outside the <associated-post> and overlapping the <sub_title> for the next <associated-post>.

Help!! What am I doing wrong?

Many thanks in advance for any help!!
  #2  
Old Jul 9, 2013, 03:45 PM
New WordPress Fan
 
141 posts · Jul 2010
O.K. With help of this article: http://robertnyman.com/2010/02/24/cs...-why-it-sucks/, I finally figured out a solution:

In the CSS for the <.associated-post> element, instead of using "float: left," I changed it to


Code:
display: inline-block;
vertical-align: top;
That seems to work!

Hope this helps others.

Thanks.

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] Cannot align horizontally social buttons (twt / fb) Chass Forum How-To 7 Jan 23, 2012 11:39 AM
align the image container right and narrower than the fixed width hiinxy Header configuration & styling 3 Jun 3, 2011 06:00 PM
Control spacing in menu bar: left-align some; right align others; blank space between sarah97302 Page & Category Menu Bars 1 Nov 16, 2009 01:47 PM


All times are GMT -6. The time now is 05:19 AM.


Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.