Jodi_the_g
Member
Registered: 7th Aug 01
Location: Washington D.C
User status: Offline
|
I have 3 div class inside one that I have as columns
for example
code:
<div class ="main">
<div class = main-left">
div class ="main- center">
Now they all fit in perfect but I want the left and right one set pixels which I have done but how do I set the middle one to fill in the gap.
width:100% does not seem to work, and I can not for the life of me remember how I done it in the past.
|
Laney
Member
Registered: 6th May 03
Location: Leeds
User status: Offline
|
Got a width on the outer div?
|
Jodi_the_g
Member
Registered: 7th Aug 01
Location: Washington D.C
User status: Offline
|
Sorry yeah both the outer and nearside have a width just not the center.
|
Jodi_the_g
Member
Registered: 7th Aug 01
Location: Washington D.C
User status: Offline
|
code:
.main-left {display:inline; float:left; width:200px; overflow:visible; overflow:hidden;}
.main-center {display:inline; float:left; width:auto; overflow:visible; overflow:hidden;}
.main-center-tags {}
.main-right {
display:inline;
float:right;
width:300px;
background:url(../images/tt.gif);
overflow:visible; overflow:hidden;
|
Paul_J
Member
Registered: 6th Jun 02
Location: London
User status: Offline
|
remove the width:auto from the main. Just don't have a width value at all for it.
I think the way I've done it in the past is...
have 1 as a frame for all 3 to be inside.
<div class=frame>
<div class=left></div>
<div class=center></div>
<div class=right></div>
</div>
however, I've not done any css for ages so could be talking balls 
|
Jodi_the_g
Member
Registered: 7th Aug 01
Location: Washington D.C
User status: Offline
|
Thats what I tried Paul, all inside a frame but it just seems to knock the right down to the next level.
|
Laney
Member
Registered: 6th May 03
Location: Leeds
User status: Offline
|
Margin: 0 auto on the middle one maybe?
|
Jodi_the_g
Member
Registered: 7th Aug 01
Location: Washington D.C
User status: Offline
|
The CSS file
code:
.main {
clear:both;
width:100%;
padding-bottom:30px;
background:transparent url(../images/bg_main_withnav.jpg) top left repeat-y;
}
.left {
display:inline;
float:left; width:200px;
}
.center {
display:inline;
float:left;
width:inherit;
font-family:Tahoma;
font-size:11px;
line-height:15px;
text-align: justify;
color:#323232;
padding-top:5px;
margin-right:auto;
}
.right {
display:inline;
float:right;
width:185px;
margin 15px 0 0;
}
Html file
code:
<div class=main>
<div class=left></div>
<div class=center></div>
<div class=right></div>
</div>
|
