Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    May 2011
    Location
    new york
    Posts
    112
    Thanks
    4
    Thanked 0 Times in 0 Posts

    3 divs inside one containing div, third div on a separate line?

    http://goo.gl/q8sfH


    Very quickly, why is "strong guidance" on the third label, a line below where the other two appear?

    and how does one fix this?


    pretty simple thing going on

    Code:
    <div class="xaxislabels">
    <div class="weaklabel">Weak</div>
    <div class="inlinelabel">Inline </div>
    <div class="stronglabel">Strong</div>
    </div>

    and the css is


    Code:
    div.xaxislabels {
    float:left;
    width:900px;
    text-align:center;
    display:inline;
    }
    
    div.weaklabel{
    float:left;
    }
    div.inlinelabel{
    text-align:center;
    }
    div.stronglabel{
    float:right;
    }

  • #2
    New Coder
    Join Date
    May 2009
    Posts
    34
    Thanks
    0
    Thanked 3 Times in 3 Posts
    Since you have a width assigned, I just created a width of 300px for each interior div, floated left and then assigned text-align.

    Code:
    <style type="text/css">
    div.xaxislabels {
    float:left;
    width:900px;
    text-align:center;
    display:inline;
    }
    
    div.weaklabel{
    float:left;
    width: 300px;
    text-align: left;
    }
    div.inlinelabel{
    float:left;
    width: 300px;
    }
    div.stronglabel{
    text-align:right;
    float:left;
    width: 300px;
    }
    </style>

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,672
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello phpchick,
    On the page you link, .weaklabel is floated left
    .stronglabel is floated right
    .inlinelabel is full width of it's parent - which is why the last float drops.

    For that to work you would need to have your floats come first in the markup, like this -
    Code:
    pointer;color:#909090;fill:#909090;" y="395" x="890"><tspan id="mf94" x="890">Highcharts.com</tspan></text></svg></div></div>
    <div id="mf95" class="xaxislabels">
    <div id="mf96" class="weaklabel">Weak Guidance</div>
    <div id="mf98" class="stronglabel">Strong Guidance</div>
    <div id="mf97" class="inlinelabel">Inline Guidance Expected</div>
    </div>
    <div id="mf99" class="xaxistitle">Future Outlook</div>
    Here is another approach that sets widths on those elements - 3 column demo
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

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