SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Threaded View

  1. #1
    SitePoint Addict Volitics's Avatar
    Join Date
    Aug 2003
    Location
    US
    Posts
    280
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question How to set the widths for float:left <div> tags; put tags inside container <div>?

    Hello;

    I have got two questions about the CSS code below. It does not seem to be working properly.

    The first question is about the width of the columns. If I adjust all of the percentages so that the total equals 100% all three of the <div> columns stay side-by-side.

    Calculation for the percentage width of the borders:
    (3px times 2) x 3 equals 18px
    18px divided by 900px = .02 or 2%

    Sum of the width of the borders plus the widths of each <div> tag:
    15% + 68% + 15% + 2% = 100%

    1). My question is this: Is the above methodology the right way to set the widths?

    There is a little bit of a problem with the above method. There is a space between the outside of the right border of the div.right column and the inside of the div.container border. The space looks like it might be 1% or 2%.

    If I set the sum of the borders plus the widths of the <div> tags to equal more than 100% like this:
    15% + 69% + 15% + 2% = 101%
    The div.right <div> column breaks and goes below the left and content <div> tags.
    1a). What's causing the 1% or 2% space between the div.right <div> tag and the inside of the div.container <div> tag? Can someone suggest how I might fix it?


    My second question is about the div.container <div> tag. It will not enclose the three <div> tags (i.e. left, content, and right) unless I include the div.footer <div> tag at the bottom. I have got to include the the footer <div> tag before the div.container <div> tag will encompass the three inside tags.

    If I use the div.footer <div> tag then the div.container <div> tag will encompass all of the tags.

    2). My question is this: How can I get the div.container <div> tag to include the left, container, and right <div> tags without using the footer <div> tag?



    PHP Code:
    div.container
    {
    width90%;
    margin-leftauto;
    margin-rightauto;
    padding0;
    border1px solid blue;
    line-height:150%;
    min-width900px;
    }
    div.headerdiv.footer
    {
    colorwhite;
    background-colorgray;
    clearleft;
    }
    h1.header
    {
    padding0;
    margin0;
    }
    div.left
    {
    height550px;
    width15%;
    border3px solid black;
    floatleft;
    }
    div.content
    {
    height550px;
    width68%;
    border3px solid yellow;
    floatleft;
    }
    div.right
    {
    height550px;
    border3px solid green;
    width15%;
    floatleft;

    PHP Code:

    <div class="container">

    <
    div class="header"><h1 class="header">Web Site Name</h1></div>

        <
    div class="left">
            <
    p>one two three</p>
            <
    p>one two three</p>
            <
    p>one two three</p></div>
        
        <
    div class="content">
            <
    p>four five six</p>
            <
    p>four five six</p>
            <
    p>four five six</p>
            </
    div>
                
        <
    div class="right">
            <
    p>seven eight nine</p>
            <
    p>seven eight nine</p>
            <
    p>seven eight nine</p></div>

        <
    div class="footer">This is the footer</div>

    </
    div
    Thanks.
    Last edited by Volitics; Mar 16, 2011 at 08:22. Reason: Clarify, correction for title
    .


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
  •