Page 1 of 1

Div troubles

Posted: Fri Sep 10, 2010 7:55 am
by buckit
ok so here is what I have:

Code: Select all

    <div class='centerTop'>
        <div class='centerTopLeft'></div>
        <div class='centerTopMiddle'></div>
        <div class='centerTopRight'></div>
    </div>
the CSS:

Code: Select all

.centerTop{
	width:100%;
	height:15px;
}
.centerTopMiddle{
	height:15px;
	position:inherit;
	width:auto;
	display:inline-block;
	background-color:#FFFFFF;
}
.centerTopLeft{
	display:inline-block;
	float:left;
	height:15px;
	width:15px;
	background-image: url(../images/centerTopLeft.png);
	background-position:left;
}
.centerTopRight{
	display:inline-block;
	float:right;
	height:15px;
	width:15px;
	background-image: url(../images/centerTopRight.png);
	background-position:right;
}

The primary wrapping div is variable in width and changes based on the layout of the page. The topRight and topLeft divs are always staying to the left and right respectively. my problem is topMiddle. I need that to fill whatever space exists between topRight and topLeft. for the life of me I cant get the middle div to work right. doing 100% covers the left and right divs. I tried using left and right as well as margins and padding to remove the 15px on with side but this doesnt work. all it does is move the entire width to the left or right.

any ideas?

Re: Div troubles

Posted: Fri Sep 10, 2010 11:35 am
by John Cartwright
This is usually how I accomplish the 3 column layout (with dynamic center).

Code: Select all

<div style="float: left; width: 200px;">Column1</div>
<div style="float: right; width: 200px;">Column3</div>   
<div style="margin-left: 200px; margin-right: 200px;">Column2</div>