0

I have declared a div tabbar, it contains four divs inside. I want to arrange those four divs in a row instead of column. But I am facing problems in design. I want to show those four divs like a data tab as shown below. enter image description here

As these four objects are basically 4 divs settled in one main div, i want to show similar output. I am sharing html and css file. Please have a look at this code and suggest changes/modification.

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <title>3G Awareness</title>
        <link rel="stylesheet" href="960.css" type="text/css" media="screen" charset="utf-8" />
        <link rel="stylesheet" href="template.css" type="text/css" media="screen" charset="utf-8" />
        <link rel="stylesheet" href="colour.css" type="text/css" media="screen" charset="utf-8" />
        <!--[if IE]><![if gte IE 6]><![endif]-->
        <script src="js/glow/1.7.0/core/core.js" type="text/javascript"></script>
        <script src="js/glow/1.7.0/widgets/widgets.js" type="text/javascript"></script>
        <link href="js/glow/1.7.0/widgets/widgets.css" type="text/css" rel="stylesheet" />
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <link href="bootstrap.min.css" rel="stylesheet">

    </head>



    <body>

        <h1 id="head" align="center" style="background-color:blue; color:#FFF"  >3G Awareness</h1>

        <ul id="navigation" style="background-color:white;">
            <li><span class="active">Pre Analysis</span></li>
            <li><a href="#">Data</a></li>


        </ul>
        <div id="tabbar" style="width:1000">
        <div id="total">
        Total
        </div>
         <div id="information">
         Infromation
        </div>
         <div id="complaint">
         Complaints
        </div>
         <div id="result">
         Result
        </div>
        </div>

        <section>
        <div id="container" class="box1">
        <div id="info">

        </div>
        <div id="complaint" >

        </div>
        </div>
        </section>



    </body>
</html>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script>
$(function () {
    $('#info').highcharts({
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false
            },
            title: {
                text: '3G and 4G Information'
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: false
                    },
                    showInLegend: true
                }
            },
            series: [{
                type: 'pie',
                name: 'Pie Share',
                data: [
                  ["3G or 4G General Info",7947  ],
  ["3G Speed Info",365  ],
  ["3G Coverage Info",5222  ],
  ["Zong 3G and 4G Trivia",79  ],
  ["3G Experience Program at Lahore",16  ],
  ["3G Isb/Rwp Info",650  ],
  ["3G Karachi Info",933  ],
  ["Inquiry about 3G launch in other cities",3271  ],
  ["3G Lahore Info",596  ]                
                       ]
            }]
        });
         $('#complaint').highcharts({
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false
            },
            title: {
                text: '3G and 4G Complaints'
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: false
                    },
                    showInLegend: true
                }
            },
            series: [{
                type: 'pie',
                name: 'Pie Share',
                data: [
                             ["3G Coverage Complaint",113  ],
                             ["3G Call Connectivity Complaint",20  ],
                             ["3G Call Connectivity Complaint",20  ],
                             ["3G Data Complaint",102  ],
                             ["3G Packages Related Complaint",17  ],
                             ["3G Settings Complaint",10  ],
                             ["3G Packages Related Complaint",8  ],
                             ["3G Settings Complaint",20  ],
                             ["3G Call Quality Complaint",7  ],
                             ["3G Overcharging Complaint",10  ],
                             ["3G Video Call Complaint",4  ],
                             ["3G Overcharging 3G Actual Overcharging",8  ]  

                       ]
            }]
        });

});
</script>

CSS File

body {
    background:#F7F4E9 url(body.png) repeat-x top center;
}
small {
    color:#888
}

th,#navigation,.active,input[type=submit],.pagination a:hover,.date td a:hover {
    background:#434A48;
    color:#fff
}

select, textarea, input, td {
    background:#fff url(gradient.png) repeat-x 0 -28px
}
tr {
    background-position:0 -18px;
}
#content {
    background-position:0 1px;
}

.active, th, #navigation a, input[type=submit] {
    color:blue;
}

input, select, textarea {
    border-color:#ddd
}

h1,h2,h3,h4,h5,h6 {
    border-color:#ddd
}

a {
    color:#888
}

#head {
    background:##FFFFFF
}

#navigation a:hover {
    background:black
}
#navigation .active {
    background:red
}

.box,.box > .utils a {
    background:#fff;
    border-color:#eee
}
.box > h2 {
    background:url(box-h2.png) repeat-x bottom center #fff
}
#container{
    width:100%;
    height:100%;
    position:relative;
    border:1px solid black;
}
.box{display:block;}
#info, #complaint{float:left;}
.middle{top:100%;margin-top:-50px;/*half of the .box height*/}


.info{left:0;}
.complaint{right:0;}

3 Answers 3

3

Give all div a style

float:left;

add below code into your css

 #tabbar div
        {
            float:left;
            padding: 10px;
        }
        #info
        {
           clear: left
        }
         #navigation li
        {
            width:100px;
            display: inline-block;
        }

and never give same id to two divisions as you given in complaints tab so Please change it..!

It will work..!

5
  • Problem is 'float' will prevent the divs from modifying the layout of the parent div and you'll wind up with issues. See my answer for the best way. Aug 22, 2014 at 10:49
  • Please put a more complete answer than "use float:left on all div". And elaborate on why float:left will solve the issue.
    – JofryHS
    Aug 22, 2014 at 10:52
  • float left is for inner divs? or for main container div? Aug 22, 2014 at 10:54
  • pre analysis data total information and result all are in one row..? Aug 22, 2014 at 11:06
  • No they are in different rows Aug 22, 2014 at 11:25
0

You need to set the display css attribute to 'inline-block'. That will cause it to behave similar to the traditional div-block model but it will also allow them to stack horizontally, just like a span does.

DIV.FloatBox {display:inline-block;*display:inline;zoom:1;} /* Extra display + zoom is for IE

The other thing you can consider is you can simulate a table using CSS properties. This means that you can break it back into DIV behavour under certain circumstances (i.e. small screen size) but you can still have it behave like a table.

<div style="display:table">
   <div style="display:table-row">
      <div style="display:table-cell">
      </div>
   </div>
</div>
0

Give all the divs the same class (such as class="div").

Then, add these lines to your CSS file:

.div {
display:inline:
}

I think this will work. Also, make sure your #tabbat is wide enough to fit all the three divs.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.