Absolutely positioned div’s break in WordPress page

  • Resolved travellers

    (@travellers)


    14 years, 12 months ago

    I want a ‘mosaic’ effect on a WP page and spent a happy half-day laying out the css for displaying my images. Got it working perfectly in its OWN page, but when I copy it across to a WP page it ‘breaks’ and displays all the images one under another down the page. Can anyone tell me why, or how to resolve it please?

    Here’s the basic html I’m adding:

    <img class="thumbnail" src=".../frontthumb.jpg" width="410" height="280">
<img class="thumbnail" src=".../frontthumb.jpg" width="160" height="340">
<img class="thumbnail" src=".../frontthumb.jpg" width="230" height="130">
<img class="thumbnail" src=".../frontthumb.jpg" width="230" height="150">
<div id="div-1a">
  <img class="thumbnail" src=".../frontthumb.jpg" width="290" height="230"></div>
<div id="div-1b">
  <img class="thumbnail" src=".../frontthumb.jpg" width="280" height="240"></div>
<div id="div-1c">
  <img class="thumbnail" src=".../frontthumb.jpg" width="230" height="150"></div>

    and the small added chunk to style.php

    {
float:left;
margin:5px;
}
#piccontainter {
border: 1px solid;
}
#div-1 {
 position:relative;
width:280px;}
#div-1a {
 position:relative;
 top:-60;
 right:0;
 width:200px;
}
#div-1b {
 position:relative;
 top:-235;
 left:300;
 width:200px;
}
#div-1c {
 position:relative;
 top:-530;
 left:590;
 width:200px;
}

#div-1d {
 position:relative;
 top:100;
 left:420;
 width:200px;
}

    In a dedicated page this layout works fine, and I have three images side by side as per this screenshot – so what’s happening when I transfer it into WP?

Viewing 6 replies - 1 through 6 (of 6 total)

  • site url?

    Thread Starter travellers

    (@travellers)

    Its at the default page on https://www.unique2uphotography.co.uk/ (the surrounding table cell is temporary so I can see what’s going on). This exact same html works correctly in its own page, but inside Creativix on WP you can see that the second and third image are dropping 10 pixels beneath their inline place, the bottom right image is horizontally aligned to the bottom edge of topmiddle when its relative positioning should place it above that, and the remainging two images simply drop to the next line rather than displaying as ‘columns’. Something’s up, and my head hurts!

    there are <br /> after the first three images and an unmartched </p> after the forth.
    that is what the validator thinks: https://validator.w3.org/check?uri=http%3A%2F%2Fwww.unique2uphotography.co.uk%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

    it helps to look at the html code in the browser – regardless of what you assume you put in or what the program ‘should’ be generating.

    also, to position something ‘absolute’ you need a reference div with ‘position:absolute;’ itself; and the sub-divs could be positioned ‘absolute’ as well – with the coordintes ‘left’ ‘top’ ‘right’ having units – not just bare numbers.

    your positioning is all relative, without any reference point.

    it is a miracle how this code could have worked in its onw page.

    Thread Starter travellers

    (@travellers)

    Harsh, but fair ??
    I just looked at the source code I copied into WP from – no line breaks or orphaned paragraphs there. But yep, they were in the source of the WP page. Can’t figure that, perhaps I dropped them in in visual rather than HTML mode. Whatever, I’ve cured those now, absolutely positioned the first element and referenced all other images to that first one and hey presto, it all lines up correctly. Only one small remaining issue… the page length is at the size it would be if all the images were in their ‘natural’ position rather than the relative positioning thats applied, so there is a huge length of empty space beneath my mosaic before the footer. How can I force the end of the content area up to the bottom of the last image, so my footer appears where it should?

    not a ‘good’ solution, but …

    if you add a div before the first image div:

    <div style="float:left;position:relative;height:600px;" >
<div id="div-1"><im....

    close the div after the last of your image divs.

    with these css properties it seems to be possible to contain the images and the post length is kind-of-normal.
    (in firefox with the developer add-on)

    Thread Starter travellers

    (@travellers)

    D’oh, I should have thought of that. Yep, that works. Many thanks alchymyth, that’s sorted now – mark this one down as ‘Resolved’!

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Absolutely positioned div’s break in WordPress page’ is closed to new replies.

Tags