CSS Forum

**UUilliam** · 04-05-2011, 02:09 PM

Hi I am coding this
http://img827.imageshack.us/img827/5918/t4mradio.png

but I started putting the banner together and it is coming out like this
http://img708.imageshack.us/img708/4517/43396258.png

my code is:

HTML Code:

<div class="header-left">
</div>
<div class="header-centre">
<div class="logo">
</div>
<div class="stream">
<marquee> testing this here </marquee>
</div>
</div>
<div class="header-right">
</div>
</div>

and css is

Code:

.header-left {
    background-image: url(images/header-l.png);
    background-repeat: no-repeat;
    width: 25px;
    height: 80px;
    float:left;
}
.header-centre {
    background-image: url(images/header.png);
    background-repeat: repeat-x;
    width: 100%;
    height: 80px;
    float:left;
    line-height: 80px;
}
.header-right {
    background-image: url(images/header-r.png);
    background-repeat: no-repeat;
    width: 25px;
    height: 80px;
    float: left;
}

I have tried using inline-block, block, inline, inline-table, inline-row, tried floating left to the left, right to the right and margin 0 auto the centre etc...

**chrishirst** · 04-05-2011, 02:25 PM

well! 100% PLUS 2x25px is more than 100%.

**UUilliam** · 04-05-2011, 02:36 PM

ah, thanks

Just needed the middle bit to span across the full length, turns out it is 95%

**chrishirst** · 04-05-2011, 02:53 PM

You don't need to guess, because that could "break".

right side floated right
left side floated left
centre section float none width left at "auto"

http://www.modtalk.co.uk/_site/code/.../three-column/

http://www.modtalk.co.uk/_site/code/...-centred/both/

the right section needs to be first in the document flow.