/    Sign up×
Community /Pin to ProfileBookmark

CSS Browser Restore Alignment Problem

Copy linkTweet thisAlerts:
May 17.2009

Hello, everyone. I do hope someone here will be able to provide me with an official solution to this problem I’ve been having. The problem is, after messing around, testing out codes, all my content is the way it should be when the browser is maximized, but when I click the restore button next to the close button, one of my DIVs gets moved to the right a bit, and therefore ruins my entire style. I don’t think I could be any more clearer than that. I’ve provided my HTML and CSS below. Could someone tell me how to keep my content aligned the way I had it aligned when the browser was maximized?

Thank you.

<html>

<title>DIV testing</title>

<style type=”text/css”>

DIV.container {color: #ffffff; margin: 0 auto;}

DIV.Header, DIV.footer {background-color: #990000;
width: 48.7%; height: 4%; padding: 0.5em;}

DIV.FloatContentLeft {float: left; margin: 0; background-color: #000000; width: 20%; height: 50%; padding: 1em;}

DIV.FloatContentRight {margin: auto; margin-left: 285px; background-color: #000000; width: 24.7%; height: 50%; border-left: 3px solid #990000; padding: 1em;}

DIV.footer {padding: 0.5em; background-color: #990000; width: 48.7%; height: 6%;}
</style>

<DIV class=”container”>
<DIV class=”Header”>Welcome</DIV>
<DIV class=”FloatContentLeft”>Good evening.</DIV>
<DIV class=”FloatContentRight”>This content text should be aligned to the right.</DIV>
<DIV class=”footer”>This is the footer. Copyright 1427-2009 by Grachel</DIV>

</DIV>

</html>

to post a comment
CSS

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@infinityspiralMay 18.2009 — Give your container div a set width. What's happening now is that it's absorbing the width of the browser so when you reduce the size of the browser window it's also reducing the size of the container.
Copy linkTweet thisAlerts:
@TesilauthorMay 18.2009 — I've just done what you said and added a width to the DIV.Container section and it works quite nicely now. I just had to make a few adjustments to the actual width of the right aligned DIV because it grew a few PXs, but it got the job done. Thanks for your help. Will this method assist me with keeping elements without the use of DIVs aligned as well?
Copy linkTweet thisAlerts:
@infinityspiralMay 18.2009 — I'm not quite sure what you mean about the aligning, can you give me an example?
Copy linkTweet thisAlerts:
@TesilauthorMay 18.2009 — Well, I just mean that since the DIV I had in the code above was having trouble staying where I placed it when I restored the browser, will using a set width always work even if I'm not using a DIV?

Let's say I just created a paragraph, and I placed a margin-left: 10px; on it to move it a bit to the right. When I restore my browser, will the paragraph still be where I had placed it when the browser was maximized or will I have to set a specific width to it as well?
Copy linkTweet thisAlerts:
@infinityspiralMay 18.2009 — Oh, yes it should stay in place now that the width has been locked down in a parent div ?
Copy linkTweet thisAlerts:
@TesilauthorMay 19.2009 — Brilliant. Thanks for your help. I actually have one more question somewhat unrelated to my previous question.

When I align a DIV towards a specific place on the page, it aligns correctly on Mozilla, Google Chrome, Opera; basically most of the browsers except Internet Explorer. I understand this is a common problem. Is there a solution to this problem? I wouldn't mind just having my page viewed correctly on other browsers besides Internet Explorer, but it is kind of an inconvenience.
Copy linkTweet thisAlerts:
@infinityspiralMay 19.2009 — A lot of the problems between the different browsers and there's no real magic formula that works in every situation. Many of the problems between the two are caused by css padding, margins, and borders though because they adjust the widths different inside each one.
×

Success!

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