4

i have one main div and main div has multiple child div. i am not being able to position child divs one after one.

i want each div should have same height & same back color. first two div should have float:left and last one should have float:right. i did that but still not getting right output.

here is small code snippet

<div id="content">
    <div id="recinfo">Records 1/5 of 50</div>
    <div id='pager'>
        <ul class="paginate pag5 clearfix">
            <li class="navpage"><a href="http://localhost:13562/SamplePager/Index">prev</a></li>
            <li class="navpage"><a href="http://localhost:13562/SamplePager/Index">next</a></li>
            <li><a href="http://localhost:13562/SamplePager/Index">1</a></li>
            <li><a href="http://localhost:13562/SamplePager/Index">2</a></li>
            <li><a href="http://localhost:13562/SamplePager/Index">3</a></li>
            <li><a href="http://localhost:13562/SamplePager/Index">4</a></li>
            <li><a href="http://localhost:13562/SamplePager/Index">5</a></li>
            <li class="current">6</li>
            <li class="navpage"><a href="">next</a></li>
            <li class="navpage"><a href="">last</a></li>
        </ul>
    </div>

    <div id='loader'>Loading.....<img src="images/busy.gif" /></div>
</div>

my css code is huge and that is why i am not pasting it here rather giving here my js fiddle link https://jsfiddle.net/tridip/t55azjpk/. so any people can see what kind of weird output i am getting. looking for suggestion and rectified code sample. thanks

edit

output would like something like image. enter image description here

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Mou
  • 15,673
  • 43
  • 156
  • 275

5 Answers5

7

You can achieve this layout with CSS flexbox.

Here's a general solution:

HTML

<div id="content">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
</div>

CSS

#content { display: flex; }
#content > div:nth-child(2) { flex: 1; }

DEMO

Benefits of flexbox:

  1. minimal code; very efficient
  2. centering, both vertically and horizontally, is simple and easy
  3. equal height columns are simple and easy
  4. multiple options for aligning flex elements
  5. it's responsive
  6. unlike floats and tables, which offer limited layout capacity because they were never intended for building layouts, flexbox is a modern (CSS3) technique with a broad range of options.

To learn more about flexbox visit:

Community
  • 1
  • 1
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
  • i paste your css but no luck. where you css file link in your js fiddle? – Mou Dec 27 '15 at 17:45
  • All the CSS I used is in the fiddle demo. In your demo, there is a great deal of CSS code, and it's a bit convoluted. If you want to simplify your code, and include only the necessary layout components relating to the problem, I'll be happy to review. – Michael Benjamin Dec 27 '15 at 17:52
  • where did u refer flex file url in fiddle demo? – Mou Dec 27 '15 at 18:03
  • [Flexbox is a part of CSS3.](http://www.w3.org/TR/css-flexbox-1/) It's not a library or plug-in. It's plain code. I revised my answer with more details. – Michael Benjamin Dec 27 '15 at 18:36
2

i know this is really late but i thought i'd post how i managed to get around this.

<div>
<h1 class="class1">Example text</h1>
<h1 class="class1">Example text</h1>
<h1 class="class1">Example text</h1>
<h1 class="class1">Example text</h1>
</div>

so essentially you have to give them all the same class and then do this is css

.class1 {
display: inline-block;
}

hope this helped anyone who stumbled across this.

tomateos99
  • 21
  • 1
0

Distribute child div's width so that every can get appropriate space. This may work,

#content > div{width:30% !important; 
/* If you have three divs and you equally distribute their width */
float:left;
}
#content:nth-child(1){
width:20%;
float:left;
}
#content:nth-child(2){
width:60%;
float:left;
}
#content:nth-child(3){
width:20%;
float:left;
}
KRISHNENDU DE
  • 49
  • 3
  • just see yourself https://jsfiddle.net/tridip/t55azjpk/3/ what kind of output i am getting. just all got messed up. – Mou Dec 27 '15 at 17:41
  • if possible see my jsfiddle and give me another rectified js fiddle link. – Mou Dec 27 '15 at 17:42
0

In your fiddle, you have way too many styles for your li's and a's. however, i wont critique you on code style, rather show what you need to do to fix your issue. if you change the following styles accordingly, you should have the desired output you are looking for. 

#loader
{
float:left;
width:20%;
}
#pager { 
 float: left;
 width: 60%;
}
#recinfo
{
  float:left;
  width:20%;
}

.paginate {
 display: block;
 font-size: 1.2em;
 width: 100%;
}
Ja Superior
  • 459
  • 4
  • 17
-1

You mean like this ?

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}
html {
  line-height: 1;
}
ol,
ul {
  list-style: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
caption,
th,
td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}
q,
blockquote {
  quotes: none;
}
q:before,
q:after,
blockquote:before,
blockquote:after {
  content: "";
  content: none;
}
a img {
  border: none;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}
*,
*:after,
*:before {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
}
#content {
  background: #fff none repeat scroll 0 0;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 62.5%;
  line-height: 1;
}
#content > div {
  height: 50px;
}
#loader {
  float: right;
  width: 150px;
}
#recinfo {
  float: left;
  width: 150px;
}
#pager {
  text-align: center;

}
ul.paginate {
  display: inline-block;
  font-size: 1.2em;
  background: #373943 none repeat scroll 0 0;
  border-radius: 3px;
  font-size: 1.4em;
  padding: 9px 8px;
}
ul.paginate > li {
  font-weight: bold;
  display: inline-block;
}
ul.paginate > li > a {
  margin-right: 6px;
}
<div id="content">
  <div id="recinfo">Records 1/5 of 50</div>
  <div id="loader">Loading.....
    <img src="images/busy.gif">
  </div>
  <div id="pager">
    <ul class="paginate pag5 clearfix">
      <li class="navpage"><a href="http://localhost:13562/SamplePager/Index">prev</a>
      </li>
      <li class="navpage"><a href="http://localhost:13562/SamplePager/Index">next</a>
      </li>
      <li><a href="http://localhost:13562/SamplePager/Index">1</a>
      </li>
      <li><a href="http://localhost:13562/SamplePager/Index">2</a>
      </li>
      <li><a href="http://localhost:13562/SamplePager/Index">3</a>
      </li>
      <li><a href="http://localhost:13562/SamplePager/Index">4</a>
      </li>
      <li><a href="http://localhost:13562/SamplePager/Index">5</a>
      </li>
      <li class="current">6</li>
      <li class="navpage"><a href="">next</a>
      </li>
      <li class="navpage"><a href="">last</a>
      </li>
    </ul>
  </div>

  
</div>
  • recinfo and loader.....all 3 child div not in same line. their top & height should be same. – Mou Dec 27 '15 at 18:41