Home/ Questions/Q 8073113
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-05T14:14:01+00:00

I have several DIV which I want to arrange as shown here Div Layout

  • 0

I have several DIV which I want to arrange as shown here Div Layout design

Below is the HTML that I tried to achieve layout using CSS: 

<body>
<div class="page">

<div>

        <div style="margin: 2px 0 2px 0px; text-align: center; font-size: large">
            <span>Chart Title</span>
        </div>

        <div style="float: left;display:block;">
            <span>Y-Axis Title</span>
        </div>


        <div id="Chart1">
        <!--Chart would be displayed here-->
        </div>

        <div style="clear:both; margin: 2px 0 2px 0px; text-align: center; ">
            <span>X-Axis Title</span>
        </div>

</div>

</div>

Can anyone help me out in CSS to achive the layour mentioned in image ??

Thanks in advance.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I just added some more styles, check it

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<div class="page">

<div>

        <div style="margin: 2px 0 2px 0px; text-align: center; font-size: large; width:100%;display:block;">
            <span>Chart Title</span>
        </div>

        <div style="float: left;display:block;height:400px; width:19%;">
            <span>Y-Axis Title</span>
        </div>


        <div id="Chart1" style="flot:left;display:block; height:400px; width:100%;">
        Chart would be displayed here
        </div>

        <div style="clear:both; margin: 2px 0 2px 0px; text-align: center;display:block;  width:100%;">
            <span>X-Axis Title</span>
        </div>

</div>

</div>
</body>
</html>

    Screen shot of your edited code

    • 0