CODEWITHSUNDEEP
csslayouthtml
Niklas Rosencrantz
Niklas Rosencrantz

Reputation: 26681

How to make my text render higher up on the page?

enter image description here

Now I want the text "(även uppfinnare)" to display at the top row. The HTML that does it now is

<div class="data-box">   
            <div class="personName"><strong>    
                3. Kee Marcello&nbsp;
             </strong></div> 
        <div class="otherDetails">(även uppfinnare)</div> 

        <table border="0"><tr><td></td><td>Telefon</td><td>123</td></tr>
        <tr><td></td><td>Fax</td><td>123</td></tr>
        <tr><td></td><td>E-post</td><td>123</td></tr>
        <tr><td>null</td><td>Referens</td><td></td></tr>
        </table> 


    </div>

The relevant CSS is

.data-box {
width:650px;
height:100px;
border:1px solid #cbcbcb;
}
.personName {     float:left;     width:300px;   }  
.otherDetails {     float:right;     width:450px;      }

Can you help me? Thanks

Upvotes: 0

Views: 1080

Answers (3)

Rodik
Rodik

Reputation: 4092

Both your elements are floated (one to the right, one to the left), and together they make up 750px. but the container element is only 650px wide.

when floated elements run out of space, they get shuffled to the next line.

either make the children elements smaller (to fit into 650px) or make the parent bigger(750px)

Upvotes: 1

Juan G. Hurtado
Juan G. Hurtado

Reputation: 2137

It falls down because it doesn't fit on the container. .data-box is 650px width, and .personName and .otherDetails width sums up to 750px

Upvotes: 1

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123438

apply float left both to .personName and .otherDetails and make sure that .data-box width is almost 750px (300px + 450px) or just reduce the size of the 2 side-by-side div so the sum of their width is no wider than 650px

Upvotes: 1

Related Questions