Stop Second Div wrappng вокруг плавающего Div

Question

У меня возникла небольшая проблема с позиционированием div в моем проекте.

+------------------------+ 
|+-------+ ~~~~  TITLE| <--how can I stop the text wrapping up the 
||  | ~~~~~~~~~~~~~ |\      left hand side here? 
||  | ~~~~~~~~~~~~~ | \ 
||  | ~~~~~~~~~~~~~ | \ 
||  | ~~~~~~~~~~~~~ | \ 
|+-------+   ^| Title Div (class="widgetHeader" in example) 
+---------------------|--+ 
^    | 
    |     \ 
Thermometer div  \ 
(all good)    \ 
         "widgetContent" in example fiddle 

Однако, я хочу заставить заголовок div прекратить обтекание содержимого.

Что-то вроде:

+------------------------+ 
|+-------+   TITLE| 
||  | ~~~~~~~~~~~~~ | 
||  | ~~~~~~~~~~~~~ | 
||  | ~~~~~~~~~~~~~ | 
||  | ~~~~~~~~~~~~~ | 
|+-------+ ~~~~~   | 
+------------------------+ 

Я то, что я хочу, чтобы заставить каждый виджет.

This is the fiddle.

Два основных класса являются:

.widgetHeader { 
    padding-top:5%; 
    float:right; 
    margin-right:4px; 
    font-weight:bold; 
    text-decoration:underline; 
} 
.widgetContent { 
    float:left; 
    text-align:left; 
    padding-top:20%; 
} 

Который в конце CSS в примере.

Я знаю, что я могу решить это достаточно легко, используя теги <br /> в HTML, но я уверен, что должен быть легко реализован здесь.

Я думаю, что основная проблема здесь в том, что Title выровнен по правому краю, и содержание выравнивается влево.

Любое решение для CSS (так как оно предназначено для экранов различного размера, я предпочитаю использовать% вместо px)?

Answer 1

Закрепление код

Не float его, вместо этого вы можете прямо выровнять его с text-align, например, так:

.widgetHeader { 
    padding-top:5%; 
    margin-right:4px; 
    font-weight:bold; 
    text-align:right; 
    text-decoration:underline; 
} 

Here is the updated fiddle

---

Альтернативный подход

Если бы я делал это сам с нуля, я бы, вероятно, сделать что-то вроде этого:

.main { 
 
    display:block; 
 
    width:300px; 
 
    border:1px solid #999; 
 
    background-color:#EEE; 
 
    padding:5px; 
 
} 
 
.image { 
 
    float:left; 
 
    display:block; 
 
    width:120px; 
 
    height:120px; 
 
    border:1px solid #999; 
 
    background-color:#FFF; 
 
} 
 
.content { 
 
    display:block; 
 
    margin-left:130px; 
 
    color:#444; 
 
} 
 
.title { 
 
    text-align:right; 
 
    font-weight:bold; 
 
} 
 
.clear{ 
 
    clear:both; 
 
}

<div class="main"> 
 
    <div class="image"></div> 
 
    <div class="content"> 
 
     <div class="title">Title Here</div> 
 
     <p>The rest of the content goes here and will look beautiful and majestic.</p> 
 
     <div class="clear"></div> 
 
    </div> 
 
</div>

Here is a working example

Answer 2

Для класса ".widgetHeader" удалить имущество "float: right" и добавить "text-align: right;". Это решит вашу проблему.

Answer 3

Вместо использования поплавкового text-align: right и display: block (для предотвращения название для обертывания под термометром div)

.widgetHeader { 
    display: block; 
    text-align: right; 
    padding-top:5%; 
    margin-right:4px; 
    font-weight:bold; 
    text-decoration:underline; 
} 

Fiddle here

ИЛИ

Вы все еще можете использовать поплавок и поставить максимальную ширину вашего заголовка дел.

.widgetHeader { 
    max-width: 150px; 
    float: right; 
    padding-top:5%; 
    margin-right:4px; 
    font-weight:bold; 
    text-decoration:underline; 
} 

Fiddle here

Answer 4

Вам нужно только изменить одну вещь (2, если и хотят, чтобы сделать его немного лучше выглядит):

.widgetHeader { 
    text-align:right; <--- add this 
    margin-right:4px; 
    font-weight:bold; 
    text-decoration:underline; 
} 

Удалите обивка-топ. Fiddle here