Problems with css and div tags
I have a title bar that navigates horizontally across my web page, which consists of one div tag and three nested div tags.
HTML:
<div id="top-bar">
<div id="leftTop">
LEFT
</div>
<div id="rightTop">
RIGHT
</div>
<div id="centerTop">
CENTER
</div>
</div>
CSS
#top-bar
{
margin: 0;
padding: 1px 4px;
font-size: x-small;
background-color: #005555;
font-family: Arial;
}
#top-bar .separator
{
padding: 0 7px;
border-right: 0px solid #fff;
border-left: 0px solid #fff;
}
#leftTop
{
display: inline;
float: left;
}
#rightTop
{
display: inline;
float: right;
}
#centerTop
{
color: #ffffff;
text-align: center;
}
And it works great, except for the fact that the div tags are breaking out in the HTML, which I don't like. If I order the div tags by placing them left, center and right, in HTML, then the right div just disappears from the web page! I'm guessing it has something to do with the float and text-align attributes having a conflict.
Does anyone have any ideas on what is going on here, or is there an easier way to do this in CSS?
a source to share
I am running your HTML and CSS from FF 3.0.10. When you rearrange the CENTERTOP div between the LEFTOP and RIGHTTOP delimiters, the RIGHTTOP div does not fall off the page, but the RIGHT text just falls on the next line.
My solution is suggested below (you will notice that I have some additions and some advanced techniques).
HTML code:
<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 CODE:
#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;
}
So, you will notice in the HTML that the divs are ordered from LEFT to CENTER to RIGHT. In this CSS, this is reflected in the left side LEFTTOP and CENTRETOP left. You will also notice that I have specified the width property on the LEFTTOP and CENTERTOP divs so that you can split your divs as wide as you want. (You will be able to visually see the width changes as I added the border to the div). No Width Percentage property was applied on the RIGHTTOP splitter as it will consume the remaining 60% of the width (after LEFTTOP and CENTRETOP consume 40%).
I also added the CLEARER div. Think div CLEARER is a horizontal line break. Essentially, it acts like a demarcation line to separate the floating divs from the content below.
Then you can add whatever content you want to the RANDOMCONTENT div.
Hope it helps :)
a source to share
Another solution:
- Set leftTop, centerTop and rightTop to : table-cell ,
- Set the top bar to display: table-row ,
- Set the container to display: table
- Set the width of the container and row (# table-bar) to 100%;
- Set column widths to the ratios you want (e.g. 25% for left and right, 50% for center)
- The caveat: table, table-row and table-cell css values don't work in IE 5.5 or 6 (and probably Opera 8); but they work well in all modern browsers. IE conditions can be used to split code for IE> 5 and IE <7.
TEST:
<html>
<head>
<title>3 Column Header Test</title>
<style type="text/css">
body#abod {
background-color:#F5ECBD;
color:#000;
}
#hdrrow {
margin:0;
padding:0;
width:100%;
border:1px solid #0C5E8D;
display:table;
}
#top-bar {
margin:0;
padding:1px 4px;
width:100%;
font-size:100%;
background-color:orange;/*#005555;*/
font-family: Arial;
border:1px solid #000;
display:table-row;
}
#leftTop {
margin:0;
padding:0 16px;
width:24%;
text-align:left;
color:#000;
background-color:#F0DD80;
border:1px dashed #f00;
display:table-cell;
}
#centerTop {
margin:0;
padding:0 16px;
width:40%;
margin:0 auto;
text-align:center;
color:#000;
background-color:#F5ECBD;
border:1px dashed #f00;
display:table-cell;
}
#rightTop {
margin:0;
padding:0 16px;
width:24%;
text-align:right;
color:#000;
background-color:/*#F0DD80;*/transparent;
/*shows the orange row color*/
border:1px dashed #f00;
display:table-cell;
}
#footer {
padding:25px;
color:#000;
background-color:#F5ECBD;
}
</style>
</head>
<body id="abod">
<div id="hdrrow">
<div id="top-bar">
<div id="leftTop">
LEFT
</div>
<div id="centerTop">
CENTER
</div>
<div id="rightTop">
RIGHT
</div>
</div>
</div>
<h4 id="footer">Footer Lorem ipsum dolor sit amet</h4>
</body>
</html>
a source to share
I don't know that it disappears, but it will drop out. For this reason, many sites are down (I know I know).
Another alternative:
#top-bar
{
margin: 0;
padding: 1px 4px;
font-size: x-small;
background-color: #005555;
font-family: Arial;
}
#top-bar .separator
{
padding: 0 7px;
border-right: 0px solid #fff;
border-left: 0px solid #fff;
}
#top-bar>div
{
float: left;
width: 33%;
}
#rightTop
{
text-align: right;
}
#centerTop
{
color: #ffffff;
text-align: center;
width: 34%;
}
And then place <br style="clear:both"/>
right before the top bar div closes.
<div id="top-bar">
<div id="leftTop">
LEFT
</div>
<div id="centerTop">
CENTER
</div>
<div id="rightTop">
RIGHT
</div>
<br style="clear:both"/>
</div>
Not sure if you want the width to be defined like this.
a source to share
Use relative positioning to replace the positions of sections after they have been placed:
Html
<div id="top-bar">
<div id="leftTop">
LEFT
</div>
<div id="centerTop">
CENTER
</div>
<div id="rightTop">
RIGHT
</div>
</div>
CSS
#leftTop {
width:33%;
float:left;
}
#centerTop {
width:33%;
float:right;
position:relative;
right:33%;
}
#rightTop {
width:33%;
float:right;
position:relative;
left:33%;
}
I am using the same process in Perfect Liquid Layouts to reorder the columns .
a source to share