Support » Themes and Templates » multi-layers/divs – using position:relative; and get the whole thing float:left

  • I created a vintage looking employee ID badge for a staff page.

    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?

Viewing 3 replies - 1 through 3 (of 3 total)
  • Michael


    Forum Moderator

    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.

    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.



    Forum Moderator

    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.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘multi-layers/divs – using position:relative; and get the whole thing float:left’ is closed to new replies.