CODEWITHSUNDEEP
htmlcss
David H
David H

Reputation: 1401

Trying to organize my DIVs

I have the following code: fiddle

<p><strong>One:</strong></p>
<div class="clearfix">
    <div class="clearfix" style="width: 50px; float: left; display: inline-block;">True</div>
    <div class="clearfix" style="float:left; display: inline-block;"><strong>A</strong>: Throughout Windows Azure Connect CTP, many customers have asked for Windows Azure Connect relay presence in geographic locations outside US. Today we are very happy to announce that we have added new relays in Europe and Asia, with the launch of Windows Azure Connect CTP refresh, you can now choose a relay region that is close to your own geographic location to optimize network performance. </div>


</div>     <p><strong>Two:</strong></p>
<div class="clearfix">
    <div class="clearfix" style="width: 50px; float: left; display: inline-block;">True</div>
    <div class="clearfix" style="float:left; display: inline-block;"><strong>A</strong>: Throughout Windows Azure Connect CTP, many customers have asked for Windows Azure Connect relay presence in geographic locations outside US. Today we are very happy to announce that we have added new relays in Europe and Asia, with the launch of Windows Azure Connect CTP refresh, you can now choose a relay region that is close to your own geographic location to optimize network performance. </div>
</div>

What I am trying to achieve is a heading "One" and below that one row with a DIV on the left containing the word "True" and a div on the right containing text. Followed by the same thing except with a heading of "Two".

Can anyone out there see what I am doing wrong. The fiddle output looks really bad and totally wrong.

What I want:

One
True   dsafjfdsjdsafjdsafasdfasdfasfd
       asdfasdfasdfsdafdsfsdfdsafdsaf
       asfdadsffffffff


Two
False  dsafjfdsjdsafjdsafasdfasdfasfd
       asdfasdfasdfsdafdsfsdfdsafdsaf
       asfdadsffffffff

After a long time spent looking into this the only thing I could get to work correctly was tables. Thanks everyone for your help.

Upvotes: 0

Views: 134

Answers (3)

Naveed Butt
Naveed Butt

Reputation: 2901

Try adding style="clear: both;" on the second div which has the text Two

UPDATE:

<div class="clearfix">
    <p><strong>One:</strong></p>
    <div class="clearfix" style="width: 50px; float: left; display: inline-block;">True</div>
    <div class="clearfix" style="float:left; display: inline-block;"><strong>A</strong>: Throughout Windows Azure Connect CTP, many customers have asked for Windows Azure Connect relay presence in geographic locations outside US. Today we are very happy to announce that we have added new relays in Europe and Asia, with the launch of Windows Azure Connect CTP refresh, you can now choose a relay region that is close to your own geographic location to optimize network performance. </div>   
</div>     
<div class="clearfix" style="clear: both;">
    <p><strong>Two:</strong></p>
    <div class="clearfix" style="width: 50px; float: left; display: inline-block;">True</div>
    <div class="clearfix" style="float:left; display: inline-block;"><strong>A</strong>: Throughout Windows Azure Connect CTP, many customers have asked for Windows Azure Connect relay presence in geographic locations outside US. Today we are very happy to announce that we have added new relays in Europe and Asia, with the launch of Windows Azure Connect CTP refresh, you can now choose a relay region that is close to your own geographic location to optimize network performance. </div>
</div>

Upvotes: 0

serialworm
serialworm

Reputation: 733

Try this:

You'll want to remove the borders I put in just to show where the elements are. The key here was that you need to clear your floats. Also you need to add a width to the right div containing the text

<p><strong>One:</strong></p>

<div class="clearfix">
    <div class="clearfix" style="border: solid; width: 50px; float: left;">True</div>
    <div class="clearfix" style="border: solid; float:left; width: 300px;">
        <strong>A</strong>: Throughout Windows Azure Connect CTP, many customers have asked for Windows Azure Connect relay presence in geographic locations outside US. Today we are very happy to announce that we have added new relays in Europe and Asia, with the launch of Windows Azure Connect CTP refresh, you can now choose a relay region that is close to your own geographic location to optimize network performance.
    </div>
    <div style="clear: both"></div>

Upvotes: 0

JohnP
JohnP

Reputation: 50009

Is this what you're looking for? : http://jsfiddle.net/jomanlk/eAFD6/

.wrap {
    overflow:auto;
    margin-bottom: 10px;

}

h2 {
    display:block;
    background:#AA0000;
}

.state {
    float: left;
    width: 10%;
    background:#00AA00;
}

.text {
    float:right;
    width:80%;
    background:#0000AA;
}

<div class='wrap'>
    <h2>One</h2>
    <div class='state'>True</div>
    <div class='text'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam placerat porttitor commodo. Suspendisse nec diam eros. Donec porta lacus sit amet urna cursus sit amet malesuada mi condimentum. Praesent nec nisi tortor. Nunc accumsan, nulla posuere hendrerit suscipit, arcu enim interdum urna, sit amet suscipit leo ligula vitae eros.</div>
</div>

<div class='wrap'>
    <h2>Two</h2>
    <div class='state'>True</div>
    <div class='text'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam placerat porttitor commodo. Suspendisse nec diam eros. Donec porta lacus sit amet urna cursus sit amet malesuada mi condimentum. Praesent nec nisi tortor. Nunc accumsan, nulla posuere hendrerit suscipit, arcu enim interdum urna, sit amet suscipit leo ligula vitae eros.</div>
</div>

Upvotes: 2

Related Questions