9 Replies - 1150 Views - Last Post: 06 August 2010 - 01:18 PM

#1 thursdayniac   User is offline

  • D.I.C Regular

Reputation: 6
  • View blog
  • Posts: 255
  • Joined: 26-April 09

Aligning <div>s

Posted 06 August 2010 - 07:13 AM

I have a few web pages all with the same main <div>. At the top of each I have <div align="center" />
so that the main divs are in the middle of the screen. However, each page's main div seems to be in a unique spot on the screen. For example... when you change pages, you can tell that the pages arent aligned with respect to each other b/c you can see the shift. Is there anyway I can align these pages to the exact same spot on the screen? They're all the exact same. Thanks.

Is This A Good Question/Topic? 0
  • +

Replies To: Aligning <div>s

#2 Atli   User is offline

  • Enhance Your Calm
  • member icon

Reputation: 4241
  • View blog
  • Posts: 7,216
  • Joined: 08-June 10

Re: Aligning <div>s

Posted 06 August 2010 - 07:27 AM

Could you show us the code, or better yet, give us a link? (It's kind of hard to debug stuff like this with nothing to work with.)

If they have an absolute width, you could try to replace the <div align="center"> with <div style="width: 500px; margin: auto;">, given that the width is 500px. You could also try <div style="position: fixed; left: 50%; margin-left: -250px;"> for the same effect. Not sure if that will fix the misalignment issue, but it will center the divs. (And being CSS, you could move it to the header or into an external CSS file. HTML is for structure, CSS for presentation ;))
Was This Post Helpful? 0
  • +
  • -

#3 CTphpnwb   User is online

  • D.I.C Lover
  • member icon

Reputation: 3837
  • View blog
  • Posts: 13,998
  • Joined: 08-August 08

Re: Aligning <div>s

Posted 06 August 2010 - 07:30 AM

View Postthursdayniac, on 06 August 2010 - 09:13 AM, said:

They're all the exact same.

No they're not. There is something different about them, most likely a div inside the main div is going past the main div's border on one or more page.
Was This Post Helpful? 0
  • +
  • -

#4 thursdayniac   User is offline

  • D.I.C Regular

Reputation: 6
  • View blog
  • Posts: 255
  • Joined: 26-April 09

Re: Aligning <div>s

Posted 06 August 2010 - 07:50 AM

View PostAtli, on 06 August 2010 - 06:27 AM, said:

Could you show us the code, or better yet, give us a link? (It's kind of hard to debug stuff like this with nothing to work with.)

If they have an absolute width, you could try to replace the <div align="center"> with <div style="width: 500px; margin: auto;">, given that the width is 500px. You could also try <div style="position: fixed; left: 50%; margin-left: -250px;"> for the same effect. Not sure if that will fix the misalignment issue, but it will center the divs. (And being CSS, you could move it to the header or into an external CSS file. HTML is for structure, CSS for presentation ;))

This post has been edited by thursdayniac: 06 August 2010 - 04:45 PM

Was This Post Helpful? 0
  • +
  • -

#5 oneal.michaels   User is offline

  • D.I.C Head
  • member icon

Reputation: 4
  • View blog
  • Posts: 116
  • Joined: 25-June 10

Re: Aligning <div>s

Posted 06 August 2010 - 07:51 AM

Try adding div{overflow:hidden;} to your css and if that fixes the problem then you have content stretching one of your divs out, other than that without an example i cant really debug it
Was This Post Helpful? 0
  • +
  • -

#6 drhowarddrfine   User is offline

  • D.I.C Regular

Reputation: 39
  • View blog
  • Posts: 275
  • Joined: 28-July 10

Re: Aligning <div>s

Posted 06 August 2010 - 11:01 AM

As stated above, none of these pages are the same. In one case, you are trying to center with the body or the form as the parent element. In another you have a table inside far too much other stuff for such a simple page. In addition, your markup looks like 1998 all over again which is typical of asp generated code.
Was This Post Helpful? 1
  • +
  • -

#7 thursdayniac   User is offline

  • D.I.C Regular

Reputation: 6
  • View blog
  • Posts: 255
  • Joined: 26-April 09

Re: Aligning <div>s

Posted 06 August 2010 - 11:17 AM

View Postdrhowarddrfine, on 06 August 2010 - 10:01 AM, said:

As stated above, none of these pages are the same. In one case, you are trying to center with the body or the form as the parent element. In another you have a table inside far too much other stuff for such a simple page. In addition, your markup looks like 1998 all over again which is typical of asp generated code.


So basically it's my poor HTML skillz? lol. I really hate front end stuff =(
Was This Post Helpful? 0
  • +
  • -

#8 drhowarddrfine   User is offline

  • D.I.C Regular

Reputation: 39
  • View blog
  • Posts: 275
  • Joined: 28-July 10

Re: Aligning <div>s

Posted 06 August 2010 - 12:08 PM

I wasn't going to say that :) . You you use asp which contributes to that. On top of that, you're declaring xhtml but using html attributes that were deprecated years ago and not even allowed in xhtml. But I don't want to sound negative. :)
Was This Post Helpful? 0
  • +
  • -

#9 thursdayniac   User is offline

  • D.I.C Regular

Reputation: 6
  • View blog
  • Posts: 255
  • Joined: 26-April 09

Re: Aligning <div>s

Posted 06 August 2010 - 12:50 PM

Alright but I still dont understand why they dont line up.

Each "main" div is the exact same width, and im telling it to line up these divs in
the middle of the screen by using <div align="center">... Why does it place them in different spots?
I mean I realize my HTML sucks but I cant think of any logical reason this is happening.
I know I have divs within the main divs... but why would this matter?
Was This Post Helpful? 0
  • +
  • -

#10 thursdayniac   User is offline

  • D.I.C Regular

Reputation: 6
  • View blog
  • Posts: 255
  • Joined: 26-April 09

Re: Aligning <div>s

Posted 06 August 2010 - 01:18 PM

Well, everything I try seems to make it worse. I have even COPY AND PASTED the exact code from one page to the other... so they should behave the exact same, yet they dont. HTML makes absolutley no sense to me sometimes. Hopefully after this project I never have to deal with it again. Guess I have to start these pages over from scratch.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1