Home/ Questions/Q 6872791
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T03:58:28+00:00

I have a div that contains inside 3 ‘floated’ divs. The containing div has

  • 0

I have a div that contains inside 3 ‘floated’ divs. The containing div has a line of text. The three floating inner divs also have a line of text.

When I specify text-align center for the outermost containing div, the three nested divs appear first, on one row next to each other left-to-right, and THEN the containing div’s text appears to the right of the contained divs, centered in the space to the right of them.

Instead, I don’t understand why the outermost containing div’s text will not appear centered in the browser window, then below that the 3 contained divs and their text would appear. That’s what I need to happen.

Here is the code. By the way I tried to embed a .jpg image into this question so you can see the problem — anyone know how to display a screenshot or .jpg into a question here?

<head>

<style>
#myRowStyles
{
  text-align:center;
  margin-bottom:100px;
  background-color:#b0e0e6;
  border: 1px solid red;
}       

#leftSide
{
  width:120px;
  float:left;
  margin-left:10px;
  margin-top:30px;
  border: 1px solid red;
}

#centerPiece
{
  width:120px;
  float:left;
  margin-left:10px;
  margin-top:30px;
  border: 1px solid red;
}

#rightSide
{
  width:120px;
  float:left;
  margin-left:10px;
  margin-top:30px;
  border: 1px solid red;
}
</style>
</head>


<div id="myRowStyles"><b>THIS IS THE TOP OF THE ROW</b>
   <div id="leftSide">  LEFT SIDE -- Leftie
   </div>
   <div id="centerPiece"> Centerpiece, Folks.
   </div>
   <div id="rightSide">  All Righty -- RIGHT SIDE
   </div>
</div>
<div style="clear:both">
</div>
<div id="myRowStyles"><b>THIS IS ROW #2</b>
   <div id="leftSide">  LEFT SIDE -- Leftie
   </div>
   <div id="centerPiece"> Centerpiece, Folks.
   </div>
   <div id="rightSide">  All Righty -- RIGHT SIDE
   </div>
</div>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I think that to make divs behave like tables you must define the display attributes in CSS:

    #container {
display: table;
}

#row  {
display: table-row;
}

#left, #right, #middle {
display: table-cell;
}

    So you will also need to add an extra <div> at the beginning for the container. I haven’t tested this.

    Also, I dont think you can make a single row span 3 columns when using DIVs so you must do something like this:

    <head>

<style>

#container {
  width:90%;
  float:center;
  margin-left:10px;
  margin-top:30px;
  border: 1px solid blue;
  text-align:centre;
  display: table;
}

#myRowStyles
{
  text-align:center;
  background-color:#b0e0e6;
  border: 1px solid red;
  display: table-row;

}       

#leftSide,#centerPiece,#rightSide
{
  width:120px;
  margin-left:10px;
  margin-top:30px;
  border: 1px solid red;
  display: table-cell;

}
</style>
</head>

<div id="container">
<div id="myRowStyles">
   <div id="leftSide"> 
   </div>
   <div id="centerPiece"> Row 1
   </div>
   <div id="rightSide"> 
   </div>
</div>
<div id="myRowStyles">
   <div id="leftSide">  LEFT SIDE -- Leftie
   </div>
   <div id="centerPiece"> Centerpiece, Folks.
   </div>
   <div id="rightSide">  All Righty -- RIGHT SIDE
   </div>
</div>


<div id="myRowStyles">
   <div id="leftSide"> 
   </div>
   <div id="centerPiece"> Row 2
   </div>
   <div id="rightSide"> 
   </div>
</div>
<div id="myRowStyles">
   <div id="leftSide">  LEFT SIDE -- Leftie
   </div>
   <div id="centerPiece"> Centerpiece, Folks.
   </div>
   <div id="rightSide">  All Righty -- RIGHT SIDE
   </div>
</div>
</div>
    • 0