what is the reason for the for matting with ‘position:absolute;‘ ?
this is nost likely the cause for the overlapping.
what are you trying to achive with that formatting?
as it is, this is more a general CSS problem than a WordPress problem.
Yes, setting the position property to absolute takes the element out of the “document flow,” such that it will overlap other elements. Are you able to share a link to a demonstration page or post?
Thread Starter
sg16
(@sg16)
Yes, if I change the position:absolute the problem dissapears, however, this is the only way in which I’m able to position the items where I want them on the page.
Unfortunately I’m building the theme on a localhost, so can’t link to anything.
What I want to achieve is to have the text from a post positioned to the left of an image gallery (tiled) from the same post, so something like this:
.____________________________
|..images....................| HEADER
|............................| text text text text
|............................| text text text text
|............................| text text text text
|............................| text text text text
|............................| text text text text
|____________________________|
If I change the position of the body to relative or any of the other options, it jumps below the images like this:
.____________________________
|..images....................| HEADER
|............................|
|............................|
|............................|
|............................|
|............................|
|____________________________|
text text text text
text text text text
text text text text
text text text text
text text text text
text text text text
Does that make sense?
You mean you want the text positioned to the right of the image gallery, as shown in the example?
Assuming that both the image gallery and the text are in their own <div> elements, and that the combined width of each <div> element is narrower than or equal to the width of the parent container, you should be able to float both elements to the left so the text comes up next to the image gallery. For example, if the image gallery <div> has a class of gallery assigned to it, and the text <div> has a class of desc assigned to it, then adding a CSS rule like this should work:
.gallery,
.desc {
display: inline-block;
float: left;
}
The one unknown is the header, which I assume is also in a separate <div>. Perhaps the header is so tall that it’s pushing the text <div> down? Hard to tell without being able to examine the page. You should really learn how to use a web debugging tool like Firebug or Chrome Dev Tools, because they will allow you to interactively play with the CSS and see the results right away.
Thread Starter
sg16
(@sg16)
Hi,
Thanks for the quick response! I am quite new to all this, so will definitely look into the debugging tools.
I managed to fix my problem by changing the format in the wp-post options to pre-formatted and then format the text manually rather than using the custom paragraph format. The format for the text in my css is now:
#body-prosjekt pre{
display:block;
position:absolute;
width:300px;
height: 500px;
font-size:13px;
line-height:20px;
left:520px;
top:40px;
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word;
This seem to be working, if anyone has the same problem as me!
