Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Westi on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Relative positioning leaves whitespace

Status
Not open for further replies.
Slimsteve

Slimsteve

Technical User
Jun 10, 2003
67
GB
Hi,

I am very new to css, divs etc and I am having problems with whitespace being left after I use a relative positioning i.e. the whitespace is where the object was originally. In the following code the white space is below the yellow box after the text is moved up.

Any help or advice would be greatly appreciated.

Thanks

Slim

Code: 
<style>
div#main{border:solid 1px red; border-color:red;  border-style:solid; width:760px;}
div#header{border:solid 1px red; border-color:red;  border-style:solid; width:760px;}
div#leftcol{border:solid 1px green; border-color:green;  border-style:solid; width:413px; float: left;}
div#rightcol{border:solid 1px blue; border-color:blue;  border-style:solid; width:340px; float: left;}
div#footer{border:solid 1px blue; border-color:blue;  border-style:solid; width:760px;}

span#leftimage{position:relative; left: 0px; top: 0px; z-index:1;background-color:yellow; height:200px; width:413px}
span#leftextarea{position:relative; left: 10px; top: -80px;z-index:2;}
</style>

<div id="main">
	<div id="header">Header</div>
	<div id="leftcol">
			<span id="leftimage">This is where the image will go</span>
			<span id="leftextarea">This text over the image, but why is there a white space below</span></div>
	<div id="rightcol">right</div>
	<div id="footer">footer</div>
</div>
 
Sort by date Sort by votes
Welcome to CSS.

Before you go any further, I suggest you read this article. Then, when you're done reading, I suggest you put one at the very top of your html. A complete one.

Now, there are a couple of things you should know. You don't need the "span" or "div" before an element defined with an id. So, instead of "span#leftimage", you can just have "#leftimage".

z-indexes only work with absolutely positioned elements. spans are inline elements, and therefore you cannot set the height and width.

After you've read that article and given your html a complete doctype, please feel free to come back for your next round of questions. There will be many :)

And, don't get discouraged, after a couple of weeks, you'll be madly in love with CSS.

Further reference:
*cLFlaVA
----------------------------
[tt]tastes great, less filling.[/tt]
 
Upvote 0 Downvote

Ok, that was some intetesting reading and makes some sense. With that in mind I have changed my code to the following, but I still get the whitespace if i move the relative position.

I have heard so many good things about using css opposed to tables that is why I am trying this.

Code: 
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>test layout page</title>
</head>

<body>
<style>
#main{border:solid 1px red; border-color:red;  border-style:solid; width:760px;}
#header{border:solid 1px red; border-color:red;  border-style:solid; width:760px;}
#leftcol{border:solid 1px green; border-color:green;  border-style:solid; width:413px; float: left;}
#rightcol{border:solid 1px blue; border-color:blue;  border-style:solid; width:340px; float: left;}
#footer{border:solid 1px blue; border-color:blue;  border-style:solid; width:760px;}

#leftimage{position:relative; left: 0px; top: 0px; background-color:yellow; }
#leftextarea{position:relative; left: 0px; top: 0px;}
</style>


<div id="main">
    <div id="header">Header</div>
    <div id="leftcol">
           <span id="leftimage">This is where the image will go in this area hopefully</span>
           <span id="leftextarea">This text goes over the image, but why is there a white space below</span></div>
    <div id="rightcol">right</div>
    <div id="footer">footer</div>
</div>
</body>
</html>
 
Upvote 0 Downvote
If you're trying to get text to go over an image it may be easier (if it fits your design) to include the image as a background to the div that contains the text. So, for example you could have the image as the background for the "leftcol". There are css properties that allow you to position the background and tell it to repeat or not repeat.
Code: 
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>test layout page</title>
<style>
#main{
  border:solid 1px red;
  border-color:red;
  border-style:solid;
  width:760px;}
#header{
  border:solid 1px red;
  border-color:red;
  border-style:solid;
 width:760px;}
#leftcol{
  border:solid 1px green; 
  border-color:green;
  border-style:solid;
  width:413px; float: left;
  background-color: white;
  background-image: url("/some/image.jpg");
  background-repeat: no-repeat;
  background-position: center;}
#rightcol{
  border:solid 1px blue;
  border-color:blue;
  border-style:solid;
  width:340px;
  float: left;}
#footer{
  border:solid 1px blue;
  border-color:blue;
  border-style:solid;
  width:760px;}
</style>
</head>

<body>
<div id="main">
    <div id="header">Header</div>
    <div id="leftcol">
           <p>This text goes over the image, but why is there a white space below</p></div>
    <div id="rightcol">right</div>
    <div id="footer">footer</div>
</div>
</body>
</html>
One thing to note here, if your image is bigger than the amount of text you have, the height of the "leftcol" div may be smaller than the height of the image. You may be able to fix this by adding top and/or bottom padding to the div to ensure it is at least big enough for the background image.

Also, all of those background styles can be rolled up into one, I just listed them separately so you can see the available options:
Code: 
background: white url("/some/image.jpg") no-repeat center;

And another note: if you already planned to have a background image for leftcol, just wrap your text in another div and put the background on that.

 
Upvote 0 Downvote
Oh, and some info on relative position from the w3.org web site:
Then the box is offset relative to its normal position. When a box B is relatively positioned, the position of the following box is calculated as though B were not offset.
Click to expand...
So in other words, your relatively position text that is moved up leaves space as though it were not moved at all. This is how it should be.

 
Upvote 0 Downvote
The problem I have is that image has two buttons on it which are supposed to be image maps, so when I set it as as background I have not been able to do that, anyway here is the code.

Code: 
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>test layout page</title>
</head>

<body>
<style>
#main{border:solid 1px red; border-color:red;  border-style:solid; width:760px;}
#header{border:solid 1px red; border-color:red;  border-style:solid; width:760px;}
#leftcol{border:solid 1px green; border-color:green;  border-style:solid; width:413px; height:279px; float: left;
background-image: url("[URL unfurl="true"]http://www.manakedi.co.uk/shop/images/mkimages/avocado.jpg");[/URL] background-repeat: no-repeat;}
#rightcol{border:solid 1px blue; border-color:blue;  border-style:solid; width:340px; float: left;}
#footer{border:solid 1px blue; border-color:blue;  border-style:solid; width:760px;}

#leftimage{position:relative; left: 0px; top: 0px; background-color:yellow; }
#leftextarea{position:relative; left: 0px; top: 0px;}
</style>


<div id="main">
    <div id="header">Header</div>
    <div id="leftcol">
           <span id="leftextarea">This text goes over the image, but why is there a white space below</span></div>
    <div id="rightcol">right</div>
    <div id="footer">footer</div>
</div>
</body>
</html>
 
Upvote 0 Downvote
Well if you need an image map below text you won't be able to put the image as the background. Even doing it your original way, with text above the image you may have problems. Your users may have trouble clicking on the image instead of the text. Can you make the text part of the image?

You may also be able to absolutely position the text and place it where you'd like.

 
Upvote 0 Downvote

I am glad that you said that I cannot do an image as a background with an image map, because that had been something I was going to ask next.

The reason the text is not part of the image is because we want to allow the user to increase the size of the text in the web browser themselves (accessibilty issues).

Thinking about this I might try setting the image as background and using buttons instead of image maps and position them using absolute on the page.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

rrmcguire
  • Locked
  • Question
removing whitespace
Replies
3
Views
166
rrmcguire
rrmcguire
lupidol
  • Locked
  • Question
Positioning elements, how do I do it ?! 2
Replies
2
Views
155
vacunita
vacunita
ggriffit
  • Locked
  • Question
strange div positioning 1
Replies
9
Views
187
ggriffit
ggriffit
Blueie
  • Locked
  • Question
Positioning Twitter box? 1
Replies
7
Views
211
1DMF
1DMF
c0deM0nK424
  • Locked
  • Question
Problem with positioning Logo, Search Box and Language Bar OUTSIDE of the navbar (Bootstrap) 1
Replies
2
Views
130
c0deM0nK424
c0deM0nK424

Part and Inventory Search

Sponsor

Back
Top