Я использую ваш HTML и CSS из FF 3.0.10.
Когда вы переставляете элемент CENTERTOP так, чтобы он находился между элементами LEFTOP и RIGHTTOP, элемент RIGHTTOP не падает «со страницы», а текст «RIGHT» просто падает на следующую строку.
Мое решение предлагается ниже (вы заметите, что у меня есть некоторые дополнения и лучшие методики).
HTML-код:
<html>
<head>
<link rel="stylesheet" href="global.css">
</head>
<body>
<div id="top-bar">
<div id="leftTop">
LEFT
</div>
<div id="centerTop">
CENTER
</div>
<div id="rightTop">
RIGHT
</div>
</div>
<div class="clearer">
</div>
<div id="randomContent">
RANDOM CONTENT
</div>
</body>
КОД CSS:
#top-bar {
margin: 0;
font-family: Arial;
}
#leftTop {
float: left;
width: 20%;
border: 1px solid red;
}
#centerTop {
float: left;
width: 20%;
border: 1px solid blue;
}
#rightTop {
border: 1px solid green;
}
.clearer {
clear: both;
}
#randomContent {
background-color: yellow;
}
Таким образом, вы заметите в HTML, что элементы div расположены в порядке от ЛЕВОГО К ЦЕНТРАЛЬНОМУ ПРАВО. В этом CSS это было отражено перемещением левых элементов LEFTTOP и CENTRETOP влево. Вы также заметите, что я указал свойство width в элементах LEFTTOP и CENTERTOP, чтобы вы могли размещать элементы div настолько широко, насколько вам нужно. (Вы сможете визуально увидеть ваши изменения ширины, как я добавил в рамке на divs). Свойство процента ширины не применено к элементу RIGHTTOP, так как он будет использовать оставшиеся 60% ширины (после того, как LEFTTOP и CENTRETOP израсходуют 40%).
Я также добавил CLEARER div. Подумайте о CLEARER div - это разрыв горизонтальной линии. По сути, он действует как линия разграничения для отделения плавающих элементов div от содержимого, приведенного ниже.
Затем вы можете добавить любой контент, который хотите, в раздел RANDOMCONTENT.
Надеюсь, это поможет:)