ansaurus

Question

Answer 1

+1 A:

Try float: left; on #centerTop or display: inline on all three without any floats.

Evan Meagher 2009-05-26 23:12:43

Answer 2

A:

This works fine, but it depends on what you need. If you dont know the height of the content and you want it to expand dynamicly, then this is not enough:

    #leftTop
    {
        float: left;
    }
    #rightTop
    {            
        float: right;
    }
    #centerTop
    {
        float:left;
        text-align: center;
    }

Egil Hansen 2009-05-26 23:30:25

Answer 3

A:

I just tested the code from the original post in Firefox 3.0.10, Opera 9.64, IE8 and Google Chrome 2.0.181.1

All browsers showed all 3 divs, not a single div fell off the screen... Are you perhaps using IE6?

WebDevHobo 2009-05-26 23:45:02

Answer 4

A:

Hi, there, I am running your HTML and CSS of FF 3.0.10. When you re-arrange the CENTERTOP div to be between the LEFTOP and RIGHTTOP divs, the RIGHTTOP div doesn't fall 'off the page' but the "RIGHT" text just falls off onto the next line.

My solution is proposed below (you'll notice I have some additions and some best-practice 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'll notice in the HTML that the divs are arranged in order from LEFT to CENTRE to RIGHT. In this CSS, this has been reflected by floating the LEFTTOP and CENTRETOP divs left. You will also notice that I have specified a width property on the LEFTTOP and the CENTERTOP divs, to enable you to space out your divs as wide as you want. (You'll be able to visually see your width modifications as I've added in a border on the divs). No width percentage property has been applied on the RIGHTTOP div as it will consume the remaining 60% of the width (after the LEFTTOP and CENTRETOP have consumed the 40%).

I have also added a CLEARER div. Think of the CLEARER div is a horizontal line break. Essentially it acts as a line of demarcations to separate the floated divs from the content below.

You can then add whatever content you want in the RANDOMCONTENT div.

Hope this helps :)

Lycana 2009-05-27 00:12:14

Answer 5

A:

Another solution:

Set the leftTop, centerTop, and rightTop to display:table-cell,
Set the top-bar to display:table-row,
Set a container to display:table
Set the width of the container and row (#table-bar) to 100%;
Set the width of the columns to the desired ratios (e.g., 25% for left and right, 50% for center)
caveat: table, table-row, and table-cell css display values do not work in IE 5.5 or 6 (and maybe Opera 8); but they do work nicely in all contemporary browsers. IE conditionals 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>

Fran Corpier 2009-05-27 04:13:53

Answer 6

A:

I don't know that it disappears, but it would drop down a line. Lot's of websites put it out of order for that reason (I know I do).

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 put <br style="clear:both"/> right before you close your top-bar div.

<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's defined like this, however.

rpflo 2009-05-27 04:32:52

Answer 7

A:

Use relative positioning to swap the positions of the divs after they have been floated:

The HTML

<div id="top-bar">
    <div id="leftTop">
        LEFT
    </div>
    <div id="centerTop">
        CENTER
    </div>
    <div id="rightTop">
        RIGHT
    </div>
</div>

The 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 use the same process in my Perfect Liquid Layouts to change the column source ordering.

Matthew James Taylor 2009-05-27 05:09:37

ansaurus

tags:

views:

answers:

css and div tag layout problems

related questions