Geek asks and answers

Fixed center div surrounded by different width divs surrounded by fixed corner divs

I want to place the following line on the page:

[angle-l] [variable] [ornament] [variable] [angle-g]

The “variable” separation parts must be changed, but ultimately the surrounding container (containing all this) must determine the maximum width, and the installation described above should stretch the two spacers equally (without specifying an explicit width for the gaskets) , leaving the “ornament” in the center .

All parts have a completely equal height of 260 pixels. All these divs contain the image as a background image. The “variable” part contains a 1px wide panel fiber (again, like a background image with a set of x repeats).

Can I do this and possibly support major browsers? What is the best way to do this?

+3
source share
3 answers

Can I do this and possibly support major browsers?

My answer will work in all modern / main browsers with the exception of IE7 exception . I'm not sure if you think the main browser; now it borders.

See: http://jsfiddle.net/PyTAD/ (and resize your browser to check for fluidity)

CSS

.barContainer {
    border: 2px dashed #000;
    width: 100%;
    display: table;
    table-layout: fixed
}
.barContainer > div {
    outline: 1px dashed #00f;
    display: table-cell;
    height: 260px
}
.corner-l, .corner-r {
    width: 50px;
    background: #ccc
}
.variable {
    background: #999
}
.ornament {
    background: #f0f;
    width: 100px
}

HTML:

<div class="barContainer">
    <div class="corner-l">1</div>
    <div class="variable">2</div>
    <div class="ornament">3</div>
    <div class="variable">4</div>
    <div class="corner-r">5</div>
</div>
+4
source

This will keep the ornament in the center of the page. The width will be determined by the width of the title bar.

0
source

.

http://jsfiddle.net/7MnKj/1/

.vary

- , ?

-1

More articles:


All Articles