CODEWITHSUNDEEP
css
Jnr
Jnr

Reputation: 1664

how to place multiple div side by side with a unique layout

I am trying to place 7 divs side by side but with a bit of uniqueness. You can take a look at what I have done so far through the link HERE and view page source.

I want the Center div's width to fill the space between the Left Middle and Right Middle div irrespective of how far one drags the browser form to the left or right. At the moment the center div has white spaces left and right of it.

Can anyone help me out please?

Upvotes: 1

Views: 8359

Answers (5)

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32192

Try with display: inline-block and white-space: nowrap.

Demo

Example:

HTML

<div class="parent">
  <div class="child">first</div>
   <div class="child2">first2</div>
   <div class="child3">first3</div>
   <div class="child4">first4</div>
   <div class="child5">first5</div>
 <div class="child6">first6</div>
   <div class="child7">first7</div>
</div>

CSS

.parent{
  margin:0 auto;
  background:red;
  font-size:0;
  white-space:nowrap;
}
.child, .child1, .child2, .child3, .child4, .child5, .child6, .child7{
display:inline-block;
  vertical-align:top;
  width:100px;
  padding:20px;
  font-size:12px;
}
.child{
background:green;
}
.child2{
background:rgba(0,0,0,0.4);
}
.child3{
background:rgba(0,0,0,0.6);
}
.child4{
background:rgba(0,0,0,0.1);
}
.child5{
background:rgba(0,0,0,0.3);
}
.child6{
background:rgba(45,234,0,0.9);
}
.child7{
background:rgba(232,0,222,0.9);
}

LIve demo

Upvotes: 1

Alfred
Alfred

Reputation: 21406

You can achieve this without any problem using HTML <table>. Or if you want to have it table-less, by using only div-based structure, then you can simulate table's behavior with display as table, table-row, table-cell in your CSS

Here is a Live Demo.

Upvotes: 0

aspirinemaga
aspirinemaga

Reputation: 3947

You can achieve it with <table>. If you are pretending to use div-based structure, then you can simulate divs behaviour by using display:table etc...

here is HTML:

<div style="display:table;width:100%;">
  <div style="display:table-row">

    <div style="display:table-cell;width:100px;background:blue;">Left Fixed</div>
    <div style="display:table-cell;width:auto;background:green;">Left Stretch</div>
    <div style="display:table-cell;width:120px;background:yellow;">Left Middle</div>
    <div style="display:table-cell;width:auto;background:#999;">Center</div>
    <div style="display:table-cell;width:120px;background:yellow;">Right Middle</div>
    <div style="display:table-cell;width:auto;background:green;">Right Stretch</div>
    <div style="display:table-cell;width:100px;background:blue;">Right Fixed</div>

  </div>
</div>

Here is a demo: demo link

Upvotes: 2

Mutu Yolbulan
Mutu Yolbulan

Reputation: 1052

<div style="position: relative;">
            <div style="margin-left: auto; margin-right: auto; width: 10%; margin-top: 0px; background-color: #999">
                Center</div>
        </div>

since you had the two divs width's add up to 90% and the center div as 8%, fix this and the center this fills up the center

Upvotes: 0

Chowlett
Chowlett

Reputation: 46677

Your left div has a width of 45%; your right div similarly. But the middle div has a width of 8%, so there's 2% left over.

If you make the centre div have a width of 10%, the gaps disappear.

Upvotes: 0

Related Questions