SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Guru
    Join Date
    Nov 2002
    Posts
    841
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Shrinking to fit and centering around floated element

    I am trying to duplicate this table based layout in css:
    Code:
    <table align="center" bgcolor="#EEEEEE">
    <tr align="left"><td>Left</td><td align="right">Right</td></tr>
    <tr><td colspan="2">
    <table bgcolor="#DDDDDD">
    <tr><td>hello</td><td>css</td><td>world</td></tr>
    </table>
    </td></tr>
    </table>
    I want the "Left" text to align with the left edge of the table, the "right" text to align with the right edge of the table, and the table to be centered on the page with a shaded background. I do not know the size of the table, the "right" text, or the "left" text.

    my attempt:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <head>
    <style>
    .section {
        background-color: #EEEEEE;
        margin-right: auto;
        margin-left: auto;
    }
    
    .left {
        float: left;
    }
    
    .right {
        float : right;
    }
    
    table {
        background-color: #DDDDDD;
        clear: both;
    }
    </style>
    </head>
    <html>
    <div class="section">
    <div class="left">
    Left
    </div>
    <div class="right">
    right
    </div>
    <table>
    <tr><td>hello</td><td>css</td><td>world</td></tr>
    </table>
    </div>
    </html>
    Unfortunately, I cannot get the "section" to close in on its content when it contains floated blocks.

    Here is another example of this that I have long wondered about:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <head>
    <style>
    ul {
        background-color: #EEEEEE;
    }
    </style>
    </head>
    <html>
    <ul>
    <li>Hello</li>
    <li>css</li>
    <li>world</li>
    </ul>
    </html>
    How does one get the background of the ul so that it is only as large as necessary to contain its contents?

    Thanks.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    How does one get the background of the ul so that it is only as large as necessary to contain its contents?
    The problem is that the default width of static containers is auto which is effectively 100% width. therefore you would need to specify a width to limit the static container.

    You could use position absolute which defaults to content width by default but obviously you then have to work with an absolute element which will depend on the type of layout etc.

    Code:
    ul {
    	background-color: #EEEEEE;
       position:absolute;
    }
    You will probably have to use a table for your first example as there is no easy way to do what you want.

    Paul

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    here is an experimental layout but is a little bit complicated but worth looking at all the same.

    http://www.pmob.co.uk/temp/centre-no-width2.htm

    the original example was here which may be easier to see whats happening.

    http://www.pmob.co.uk/temp/centre-no-width.htm

    Paul


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
  •