/    Sign up×
Community /Pin to ProfileBookmark

General Positioning Question

Copy linkTweet thisAlerts:
Jul 26.2008

Hi guys,

I have a question about positioning with CSS. Basically I use absolute positioning to position my divs in my webpage. The problem is when I use absolute positioning and I resize the window the div does not re-position itself to fit in the resized window. This also occurs when I view the webpage in different resolutions.

Alternatively I tried using relative positioning. It did fix the problem, but with relative positioning it leaves an empty space where the original position of the div was and it doesn’t conform to the width and dimensions of my webpage.

So my questions are basically:
1. How can I use absolute positioning to position my divs to the correct spot and preserve the layout when the window is resized or when the page is viewed in different resolutions?

  • 2.

    With relative positioning is it possible to remove the empty space created from the original position of the DIV?

  • 3.

    I’ve heard about using containing blocks but how does it work?

    • Thank you. And I’m sorry if these questions have been asked before. I couldn’t search the forums efficiently because I’m capped for the rest of the month, and this matter is urgent.

    Thanks again.

    to post a comment
    CSS

    5 Comments(s) ↴

    Copy linkTweet thisAlerts:
    @Declan1991Jul 26.2008 — You probably don't need absolute positioning. Have you a sample page that you are trying to render?

    You can also look what can be done very simply by looking at [url=http://csszengarden.com/]CSS Zen Garden[/url].
    Copy linkTweet thisAlerts:
    @CentauriJul 26.2008 — The best way is to use static positioning (which is the default when no positioning method is specified). Objects will then just stack naturally against or below each other (depending on whether they are inline or block elements) from the top left, and margins are used to correctly space the items. Items can also be floated (left or right) and other content will flow around them. Positioning absolutely or by relative shift should be used sparingly, and is useful where you [B]want[/B] things to overlap.
    Copy linkTweet thisAlerts:
    @dfrdesignsauthorJul 27.2008 — The best way is to use static positioning (which is the default when no positioning method is specified). Objects will then just stack naturally against or below each other (depending on whether they are inline or block elements) from the top left, and margins are used to correctly space the items. Items can also be floated (left or right) and other content will flow around them. Positioning absolutely or by relative shift should be used sparingly, and is useful where you [B]want[/B] things to overlap.[/QUOTE]

    Actually that's what I want to achieve. For example if i position an image using static, I want to be able to place a DIV containing a text over it. The only way I know that I can do this is by using absolute or relative positioning. But that's where I encounter the problem stated in my first post.
    Copy linkTweet thisAlerts:
    @CentauriJul 27.2008 — If you are placing text over an image, then I would suspect that image should be a background to the div, and should [B]not[/B] be in the html at all - html should describe the content, and css is for the visual presentation, including images to make the site look good.
    Copy linkTweet thisAlerts:
    @dfrdesignsauthorJul 27.2008 — If you are placing text over an image, then I would suspect that image should be a background to the div, and should [B]not[/B] be in the html at all - html should describe the content, and css is for the visual presentation, including images to make the site look good.[/QUOTE]

    Oh I see what you mean. But how would I move the text in the DIV. Because currently I've placed the text in another DIV. So the parent DIV contains the image BG and there's a child DIV containing the text. Also what if I wanted to place another image in that same DIV? Thanks for all your help.
    ×

    Success!

    Help @dfrdesigns 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.2,
    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: @meenaratha,
    tipped: article
    amount: 1000 SATS,

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

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