WordPress.org

Ready to get started?Download WordPress

Forums

multi-layers/divs - using position:relative; and get the whole thing float:left (4 posts)

  1. AardvarkGirl
    Member
    Posted 2 years ago #

    I created a vintage looking employee ID badge for a staff page. http://www.ratest6.com/category/staff/

    I used layered divs so that when they upload photos as the 'featured image' the photo will load under the 'dirty laminated' layer so the photo looks 'icky' and they don't have to do any graphics work in the future.

    BUT this has left me with the problem of getting them to load onto the page in 2 columns (float:left;).

    The space between the first and second is obviously caused by the top layer's "position:relative; top:-248px:" .

    Anyone have suggestions for getting them to "float left" into to columns with this space issue?

  2. alchymyth
    Forum Moderator
    Posted 2 years ago #

    should be no problem - at the moment the div (staff-post-holder - btw: should be css class for valid code) is too wide to fit the column.

    this is a general formatting question which is not within the scope of this WordPress forum - please use a tool such as Firebug to investigate these kind of problems. http://getfirebug.com/

  3. AardvarkGirl
    Member
    Posted 2 years ago #

    I do have firebug.

    It wasn't the 'float left' that was the problem, so to me it isn't 'so simple'. I can get the first row of floats there... but then the posts that load below that has the HUGE margin due to the "Position:relative;".

    I posted this in another forum strictly for CSS but they were not grasping the concept that this was dynamic and just stated I put a class on the top row separate to all others that load.

    http://www.ratest6.com/category/staff/

  4. alchymyth
    Forum Moderator
    Posted 2 years ago #

    adding a fixed height here might work (not cross-browser tested - might need an additional 'overflow:hidden;'):

    .staff-post-holder {float:left;width:443px;height:247px;}

    it is still no WordPress issue, as the same problem would appear even with some static hand-coded html code.

Topic Closed

This topic has been closed to new replies.

About this Topic