/    Sign up×
Community /Pin to ProfileBookmark

Prevent Textareas/DIVs from Overlapping

Copy linkTweet thisAlerts:
Jan 11.2010

I’m working on a little web page to test out some JavaScript and PHP, but I’ve actually run into problems with the design side of things. I have a textarea and a div adjacent to eachother on the same page, and it looks fine when the browser is in full screen, but if you make the browser windows smaller (or maybe even if you just have a smaller computer screen), the Textarea begins to overlap with the DIV. In fact, if you make the screen too narrow, the two boxes actually switch places!

You can see what I mean at [URL=”http://jerail.ca/fun/multicolor/”]http://jerail.ca/fun/multicolor/[/URL]. If you don’t have JavaScript enabled the site won’t work, but you can still see the layout by going to [URL=”http://jerail.ca/fun/multicolor/?no_check_js”]http://jerail.ca/fun/multicolor/?no_check_js[/URL].

Try restoring the windows and changing the size around. You’ll quickly see what I mean, how the different elements overlap. I need to somehow create containers that will force a horizontal scrollbar rather than let the elements to overlap.

to post a comment
CSS

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@skywalker2208Jan 11.2010 — It is because you are setting the exact position. The right box you set it 180px from the right side of the screen. So when you minimize the screen it is going to try to keep it 180px from the right. That is why it flips to the other side of the other text box because you also have that box 200px from the left so the browser will try to keep it 200px from the left side of the screen.
Copy linkTweet thisAlerts:
@JerailauthorJan 12.2010 — Do you know of any solution that would allow me to place the elements where I want them, but not have them overlap with eachother? At one time I would have used tables, but I'm trying to keep with CSS/XHTML standards.
Copy linkTweet thisAlerts:
@skywalker2208Jan 12.2010 — You could set a main div with a set width and then use float left for one div and float right for the other.

[code=php]
<div id="main">
<div id="left">
Has float left
</div>
<div id="right">
Has float right
</div>
</div>
[/code]
×

Success!

Help @Jerail 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 6.16,
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: @nearjob,
tipped: article
amount: 1000 SATS,

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

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...