CODEWITHSUNDEEP
htmlcss
moeffju
moeffju

Reputation: 4403

fixed-width center element with auto-expanding elements on both sides

I am trying to reproduce the below HTML table construct using CSS3. I have tried various ways of floating elements, creating new rendering contexts, auto margins, inline-blocks etc. 

<table width="100%" border="0" cellpadding="0" cellspacing="0" style="margin-bottom: 16px;">
    <tr>
        <td>B1, auto-expands</td>
        <td width="175">A, fixed width</td>
        <td>B2, auto-expands</td>
    </tr>
</table>

The end result should be a centered middle element width a fixed absolute width and two elements on the sides that should expand to assume the remaining available width without overlapping the middle element.

I have settled for using CSS’ display: table|table-row|table-cell, but I wonder if someone here has a better way of achieving the same result.

Upvotes: 3

Views: 2174

Answers (4)

WickStargazer
WickStargazer

Reputation: 409

This way also works, Just adjust the percentage accordingly to fill a 100%. This is how boostrap does it..

http://jsfiddle.net/mb2V7/

<div class="outer">
    <div class="b col" id="b1">auto-expand</div>
    <div class="a col" id="a">fixed width</div>
    <div class="b col" id="b2">auto-expand</div>
</div>

.outer { width: 100%; 
    position: absolute;
left: 0px;
width: 100%;
margin: 0 auto; 

}
*:before, *:after {
    -moz-box-sizing: border-box;
}
.a {
    outline: 1px solid green;
    background: #efe;
}
.b {
    outline: 1px solid red;
    background: #fee;

     width: 15%;
}
#a {    
 width: 70%;
    text-align: center;
}

.col{ float:left;}

Please also note also, for the boxes to drop down, use 

@media (min-width: 768px) { .col{ width:90%;
}}

Upvotes: 1

larswittenberg
larswittenberg

Reputation: 94

My suggestion

Demo: http://cdpn.io/cCaeg

HTML

<div class="wrapper">
  <div class="links">Left</div>
  <div class="mitte">Center</div>
  <div class="rechts">Right</div>
</div>

CSS

.links,
.mitte,
.rechts {
  position: absolute;
  top: 0;
  text-align: center;
  background-color: #888;
}

.links {
  left: 0;
  right: 50%;
  margin-right: 100px;
}

.rechts {
  left: 50%;
  right: 0;
  margin-left: 100px;
}

.mitte {
  left: 50%;
  width: 200px;
  margin-left: -100px;
  background-color: #ccc;
}

Upvotes: 1

Burntime
Burntime

Reputation: 2344

How about using flexbox?

HTML:

  <ul>
    <li>left, auto-expands</li>
    <li class="fix">A, fixed width</li>
    <li>right, auto-expands</li>
  </ul>

CSS:

ul {
  display: -webkit-box;
  display:    -moz-box;
  display:         box;
  padding: 0;
}

li {
  -webkit-box-flex: 1;
     -moz-box-flex: 1;
          box-flex: 1;
  list-style: none;
  border: 1px solid red;
 }

.fix {
  text-align: center;
  width: 175px;
  -webkit-box-flex: 0;
     -moz-box-flex: 0;
          box-flex: 0;
}

Upvotes: 2

nolawi
nolawi

Reputation: 4649

Here use percentage and float everything to the left:

Here is a link to my Fiddle

http://jsfiddle.net/y8CkV/2/

.outer{
width:100%;
}
#a { 
width: 32%;
float:left;
max-width:180px;
min-width:170px;  }
#b1 {
float: left;
width:32%;}
#b2 {
float: left;
 width:31%;
}

this should cover most case scenario as long as you container of the outer div is not changing sizing with a huge difference..

Another way would be to use inline-block http://jsfiddle.net/KK7ZC/

Upvotes: 0

Related Questions