SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,223
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    center of the entire browser

    Code:
    <!doctype html> 
    <html> 
      <head> 
        <meta charset="UTF-8"> 
        <title>3spans2</title> 
      </head> 
    <body> 
      <div style="text-align:center">
       <span style="float:left;">the long text in left span</span>
       <span style="color:red">center span</span>
       <span style="float:right">right span</span>
      </div>
    </body> 
    </html>
    I have the code above at http://dot.kr/x-test/3spans2.php .

    The text "center span" in red is not exactly in the center of the browser.
    It's actually near to right.

    I like to position it in the center of the entire browser regardless of the length of the text in the left span.

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,798
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    it is actually centering it based on the remaining space after the float are calculated.

    look at this example:

    Code:
    <!doctype html> 
    <html> 
      <head> 
        <meta charset="UTF-8"> 
        <title>3spans2</title> 
      </head> 
    <body> 
      <div style="text-align:center">
       <span style="float:left;">the long text in left span left span</span>
    
    
       <span style="color:red; outline:1px solid pink">center <br>dydhbhd dhdhashdhahd adshhdsahadhadh dhasdh </span>
       <span style="float:right">right</span>
      </div>
    <div style="width:1px; background:red; height:100%;position:absolute; left:50%;"}></div>
    </body> 
    </html>
    as you can see, the text after the line break goes back to the is centered to the page. Actuall; all the text is centered to to the page.. but the text where there is a float will be centered to the REMAINING space. When you float something you cause a wrap-around effect.

  3. #3
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dotJoon View Post
    I like to position it in the center of the entire browser regardless of the length of the text in the left span.
    The only way you could do that would be to remove one of the elements from the page flow with absolute positioning. I would not suggest doing that on a live page, but here is what you wanted to do.

    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Demo Layout</title>
     
    <style type="text/css">
    body {
        margin:0;
        padding:0;
        font: 100%/1.4 arial,helvetica,sans-serif;
    }
    #wrap {
        width:100%;
        overflow:hidden;
        text-align:center;
        position:relative;
    }
    .left, .right {
        float:left;
        background:lime;
        position:relative;
        z-index:2;
    }
    .right {float:right;}
     
    .cntr {
        position:absolute;
        left:0;right:0;top:0;
        z-index:1;
        background:#CDF;
        color:red;
    }
    </style>
     
    </head>
    <body>
     
    <div id="wrap">
        <div class="left">the long text in left div</div>
        <div class="right">right div</div>
        <div class="cntr">centered text</div>
    </div>
     
    </body>
    </html>

  4. #4
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Well, that's not the ONLY way Rayzur -- he could drop it down to it's own line and then use a negative margin to ride it up.

    My only concern using a negative margin or APo would be overlap when the screen is narrow....

    Though there's ANOTHER solution -- use DIV as you did, and fix their widths. If you fix the width of the left and right elements the same the centering will always be correct. Of course then you risk word-wrap.

    If I were to do that, I'd also make sure to set margins so that the center doesn't ride under the side columns.

    untested, but so simple it shouldn't need testing:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en"><head>
    
    <meta
    	http-equiv="Content-Type"
    	content="text/html; charset=utf-8"
    >
    
    <title>
    	Demo Layout
    </title>
     
    <style type="text/css">
    body {
        margin:0;
        padding:0;
        font:normal 85%/140% arial,helvetica,sans-serif;
    }
    .left, .right {
      float:left;
      width:10em;
      background:lime;
    }
    
    .right {
    	float:right;
    }
     
    .cntr {
    	margin:0 10em;
    	background:#CDF;
    	color:red;
    }
    </style>
     
    </head><body>
     
    <div class="left">the long text in left div</div>
    <div class="right">right div</div>
    <div class="cntr">centered text<br>Multiple Lines</div>
     
    </body></html>
    Negating the need for that silly wrapping div

    NOT that DIV or SPAN are likely the correct elements for this content -- though I'd have to SEE the actual content to figure out what the semantic tags for this stuff would be. CSS is only as good as the markup it's applied to, which is why the PROPER process is content > Markup > CSS... which is why presentational classnames and inlined CSS is no way to write code.

  5. #5
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    untested, but so simple it shouldn't need testing:
    ok, I decided to bite

    and lo and behold, it doesn't work in my IE8 or FF3.6

  6. #6
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Though there's ANOTHER solution -- use DIV as you did, and fix their widths. If you fix the width of the left and right elements the same the centering will always be correct. Of course then you risk word-wrap.
    Yeah, I meant to edit out that comment I made about it being the ONLY way to do it.

    Whatever sort of trick you use it's going to involve setting some sort of width with some margins/neg-margins thrown in the mix.

    Here's another quick test that kinda works:

    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Demo Layout</title>
     
    <style type="text/css">
    body {
        margin:0;
        padding:0;
        font: 100%/1.4 arial,helvetica,sans-serif;
    }
    .left, .right {
        float:left;
        background:lime;
        max-width:25%;
        margin:0 -25% 0 0;
    }
    .right {
        float:right;
        margin:0 0 0 -25%;
    }
    .cntr {
        text-align:center;
        color:red;
    }
    .cntr p {
        margin:0;
        padding:0 25%;
        background:yellow;
    }
    </style>
     
    </head>
    <body>
     
    <div class="left">the long text in left div the long text in left div</div>
    <div class="right">right div right div right div</div>
    <div class="cntr"><p>centered text centered text</p></div> 
     
    </body>
    </html>

  7. #7
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In fact a three column layout is what the OP was looking for all along. Look at his next post


Bookmarks

Posting Permissions

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