/    Sign up×
Community /Pin to ProfileBookmark

div displaying incorrectly.

Copy linkTweet thisAlerts:
Sep 22.2008

Hi, im a having trouble with the way a div is displaying on [URL=”http://www.yewstopconcrete.co.uk”]this page[/URL].
Its basically an image placed in the div #rightbox.

On some monitors (at work) it displays fine, but at home it appears out of line.
Also when i resize the browser the div scales differently to the rest of the page.

Could anyone give me some advice on how i might rectify this. Its literally driving me nuts.

Thanks in advance.

to post a comment
CSS

8 Comments(s) ↴

Copy linkTweet thisAlerts:
@FourCourtJesterSep 22.2008 — Hi there,

My theory is it's because of your margins.

Your #rightbox div isn't encapsulated inside your #content div, thus it isn't constrained by the conditioning you did to content.

So the #rightbox takes its parameters to the page. Ie - Margin-right is measuring 265px from the right-hand side of the browser, not the #content div.

Did you do this intentionally? Because that's why it scales differently.
Copy linkTweet thisAlerts:
@rodd1000authorSep 22.2008 — Hi and thanks for the reply.

Yes i did it intentionally because i when i tried placing the #rightbox in the content div it displaced the text content on the left side of the page.

I suppose im better of placing it inside the content div but is there a way to stop it displacing the left text. I have tried adding float: left and clear right to th #rightbox div but it still moves the text.


Thanks again.
Copy linkTweet thisAlerts:
@FourCourtJesterSep 22.2008 — usually

[CODE]<div id="#content">
[INDENT]<div id="#leftbox" style="position:relative; float:left;"></div>[/INDENT]
[INDENT]<div id="#rightbox" style="position:relative; float:right"></div>[/INDENT]
</div>[/CODE]

does the trick nicely.

What do you mean by 'displaces the text'? The text is encapsulated within the left box, so it shouldnt technically move.

Also remove the margins if u try to implement the above method from your #rightbox.
Copy linkTweet thisAlerts:
@rodd1000authorSep 22.2008 — hi, i found it pushes the text down the page. So im a little unsure where to place the #rightbox div in the html. This is why it ended up outside the content div.

What does the "position:relative" function do to the div?

Thanks
Copy linkTweet thisAlerts:
@FourCourtJesterSep 22.2008 — position:relative lets you position the div relative to where it would normally display within your html markup.

So toggling position:relative with float:right allows a container (div in this case) to float to the left of where it would normally render (default is left aligned).

If you have two containers within a parent container, and the parent is wide enough to encapsulate both div's side by side, they will render so.

Based on the code on Yewstop, the parent is 800px, and your combined width is roughly 740ish, ONLY if you remove the margins.

Just try putting the #rightbox after the closing div tag of the #leftbox inside your #content, and add the css, and remove the margins.
Copy linkTweet thisAlerts:
@rodd1000authorSep 22.2008 — ah i got it now. I'll try it tomorrow whilst at work, i never really understood why divs would nudge each other around the way they do. ive spent many hours scratching my head to figure out why. The way you have explained it now makes sense. Thanks for that...really appreciated.

I'll post back to let you know how i get on.

Cheers!
Copy linkTweet thisAlerts:
@rodd1000authorSep 23.2008 — Thanks very much for your help mate, all sorted now.

One last thing if you don't mind..?

The tab links at the top of the page for some reason both stay orange when you click between the pages butonly the active page should be orange.

Any idea how i might rectify this ?

Thanks again.
Copy linkTweet thisAlerts:
@FourCourtJesterSep 23.2008 — Just taking a quick look, you've applied the same css styling to each link.

If you want to color it differently, maybe make a new class and set the 'active' page link to that class?

I see a 'hover' class on the contact page, but you have no 'hover' class defined anywhere?
×

Success!

Help @rodd1000 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.27,
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,
)...