CODEWITHSUNDEEP
htmlcsscss-float
Optiq
Optiq

Reputation: 3182

Why is this div not inline with the others when there's plenty of space for it?

Here's the fiddle of my project https://jsfiddle.net/Optiq/65rddhu4/

If you look at the label on the right side that says "Strongest" you'll notice that it sits beneath even the div it's contained within. I initially had the div narrower in width but even as I extend it out it still stays on the bottom.

I know a way to work around it is to use CSS to add a position attribute to force it to where I want it to be, but from my experience with positioning things like that it may look right in one browser but may be 400px away in a different browser. Why is this occurring?

Here's the HMTL

                <div class="texfrm_o" style="height:128px;">
                <div class="texfrm_i" style="width:99%; height:128px; margin:auto;"><br />
                    <label class="label_02" style="width:77%; text-align:center; margin:auto;">Generating Ideas</label><br />
                    <div class="anscont">
                        <div class="r_cont_lab" style="float:left; margin-left:4px;">
                            Weakest
                        </div>

                        <div class="radcont">
                            <div class="radbox">
                                <label for="q7a1" class="rad_lab">1</label>
                                <input type="radio" class="rad_buttn2" value="1" name="Generating Ideas" id="q7a1">
                            </div>

                            <div class="radbox">
                                <label for="q7a2" class="rad_lab">2</label>
                                <input type="radio" class="rad_buttn2" value="2" name="Generating Ideas" id="q7a2">
                            </div>

                            <div class="radbox">
                                <label for="q7a3" class="rad_lab">3</label>
                                <input type="radio" class="rad_buttn2" value="3" name="Generating Ideas" id="q7a3">
                            </div>

                            <div class="radbox">
                                <label for="q7a4" class="rad_lab">4</label>
                                <input type="radio" class="rad_buttn2" value="4" name="Generating Ideas" id="q7a4">
                            </div>

                            <div class="radbox">
                                <label for="q7a5" class="rad_lab">5</label>
                                <input type="radio" class="rad_buttn2" value="5" name="Generating Ideas" id="q7a5">
                            </div>

                            <div class="radbox">
                                <label for="q7a6" class="rad_lab">6</label>
                                <input type="radio" class="rad_buttn2" value="6" name="Generating Ideas" id="q7a6">
                            </div>

                            <div class="radbox">
                                <label for="q7a7" class="rad_lab">7</label>
                                <input type="radio" class="rad_buttn2" value="7" name="Generating Ideas" id="q7a7">
                            </div>

                            <div class="radbox">
                                <label for="q7a8" class="rad_lab">8</label>
                                <input type="radio" class="rad_buttn2" value="8" name="Generating Ideas" id="q7a8">
                            </div>

                            <div class="radbox">
                                <label for="q7a9" class="rad_lab">9</label>
                                <input type="radio" class="rad_buttn2" value="9" name="Generating Ideas" id="q7a9">
                            </div>

                            <div class="radbox">
                                <label for="q7a10" class="rad_lab">10</label>
                                <input type="radio" class="rad_buttn2" value="10" name="Generating Ideas" id="q7a10">
                            </div>

                        </div>

                        <div class="r_cont_lab" style="float:right; margin-right:4px;">
                            Strongest
                        </div>

                    </div><!--anscont-->
                </div><!--texfrm_i-->
            </div><!--texfrm_o-->

Here's the CSS elements at work with it

.texfrm_o{
    width:77%;
    /*background-color:#006;*/
    display:block;
    margin:auto;
    }

.texfrm_i{
    border-radius:11px;
    display:block;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9f9f9), color-stop(24%,#cecece), color-stop(67%,#cecece), color-stop(67%,#f2f2f2), color-stop(67%,#cecece), color-stop(100%,#828282)); /* Chrome,Safari4+ */
    box-shadow:#383838 0px 11px 5.6px;
    }
.label_02{
    width:88%;
    height:22px;
    display:block;
    font-family:'Oswald', sans-serif;
    font-size:12pt;
    background-color:#c9fffb;
    color:#489c7f;
    box-shadow:#8fd7d2 0px 0px 33px;
    border-radius:2.2px;
    }

.r_cont_lab{
    background-color:#CC9;
    width:88px;
    height:22px;
    font-size:8pt;
    text-align:center;
    font-family:'Roboto', sans-serif;
    font-size:11pt;
    }

.radcont{
    width:400px;
    height:55px;
    background-color:#096;
    margin:auto;
    display:block;
    }

.radbox{
    width:40px;
    height:55px;
    float:left;
    display:block;
    background-color:#CC9;
    }

.anscont{
    background-color:#390;
    width:666px;
    height:55px;
    margin:auto;
    display:block;
    }

Upvotes: 0

Views: 34

Answers (3)

Rukhasana Mulani
Rukhasana Mulani

Reputation: 11

Just Remove the height:55px; of '.radcont' class, Then your code of radcont class became as follows.

.radcont{
        width:400px;    
        background-color:#096;
        margin:auto;
        display:block;
        }

https://jsfiddle.net/65rddhu4/2/

Upvotes: 0

Rajesh kannan
Rajesh kannan

Reputation: 634

I have changed the following line in your fiddle.

And it WORKED Check the following fiddle

https://jsfiddle.net/dvwuxvaa/

I changed this 1 line in HTML part for weakest tab

<div class="r_cont_lab" style="float:left; margin-left:4px;margin-right: 42px;">

and changed css display property of the below

.radcont{
        width:400px;
        height:55px;
        background-color:#096;
        margin:auto;
        display:inline;
        }

let me know if it is helpful

Upvotes: 0

Alex Hughes
Alex Hughes

Reputation: 66

Is this the result that you were looking for?

https://jsfiddle.net/Optiq/65rddhu4/ https://i.sstatic.net/sscyC.png

The change I made was moving your
<div class="r_cont_lab" style="float:right; margin-right:4px;">Strongest</div>
block above the other div, this way it is adding it before just like you want (I hope)

Upvotes: 1

Related Questions