471,598 Members | 1,306 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,598 software developers and data experts.

DIV overlapping

3
The div is overlapping the H2 tag. Why?
The adspace may or may not be there... so I cant explicitly set the width of the H2. It should fill up the space available. Thanks

[PHP]<div id="adSpace" style="display:block;float:right;width: 160px; height: 500px; border: 1px solid green;">
Ad goes here. Ad goes here. Ad goes here. Ad goes here. Ad goes here. Ad goes here.
Ad goes here. Ad goes here. Ad goes here. Ad goes here. Ad goes here. Ad goes here.
Ad goes here. Ad goes here. Ad goes here. Ad goes here. Ad goes here. Ad goes here.
Ad goes here. Ad goes here. Ad goes here. Ad goes here. Ad goes here. Ad goes here.
</div>

<h2 style="border: 1px solid blue; background: #9A2A3A; ">
This is a title
</h2>
[/PHP]
Sep 4 '07 #1
5 1845
drhowarddrfine
7,435 Expert 4TB
You have to remember that when you float an element, that element is removed from the normal flow and that is why they are overlapping.
Sep 4 '07 #2
jzeil
3
so how would i fix this?

If you place an HR tag after the H2 you will see how I would like for the H2 to span.
Sep 4 '07 #3
drhowarddrfine
7,435 Expert 4TB
The easiest is to just put the ad div after the h2 and float it right like you are. This may still depend on what content would be displayed to the left of it.

I have a dentist appointment right now so I have to leave.
Sep 4 '07 #4
jzeil
3
naw still doesnt solve it. The code I posted is the root of the problem. The problem exists in a bigger document. There will be H2s above and below the ad. The ad wont always appear either.
Sep 4 '07 #5
drhowarddrfine
7,435 Expert 4TB
Something like this:
[HTML]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title></title>

<style type="text/css">

h2{background: #9A2A3A;}
#outer{
position:relative;
overflow:auto
}
#adSpace{
float:right;
width:160px;
height:500px;

}
</style>
</head>

<body>

<h2>
This is a title
</h2>
<div id="outer">
<div id="adSpace">
Ad goes here. Ad goes here. Ad goes here. Ad goes here. Ad goes here. Ad goes here.
Ad goes here. Ad goes here. Ad goes here. Ad goes here. Ad goes here. Ad goes here.
Ad goes here. Ad goes here. Ad goes here. Ad goes here. Ad goes here. Ad goes here.
Ad goes here. Ad goes here. Ad goes here. Ad goes here. Ad goes here. Ad goes here.
</div>
</div>
<h2>
This is a title
</h2>

</body>
</html>[/HTML]
Sep 4 '07 #6

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

1 post views Thread by km | last post: by
1 post views Thread by André Søreng | last post: by
11 posts views Thread by Max M | last post: by
3 posts views Thread by Phil Sandler | last post: by
4 posts views Thread by Simon Elliott | last post: by
reply views Thread by Bruce | last post: by
4 posts views Thread by Charlie Brown | last post: by
4 posts views Thread by =?ISO-8859-15?Q?Jean=2DFran=E7ois?= Lemaire | last post: by
2 posts views Thread by XIAOLAOHU | last post: by
reply views Thread by Anwar ali | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.