PDA

View Full Version : How to stop image overlaping following div?

pepsi_max2k
02-22-2007, 04:21 PM
Hi, sorry this one's probably really obvious. Normally a search would solve it but all the solutions I've found so far don't work too good. I'm also a complete novice at xhtml (tried it a couple years ago but all those divs seemed to have a mind of their own compared to good ole tables :p wordpress has made me learn though :thumbsup: )

http://www.inaudible.co.uk/blog/

The image to the left is overlapping the seperate div below. I've tried adding things like clear: both and various display types for the both divs and image but nothing helps. I'm used to tables where something within a table would move the rest of the table, div's clearly don't care :rolleyes:

I've also got virtually the same problem with the sidebar (whenever the content of the main page isn't as long as the sidebar, the sidebar overlaps it). Example here:

http://inaudible.co.uk/blog/?s=dsfsd

I'm guessing the solution is probably the same for both, so could someone point me in the right direction or suggest a possible fix?

Thanks.


FWIW, here's some relavent css controling the things:


<div id="page">
. <div id="content" class="narrowcolumn">
. . <div id="post">
. . . <div id="entry">
. . . . <img class="alignleft"> entry text
. . . </div>
. . <div id="post">
. . . <div id="entry">
. . . . another entry
. . . </div>
. . </div>
. </div>
. <div id="sidebar">
. </div>
</div>

.narrowcolumn .entry, .widecolumn .entry {
padding: 0 5px 0 0;
margin: 0;
}

img.alignleft {
padding: 0;
margin: 0 7px 2px 0;
display: inline;
}

#sidebar
{
padding: 0 0 10px 5px;
position: absolute;
right: 10px;
top: 15px;
width: 145px;
text-align: center;
}
nolvorite
02-22-2007, 04:27 PM
hello pepsi_max2k,
probably you should fix your 18 html errors (http://validator.w3.org/check?uri=http%3A%2F%2Finaudible.co.uk%2Fblog%2F) in your document. I'm not sure of what you're talking about, but I think this could help.
pepsi_max2k
02-22-2007, 04:31 PM
Nope, they're all errors caused by Google's neat looking video bar feed (http://www.google.com/uds/solutions/videobar/index.html) script and a couple caused by my counter script. They don't have any affect on the rest of the page.

EDIT: wait.. no... i have an img without a closing /. damn you old html habits :p
Stardog
02-22-2007, 04:35 PM
EDIT: Actually, looking at your code it's probably because it's positioned absolutely. That's probably not the best way of doing it.

What you should probably do it "float:right" the sidebar. Then add "<div style="clear:both"></div>" above the very bottom </div> in your code so that the box will stretch to hold the sidebar in it.

I don't think it's the best thing to use that code, but it's the only way I know how.

Also, you've forgot to end-div your first "post" id.

EDIT2: Something like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
#page {
border:3px solid black;
}
#content {
float:left;
width:500px;
}

.narrowcolumn .entry, .widecolumn .entry {
padding: 0 5px 0 0;
margin: 0;
}

img.alignleft {
padding: 0;
margin: 0 7px 2px 0;
display: inline;
}

#sidebar {
float:right;
padding: 0 0 10px 5px;
width: 145px;
text-align: center;
}
</style>

</head>

<body>

<div id="page">

<div id="content">

<div id="post">
<div id="entry">
<img class="alignleft"> entry text
</div>
</div>

<div id="post">
<div id="entry">
another entry
</div>
</div>

</div>

<div id="sidebar">sidebar</div>

<div style="clear:both"></div>

</div>

</body>
</html>
pepsi_max2k
02-22-2007, 04:44 PM
>> EDIT: Actually, looking at your code it's probably because it's positioned absolutely. That's probably not the best way of doing it.

Just tried that out and looking at it, it's gonna cause a whole world of other problems - mainly taking on the same padding as the main page, so i can't get a margin to the left of the bar, gotta figure out a way to align it to the top of the page while the rest is pushed down a little, etc etc... But at least I know where to start with the side bar... just the img thats a problem now :(

EDIT: yeah, all of the above = the whole #page layout needing changing. and not knowing too much about xhtml, i don't think i'd get too far :(
pepsi_max2k
02-22-2007, 04:56 PM
Genius.

<div id="entry">
<img...>
sblah blah.
<div style="clear: both"></div>
</div>

I'd love to know a) why that works, and b) why the hell the things dont just move to accomodate an image in the first place, but i'm happy.

And fwiw, wordpress users of default kubrick template, stick that in your templates like so:



INDEX.PHP:

<div class="entry"><?php the_content('Read the rest of this entry &raquo;'); ?>

<div style="clear: both"></div>
</div>


ARCHIVE.PHP:

<div class="entry">
<?php the_content() ?>

<!-- The following div stops images from overlapping the entry div. --> <div style="clear: both"></div>
</div>


SINGLE.PHP:

<div class="entry">
<?php the_content('<p class="serif">Read the rest of this entry &raquo;</p>'); ?>

<?php wp_link_pages(array('before' => '<p><strong>Pages:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>
<!-- The following div stops images from overlapping the entry div. --> <div style="clear: both"></div>
</div>