CSS 3 DIVs in a row : 2 fix 1 auto adjust

css

I am trying to figure out how to create 3 divs and have them lineup in the same row.
Having 1st and 3rd one fixed width at 100px and have the 2nd (middle) one audo adjust its width in case of browser resize.

<div>
   <div id="d1"> content 1</div>
   <div id="d2"> content 2</div>
   <div id="d3"> content 3</div>
</div>

thanks,

Best Answer

You have tp use floats to align the left and right frame. But for this you have to reorder the divs as shown below, and set the margins for the middle div.

<style type="text/css">
#d1 {
  float: left;
}

#d2 {
  float: right;
}

#d3 {
  margin-left: 100px;
  margin-right: 100px;
}
</style>

<div>
   <div id="d1"> content 1</div>
   <div id="d2"> content 2</div>
   <div id="d3"> content 3</div>
</div>

Edit

Thanks to Leniel Macaferi for pointing out an error. The correct order of the divs has to be floating divs first, then non floating divs. Therefore I corrected the code (exchanged div d2 and div d3).

Related Solutions

Html – Set cellpadding and cellspacing in CSS

Basics

For controlling "cellpadding" in CSS, you can simply use padding on table cells. E.g. for 10px of "cellpadding":

td { 
    padding: 10px;
}

For "cellspacing", you can apply the border-spacing CSS property to your table. E.g. for 10px of "cellspacing":

table { 
    border-spacing: 10px;
    border-collapse: separate;
}

This property will even allow separate horizontal and vertical spacing, something you couldn't do with old-school "cellspacing".

Issues in IE ≤ 7

This will work in almost all popular browsers except for Internet Explorer up through Internet Explorer 7, where you're almost out of luck. I say "almost" because these browsers still support the border-collapse property, which merges the borders of adjoining table cells. If you're trying to eliminate cellspacing (that is, cellspacing="0") then border-collapse:collapse should have the same effect: no space between table cells. This support is buggy, though, as it does not override an existing cellspacing HTML attribute on the table element.

In short: for non-Internet Explorer 5-7 browsers, border-spacing handles you. For Internet Explorer, if your situation is just right (you want 0 cellspacing and your table doesn't have it defined already), you can use border-collapse:collapse.

table { 
    border-spacing: 0;
    border-collapse: collapse;
}

Note: For a great overview of CSS properties that one can apply to tables and for which browsers, see this fantastic Quirksmode page.

Css – CSS parent selector

There is currently no way to select the parent of an element in CSS.

If there was a way to do it, it would be in either of the current CSS selectors specs:

That said, the Selectors Level 4 Working Draft includes a :has() pseudo-class that will provide this capability. It will be similar to the jQuery implementation.

li:has(> a.active) { /* styles to apply to the li tag */ }

However, as of 2021, this is still not supported by any browser.

In the meantime, you'll have to resort to JavaScript if you need to select a parent element.

Best Answer

Related Solutions

Html – Set cellpadding and cellspacing in CSS

Css – CSS parent selector

Related Topic