CODEWITHSUNDEEP
javascripthtmlcss
ghostCoder
ghostCoder

Reputation: 7655

placing divs in same line

I have 2 divs. One with N number of squares and another div with 1 square. I want that all squares should be inlined. i.e., the squares of div of "section-loaded" come in 3 lines and half of 4th line, one after the other, then the square of "section-toload" should come in the same 4th line and not down below. Here is the fiddle -

http://jsfiddle.net/UPA4V/

<div class="fix_width650px">
    <div class="section-loaded">
        <div class = "square"></div>
        <div class = "square"></div>
        <div class = "square"></div>
        <div class = "square"></div>
        .
        .
        .
    </div>

    <div class="section-toload">
        <div class = "square"></div>
    </div>
</div>

CSS- 

.square{
    width: 150px;
    height: 150px;
    padding: 5px;
    text-align: center;
    display: inline-block;
    position: relative;
}

.section-loaded{
    display: inline-block;
    float: left;

}

.section-toload{
    display: inline-block;
    float: left;
    position: relative;
    overflow: hidden;

}

Upvotes: 0

Views: 1238

Answers (6)

Andrea Ligios
Andrea Ligios

Reputation: 50281

You can't, because the shape of the section-loaded box will always be rectangular, while you want to inject your section-toload square inside it, in an arbitrary position.

You can dot it with squares only, or if you need sections, encapsulate each square in one section, like this:

Live demo: http://jsfiddle.net/2QLmJ/

HTML

<div class="fix_width650px">
    <div class="section loaded">
        <div class = "square"></div>
    </div>
    <div class="section loaded">
        <div class = "square"></div>
    </div>
    <div class="section loaded">
        <div class = "square"></div>
    </div>
    <div class="section loaded">
        <div class = "square"></div>
    </div>

    <div class="section toload">
        <div class = "square"></div>
    </div>
</div>

CSS

    .square{
    width: 150px;
    height: 150px;
    padding: 5px;
    text-align: center;
    border: 1px solid #000;
}

.toload .square{
    border: 1px solid red;    
}

.section{
    margin: 5px;
    display: inline-block;
    float: left;
}

Upvotes: 1

XTGX
XTGX

Reputation: 114

if you want something like this . enter image description here

.square
{

width: 150px;
height: 150px;
padding: 5px;
text-align: center;
float:left;
position: relative;
border:1px solid red;
}

.section-loaded{
display: block;
width:486px;
float: left;
}

.section-toload{
display: block;
float: left;
position:absolute;
overflow: hidden;
}


<div class="fix_width650px" style="height:326px;">
<div class="section-loaded">
<div class = "square">square1</div>
<div class = "square">square2</div>
<div class = "square">square3</div>
<div class = "square">square4</div>
</div>


</div>
<div class="section-toload"  style="position :relative;">
<div class = "square">section-toload</div>
</div>

Upvotes: 0

IT ppl
IT ppl

Reputation: 2647

try this.

Live demo here

HTML

    <div class="fix_width650px">
        <div class="section-loaded">
            <div class = "square"></div>
            <div class = "square"></div>
            <div class = "square"></div>
            <div class = "square"></div>
        </div>

        <div class="section-toload">
            <div class = "square sqgreen"></div>
            <div class = "square sqgreen"></div>
            <div class = "square sqgreen"></div>
        </div>
    </div>

CSS

 .square{
    width: 150px;
    height: 150px;
    padding: 5px !important;
    text-align: center;
    display: inline-block;
    position: relative;
    float:left;
    border:2px dotted red;
    margin:5px;
}

.sqgreen{
    border:4px dotted green !important;
}

.fix_width650px
{
    width:650px;
}

Upvotes: 1

Sowmya
Sowmya

Reputation: 26989

Remove float-left from both the divs and add display:table-cell and vertical-align:bottom

.section-loaded{
    display: table-cell;

}

.section-toload{
    display: table-cell;
    position: relative;
    overflow: hidden;
    vertical-align:bottom

}

DEMO

Upvotes: 0

shriidhar
shriidhar

Reputation: 427

I don't think you can do that. As 'setion-loaded' is taking more than 1 line, that means the width of this section becomes 100% and whatever the next is goes on new line i.e. 'section-toload' goes on new line.

What you can do is have all squares in one section and apply extra class 'loaded' if they are loaded and the class 'toload' of they are to be loaded.

    <div class="section">
      <div class="square loaded"></div>
      <div class="square loaded"></div>
      <div class="square loaded"></div>
      <div class="square loaded"></div>
      ...
      ...
      ...
      <div class="square toload"></div> 
    </div>

CSS - 

   .square {
      float: left;
      width: 150px;
      /** other styles **/  
   }

Upvotes: 1

Veikko Karsikko
Veikko Karsikko

Reputation: 3790

It would work if you instead setting sections as float, set squares as float.

only css you need:

.square{ width: 150px; height: 150px; float:left; }

Upvotes: 2

Related Questions