5 replies [Last post]
Fruit and Veg
Offline
newbie
UK
Last seen: 12 years 11 weeks ago
UK
Timezone: GMT+1
Joined: 2007-09-17
Posts: 9
Points: 0

Below is the relevant code. If you want to examine the page in full then visit - http://www.thebrandsurgery.co.uk/testsite/. It's all valid. The space inbetween the text and the pink title's is what I'm trying to get rid of.

The problem is that I need to position the div id="text" negatively because of the logo. This then leaves unwanted space at the bottom of the text. No matter what I do, because the text is negatively positioned, it still leaves the bottom space as though the text was positioned normally.

Any help would be great.

HTML


1) Content here. column long long column very long fill fill fill long text text column text silly very make long very fill silly make make long make text fill very long text column silly silly very column long very column filler fill long make filler long silly very long silly silly silly long filler make column filler make silly long long fill very.

2) Content here. column long long column very long fill fill fill long text text column text silly very make long very fill silly make make long make text fill very long text column silly silly very column long very column filler fill long make filler long silly very long silly silly silly long filler make column filler make silly long long fill very.

CSS

div#content {float:right; width:660px; margin:0; padding:0; background-image:url('images/backgroundfade.gif');background-repeat: repeat-y;}

div#text {position:relative; top:-100px; left:0; width:615px; margin:0 20px 15px; padding:0; border: 1px #000000 solid;}
:curse:

qube99
Offline
Regular
Texas
Last seen: 13 years 3 weeks ago
Texas
Timezone: GMT-7
Joined: 2007-09-11
Posts: 39
Points: 0

Give it a negative

Give it a negative margin-bottom.

Steve Strickland
Ecommerce-Retail.com

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Setting an element position

Setting an element position relative then shifting it's position using offset values will leave a space, position relative means that the element is shifted relative to it's inflow position, the area it should occupy is still reserved for it.

Better would have been to position the logo absolute with the container positioned relative for context placement of the logo, logo would be set top:-5px left:60px and the #text div would have a normal top margin ~120px to push it down out of the way of the logo.

Try to avoid using too much by way of top/left offsets to position elements as it has the problems you ran across.

The negative bottom margin will work but it's best to find a more robust solution.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Fruit and Veg
Offline
newbie
UK
Last seen: 12 years 11 weeks ago
UK
Timezone: GMT+1
Joined: 2007-09-17
Posts: 9
Points: 0

qube99 wrote:Give it a

qube99 wrote:
Give it a negative margin-bottom.

Perfect. Thanks a lot.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Sorry guess the explanation

Sorry guess the explanation wasn't helpful :shrug: Smile

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Fruit and Veg
Offline
newbie
UK
Last seen: 12 years 11 weeks ago
UK
Timezone: GMT+1
Joined: 2007-09-17
Posts: 9
Points: 0

Hugo wrote:Sorry guess the

Hugo wrote:
Sorry guess the explanation wasn't helpful :shrug: Smile

No, thanks for the explanation. The other answer was much shorter plus you mention using absolute positioning which I didn't want as I didn't think the logo would remain centered when the screen size is changed.

Anyway, it all works and is strict valid so I'm hapy as Larry.

Cheers.