1. Home
  2. Forums Index
  3. Browser Side / HTML 5:18 am May 1, 2026

Forum Moderators: open

Message Too Old, No Replies

Problem picture

Using up space even after CSS has moved it out the way

         

silkysilky

3:44 am on Jun 14, 2012 (gmt 0)

10+ Year Member



Hi all hope someone here might be able to help me. I am a webdesign newbie so I struggle my way through each page to be honest, but I get the job done in the end. This issue is causing me some trouble though.

It's just a basic HTML web page and some CSS style sheets to move text and pictures in to the right place.

The way I've done it so far is to insert a picture in html, and then I give it a 'class' and the style sheet moves it up and down and puts it where I want. But my issue is that the picture goes to where I want it, but there is a big gap left on the page where the picture was inserted in to the HTML. It's as though the HTML has made space for the picture, then the CSS moves it up and puts it where I want it, but the big space still remains. So it's not the end of the world but I have a scroll bar which scrolls far lower than all the content on the page.

Here's my code:


At the end of the <body> I have:
<p><img src="images/picture.jpg" class="pic"></p>

And then in my CSS I have this:
.pic {
top: -120px;
position: relative;
left: 415px;
width: 610px;
height: 450px;
}


Hope this makes sense. No doubt you can see some glaring errors already, but hopefully it could be easily fixed? Thanks in advance!

tedster

4:15 am on Jun 14, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hello silkysilky, and welcome to the forums.

You're going about this the hard way - and using position:relative is going to leave the space that you are seeing.

What you need to do is understand how natural document flow works. Using relative (or absolute) positioning in the way that you are is not going to be very fruitful. For most code elements, including the <img> element, you can just place in the source code where you want it to appear. Then by using float: and padding and margin attributes, you can do the fine tuning for a more precise psoitioning - and you won't need to use absolute or relative positioning so much.

silkysilky

6:45 am on Jun 14, 2012 (gmt 0)

10+ Year Member



Thank you so much! I have been using HTML for a long time but still very new to CSS so I knew I was doing things a weird way but wasn't sure how and why :) Anyway thank you for the help that will really get me on track!

rocknbil

4:11 pm on Jun 14, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



A little more info as to why it's doing that: as mentioned, absolute positioning takes an element out of the document's natural flow, while relative positioning positions it relative to it's parent container. Since that parent is a paragraph, the paragraph stays where it is and the picture is positioned relative to the paragraph's "natural" position.

As posted, with nothing else on the page, the paragraph is the full width of the page so there's a 415 pixel space to the right inside the paragraph. There's your gap.

One of your best tools for figuring this stuff out will be to work in FireFox (anything but IE) and install the FireBug extension, which allows you to right click an area of a page and select "inspect element" which will highlight elements and their margins and paddings. You can clearly see the gap in the <p> using FireBug.

One way to do what it looks like you're doing is to assign the class to the paragraph which would move the whole chunk, but as mentioned, it's probably a troublesome approach. Assigning float: right to the paragraph might be more useful:

.pic-container {
float:right;
width: 610px;
height: 450px;
}
<p class="pic-container"><img src=".....

Floats have their own quirks you'll need to deal with, but answers to all of them are on this message board.

I like to always try to let the document render in it's most natural flow, modifying it only as necessary. This makes your job easier and un-bloats a lot of HTML code and CSS.

silkysilky

1:35 am on Jun 15, 2012 (gmt 0)

10+ Year Member



Thanks guys this is all helping me a lot.

One issue though. I remade the page without any absolute or relative code, so it's all nice and straightfoward now and everything fits together nicely.

But one issue is that I have some text and I wanted it to go over the top of the image. I think this is why I started using the relative thing in the first place, because it allowed me to do the z-index thing and have the text container over the picture container and it looks nice.

But when I add the text now it either gets squashed to the side of the image, or if I add the "position: relative" but to just the text, it seems to float behind the picture, even although the z-index is high up than the picture's z-index.

I don't suppose there is an easy way of doing this too is there? :)

tedster

2:24 am on Jun 15, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Now you may want to use CSS positioning - and a z-access attribute to keep the text on top of the image.

silkysilky

4:29 am on Jun 15, 2012 (gmt 0)

10+ Year Member



Ahhh ok thanks. It gets tricky now. The z-index seems to not be working but I read that I need to let it know that the text is 'relative' to the picture.

rocknbil

5:13 pm on Jun 15, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



But one issue is that I have some text and I wanted it to go over the top of the image.


AH! This is easier than you think, and kinda fun. :-)

First you have your parent, the paragraph itself. We'll float that paragraph to the right as mentioned, but we're going to assign position:relative to the paragraph. Why? Because without it, if we want to absolutely position an element inside that container, this will take that element out of the document flow and position it relative to the viewport. The position:relative will force the absolutely positioned element to position absolutely . . . relative to the relatively positioned parent. (You may read that confusing prose as many times as you need to . . . )

I'm going to use a span for the absolutely positioned text inside the picture container. A span is by default an inline element, so it won't react to absolute positioning without setting it's display to block. This is also why z-index won't work on an image - it is by default an inline element, to absolutely position it you need to set it's display to block.

Then we set z-indices (indexes? whatever) for span and pic . . . and voila. Working example, note the pic container positions from the top of the body text depending on where it's inserted. :-) 


<!DOCTYPE html> 
<html lang="en"> 
<head> 
 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
 <title>Untitled</title> 
<style type="text/css"> 
#container { 
 /* just to test */ 
 width: 95%; border: 1px solid #000; 
 overflow:hidden; 
} 
#pic-container { 
 float:right; 
 width: 610px; 
 height: 450px; 
 position:relative; 
 margin: 12px 0 12px 12px; 
}  
#pic-container span, #pic-container img { 
 display:block; 
} 
#pic-container span { 
 color: #ff0000; 
 font-size: 1.5em; 
 position: absolute; 
 top: 150px; 
 left: 100px; 
 z-index: 500; 
 width: 75%; 
 text-align: center; 
} 
#pic-container img { 
 z-index: 495; 
} 
</style> 
</head> 
<body> 
<div id="container"> 
 <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque  
 laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi  
 architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia</p> 
 <p> voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni  
 dolores eos qui ratione voluptatem sequi nesciunt. </p> 
 <p id="pic-container"> 
 <img src="sample-image.jpg" alt="My Sample"> 
 <span>This is some text to float over the picture, I've made it long to test wrapping.</span> 
 </p> 
 <p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,  
 consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut  
 labore et dolore magnam aliquam quaerat voluptatem.</p> 
 <p> Ut enim ad minima veniam,  
 quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex  
 ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate  
 velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat  
 quo voluptas nulla pariatur?</p> 
 <p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,  
 consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut  
 labore et dolore magnam aliquam quaerat voluptatem.</p> 
 <p> Ut enim ad minima veniam,  
 quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex  
 ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate  
 velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat  
 quo voluptas nulla pariatur?</p> 
 <p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,  
 consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut  
 labore et dolore magnam aliquam quaerat voluptatem.</p> 
 <p> Ut enim ad minima veniam,  
 quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex  
 ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate  
 velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat  
 quo voluptas nulla pariatur?</p> 
</div><!-- container --> 
</body> 
</html>
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / HTML 5:18 am May 1, 2026