Div troubles

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
buckit
Forum Contributor
Posts: 169
Joined: Fri Jan 01, 2010 10:21 am

Div troubles

Post 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?
User avatar
John Cartwright
Site Admin
Posts: 11470
Joined: Tue Dec 23, 2003 2:10 am
Location: Toronto
Contact:

Re: Div troubles

Post 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>
Post Reply