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

Prev Previous Post   Next Post Next
Old Jul 9, 2013, 03: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:

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

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:

#post-756 .associated-posts {
margin: 0;
padding: 0;
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
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!!


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 12:39 PM
align the image container right and narrower than the fixed width hiinxy Header configuration & styling 3 Jun 3, 2011 07: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 02:47 PM

All times are GMT -6. The time now is 02:41 PM.

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