/    Sign up×
Community /Pin to ProfileBookmark

why do i get huge space when i use left and right DIV

Copy linkTweet thisAlerts:
Feb 26.2008

hi every1
i use this code for some shades on the left and the right

[code=html]<div style=”background: url(templates/subSilver/banr.gif) repeat-y right top; padding: 0; margin: 0″>
<div style=”background: url(templates/subSilver/banl.gif) repeat-y left top; padding: 0; margin: 0″>

<DIV style=”margin-left: 32px; margin-right: 32px; width:100%”>
PAGE
</DIV>[/code]

it works fine but when i resize the page it shift to the left and i get this huge space on the right, if i remove the left or right shade DIV it works fine, any idea y??
ty..

to post a comment
CSS

14 Comments(s) ↴

Copy linkTweet thisAlerts:
@ray326Feb 26.2008 — Use auto l/r margins and a smaller width.
Copy linkTweet thisAlerts:
@SZeroauthorFeb 26.2008 — details plz..



i tried sth by luck which got to work on IE, i removed float:right, but now on FF the right part doesn't appear..
Copy linkTweet thisAlerts:
@ray326Feb 26.2008 — style="margin-left: auto; margin-right: auto; width:90%"
Copy linkTweet thisAlerts:
@SZeroauthorFeb 26.2008 — but i got a definite width for the shadow so using % will mess it up..

anyway i managed to make a temp sol, i used JS to get browser type and use diff code (with float left) for FF, now there seem to be another problem, on FF all the items are aligned to the left and it should be centered, don't know y..
Copy linkTweet thisAlerts:
@ray326Feb 26.2008 — So it'll be funky when I visit, eh?
Copy linkTweet thisAlerts:
@CentauriFeb 26.2008 — How about a link to this online so we can see what is happening?
Copy linkTweet thisAlerts:
@CentauriFeb 27.2008 — You have a few errors here including two lots of <head> tags, with one of them overlapping a div.....

This can be done easily without using side divs. First, get rid of the code for the floated right div and the javascript generating the left div. Next, move the wrapper div tag so it comes AFTER the </head> and <body> tags in the html. Now if you use left padding and right margin on the div to centre the content, the left image can be a background to the div, and the right image a background to the body :[CODE][COLOR="Silver"]</head>[/COLOR]

<body style="margin:0; background:#F5F9FA url(templates/subSilver/images/banr.gif) right top repeat-y" link=#3F839D vlink=#3F839D alink=#3F839D>

<div style="padding-left: 32px; margin-right: 32px; background: url(templates/subSilver/images/banl.gif) repeat-y">

[COLOR="Silver"]<TABLE cellpadding=0 style="margin-top: 7px;" style="border-collapse: collapse" bordercolor="#006699" border=1 dir=rtl cellspacing=0 width=100%>[/COLOR][/CODE]
Copy linkTweet thisAlerts:
@SZeroauthorFeb 27.2008 — brilliant idea, ty ?
Copy linkTweet thisAlerts:
@SZeroauthorFeb 27.2008 — srry 2 bother again but now a new problem appeared in FF, when i resize the page, the right shadow sticks to the right of the page and goes behind the table, and if u scroll to the right u'll just see it's place empty, any idea how 2 solve this?

ty again
Copy linkTweet thisAlerts:
@CentauriFeb 27.2008 — Setting a minimum width on the body should sort that :[CODE]<body style="margin:0; background:#F5F9FA url(templates/subSilver/images/banr.gif) right top repeat-y[COLOR="Red"]; min-width: 720px;[/COLOR]" link=#3F839D vlink=#3F839D alink=#3F839D>[/CODE]
Copy linkTweet thisAlerts:
@SZeroauthorFeb 27.2008 — well now no horizontal scroll bar appears when i resize it, any idea y?

even if there isn't, i'm done with it, those who use FF should use IE..
Copy linkTweet thisAlerts:
@CentauriFeb 27.2008 — Ths [I]could[/I] be a FF bug when using rtl direction, but not sure. You could try removing the dir="rtl" from the html tag, and just apply it to the outer table tags instead - that way the directon shouldn't affect the body or scrollbars.
Copy linkTweet thisAlerts:
@SZeroauthorFeb 27.2008 — it doesn't matter it shows fine full, again ty so much ?
×

Success!

Help @SZero spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...