SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot
    Join Date
    Jan 2002
    Posts
    167
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Box Centre Aligning and Width: 100% problem

    I have 2 problems with CSS:

    How do centre align a box, in this case a <div> container, inside another (<p>) Container? i cant find the attribute in the CSS 2 Specifications.

    Also I have 3 images, on 1 line (by using display: inline property). It is supposed to make a header bar, but i cannot make the center image expand to automatically fill the whole line e.g. using width: 100% without it pushing the other 2 images to lines above and below it, is there any way of doing this?
    Wilco

  2. #2
    SitePoint Zealot
    Join Date
    Jan 2002
    Posts
    167
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay I solved the first problem by using using

    {
    position: relative;
    left: 10%;
    width: 80%;
    }

    but that seems something of a hack, is there a better way of doing it? and the second problem still stands
    Wilco

  3. #3
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    For your <div> problem you can do this instead of the way you did it:
    Code:
    [your class in the bracketed information] {
      margin-left: auto;
      margin-right: auto;
    }
    Change the bracketed information to your own. As long as you have a proper DOCTYPE specified it will work.

  4. #4
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    div {
    margin-left: auto;
    margin-right: auto;
    width: 80%;
    }
    As for your problem with three images in a row, requires thinking about how the box model works (100% equals 100%, 100% does not equal 100% minus something)

    You should be able to work it out with this as a starting point:

    Code:
    <img src="fibble.gif" alt="fibble" style="width: 100px; height: 23px; display: block; float: left;">
    <img src="fibble.gif" alt="fibble" style="width: 100px; height: 23px; display: block; float: right;">
    <div style="padding: 0px 100px;">
    <img src="fibble.gif" alt="fibble" style="width: 100%; height: 23px; display: block;">
    </div>
    Douglas
    Hello World


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
  •