www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 17

Thread: aligning div's

  1. #1
    Join Date
    Dec 2002
    Location
    Manhattan, KS
    Posts
    133

    Question aligning div's

    Is there any other way to horizontally align div's or span's, aside from text-align? I figure there would be, but well it slips my mind right now...

  2. #2
    Join Date
    Nov 2002
    Posts
    984

    Re: aligning div's

    Originally posted by thejoker101
    Is there any other way to horizontally align div's or span's, aside from text-align? I figure there would be, but well it slips my mind right now...
    Spans and divs are 2 very different creatures. In fact text-aligns should NOT horizontally align a div at all (it only happens in IE due to bugs).

    In any case, there are many ways to place or position bothy spans and divs with CSS. You need to be a lot more specific about what you want ikf you are interested in any meaningfull suggestions.
    // Stefan Huszics

  3. #3
    Join Date
    Dec 2002
    Location
    Manhattan, KS
    Posts
    133
    I always thought that. I would figure using text-align should be used only to align text.

    What I'm interrested in, for example, is center-aligning a div on a page using CSS. Is there any simple way of doing this? Aside from doing <div align="center"> which isn't CSS at all...
    Last edited by thejoker101; 01-29-2003 at 04:09 PM.

  4. #4
    Join Date
    Dec 2002
    Location
    Manhattan, KS
    Posts
    133
    <div style="width:400px; margin:0 auto;">This will be centered</div>

    That's what I was thinking of....

  5. #5
    Join Date
    Dec 2002
    Location
    Manhattan, KS
    Posts
    133
    Can anyone help me figure out how to get the top right div - the one holding the top right links - to align all the way to the right in opera7 and ns7. works in ie6 though...

    this is the page:
    http://www.geocities.com/manhattanse.../template.html

  6. #6
    Join Date
    Nov 2002
    Posts
    984
    Looks the same to me in IE 6.01, Opera 7b2 and Mozilla.

    Could you perhaps provide screenshots that show the problem?
    // Stefan Huszics

  7. #7
    Join Date
    Dec 2002
    Location
    Manhattan, KS
    Posts
    133
    Sorry guys, I got it working lastnight and never got around to posting that fact on here.

  8. #8
    Join Date
    Dec 2002
    Location
    Manhattan, KS
    Posts
    133
    Ok, so i decided to replace my table structure with span's and div's. Which is what I should have done in the first place, but oh well, I'm doing it now.

    Anyways, in my quest to align things as I desire I have come across some simple problems that are bothering me.

    this is the page i'm refering to:
    http://www.geocities.com/manhattanse.../template.html

    Opera7 and NS7 both have a big purple box in the middle. It should be the same dim gray color as the two sections to either side. Also, NS7 has a space below the image on the left and one below the links on teh right.

    Any help would be appreciated.

  9. #9
    Join Date
    Nov 2002
    Posts
    984
    Originally posted by thejoker101

    Opera7 and NS7 both have a big purple box in the middle.
    Which is exactly what you tell them to have. In IE it's grey becuse IE is buggy with floats.
    The simplest solution is to remove float:left from .topSectionBigPic

    Also, NS7 has a space below the image on the left and one below the links on teh right.
    This article should explain why that happens and how to fix it
    http://devedge.netscape.com/viewsource/2002/img-table/
    // Stefan Huszics

  10. #10
    Join Date
    Dec 2002
    Location
    Manhattan, KS
    Posts
    133
    I fixed the extra spacing problem, I knew that link you provided was out there somewhere, I simply forgot what it was. Thanks.

    On another note. I'm still not fixing my extra purple box problem. I tried removing the float:left property and it just made the right box jump down below it.

    How do i get it to just be a dim grey box? Aside from changing the background color. Putting an "empty" div in between the two floating divs won't work, I don't think anyways...

  11. #11
    Join Date
    Nov 2002
    Posts
    984
    Originally posted by thejoker101
    On another note. I'm still not fixing my extra purple box problem. I tried removing the float:left property and it just made the right box jump down below it.
    Yes sorry, you also need to place the floated table *grump* before the image to the left in the html document.

    How do i get it to just be a dim grey box? Aside from changing the background color. Putting an "empty" div in between the two floating divs won't work, I don't think anyways... [/B]
    The issue you have is that you are floating all content in the topdiv. That means that there is no content in it that gives it a height which makes it's height 0px high.

    IE however is buggy and fails to incorrectly ignore a floated sections height.
    With IE's broken implementation you can never achive some highly usefull layouts eg something like this
    http://www.w3.org/TR/REC-CSS2/images/float2p.gif

    Anyway, the solution it to make sure the div have some non floated content to give it height.

    BTW you have an error on your page (that should show up in the w3c validator also)

    <span class="topRightLinks">
    <table

    You can NOT have a table in a span. In fact there is no reason why you can't just remove the span all togheter and put your class directly on the table (which you shouldn't be using anyway )
    // Stefan Huszics

  12. #12
    Join Date
    Dec 2002
    Location
    Manhattan, KS
    Posts
    133
    Ok, I've made a few adjustments, such as removing the useless div that surrounds both top spans. I've also changed the table structure to use div's, which for some reason I never got around to doing.

    I resolved the center "purple" box by having the the two span have a 50% width each and aligning the contents of each span to the respective far side, i.e. left span has contents aligned to the left.

    Right now I know I'm missing something simple, but in IE6 there is a break between the two spans, otherwise it would be perfect. In NS7 and (I think opera7) there is no break between the spans, but the right side links are aligned to the left instead of the right.

    Sorry to continually bother people with my problems, but some days my brain just will not work.

  13. #13
    Join Date
    Dec 2002
    Location
    Manhattan, KS
    Posts
    133
    Still baffled by this...

  14. #14
    Join Date
    Nov 2002
    Posts
    984
    Originally posted by thejoker101
    Still baffled by this...
    Opps sorry, missed this post.
    I'll look into it a bit more tomorrow if noone has beaten me to it until then (I'm not at my own comp currently and can't play around with different browsers as I would like to)
    // Stefan Huszics

  15. #15
    Join Date
    Nov 2002
    Posts
    984
    Try this

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>The 17th Degree - Title Here</title>
    <link rel="stylesheet" href="template_files/style.css" type="text/css">
    </head>

    <body>
    <div style="background-color: rgb(105, 105, 105); height:169px;">
    <img src="template_files/17thDegree12.jpg" alt="Welcome To The 17th Degree" style="float:left;">
    aaaaa
    </div>


    </body></html>
    // Stefan Huszics

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles