Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Centering floats
Having a small issue centering a few floats – what I want is like this:
<div id="subcontent">
<div class="width25">
Block 1
</div>
<div class="width25">
Block 2
</div>
<div class="width25">
Block 3
</div>
<!-- close sub content -->
</div>The 3 blocks with class=“width25” should center in the page. Can’t quite get it to work the way I like – anyone have some helpful CSS to share?
Current CSS:
.width25 {
width: 18%;
height: 25em;
float: left;
margin-left: 5px;
padding: 5px;
background: #978d7c;
color: #fff;
display: inline;
}Last edited by jstubbs (2008-10-23 06:11:08)
Offline
#2 2008-10-22 21:29:36
- els
- Moderator
- From: The Netherlands
- Registered: 2004-06-06
- Posts: 7,458
Re: Centering floats
Would something like this work?
#subcontent {
width: 60%;
margin: 0 auto;
}Offline
Re: Centering floats
I think you have to change 18% to 30% (or something similar) as the width25 divs are picking trying to be 18% of 60% (there is a name for this – child something)
Offline
#4 2008-10-23 07:38:34
- gomedia
- Plugin Author
- Registered: 2008-06-01
- Posts: 1,373
Re: Centering floats
tye wrote:
I think you have to change 18% to 30% (or something similar) as the width25 divs are picking trying to be 18% of 60% (there is a name for this – child something)
Yes, and it might be better to set the margin to a percentage & not use padding. So the width% + margin% add up to 100%. If you set a padding, even a , then the sums cock up. The margin is calculated against #subcontent width whereas the padding is added onto the width of all the .width25 divs.
Also, not sure what the display:inline achieves because you’re floating the divs.
And be careful of IE double width margin bug because you’re floating left AND setting a left margin.
Offline
Re: Centering floats
gomedia wrote:
Also, not sure what the display:inline achieves because you’re floating the divs.
And be careful of IE double width margin bug because you’re floating left AND setting a left margin.
You kinda answered it by yourself ;D It’s one way to avoiding it; display: inline. Display inline does none there, any other than fixes bunch of IE5.5/6’s floating bugs.
Last edited by Gocom (2008-10-23 09:05:36)
Offline
Re: Centering floats
Hey guys, thanks for the posts. I have this XHTML:
<div id="subcontent" class="clearfix">
<div class="content-wrapper" class="clearfix">
<div class="width25">
</div>
<div class="width25">
</div>
<div class="width25">
</div>
<!-- close content-wrapper -->
</div>
<!-- close sub content -->
</div>And this CSS:
#subcontent {
clear: both;
background: #fff;
}
.content-wrapper {
width: 925px;
margin: 0 auto;
text-align: center;
}
.width33 {
width: 280px;
height: 25em;
float: left;
margin-left: 20px;
padding: 5px;
background: #978d7c;
color: #fff;
display: inline;
}Looks ok now, but not absolutely perfect, because the right-margin on .width33 makes it 5px from perfect on the right side.
Always happy to get some help with my CSS ;-)
Edit: Forgot to add #subcontent CSS.
Last edited by jstubbs (2008-10-23 19:18:33)
Offline
Re: Centering floats
Display:inline is wrong? What would you suggest instead? And – what is considered the “best” way to center these divs without margin-right?
Offline
Offline
Re: Centering floats
You could try this new technique shown on ALA called Faux absolute positioning
Perhaps this will help you achieve what you are after
I think, therefore I AM, … … er … I think :-?
Offline
#10 2008-10-24 12:07:54
- tbo
- Member
- Registered: 2008-10-24
- Posts: 12
Re: Centering floats
Hi Jonathan,
I’m not quite sure if I correctly understood, what you wanted to display, but maybe this is a solution?
Best regards,
Tobi
Offline
Re: Centering floats
Tobi, that’s exactly what I was looking for. I think my CSS above is close to your solution (is the example yours?) apart from my margin-left on .width33 and your padding-left on #center.
I don’t have IE/Windows for testing so my main aim is a browser independent float solution for 3 or more divs.
Offline
#12 2008-10-25 14:34:14
- tbo
- Member
- Registered: 2008-10-24
- Posts: 12
Re: Centering floats
Hi Jonathan,
the page was tested with Firefox, Safari, Opera, IE6/IE7 and they all could handle it – therefore I think this should be a browser independent float solution, although some older browsers (like IE’s lower than 6) will mess it up. But building a site with such a downard compatibility is not really required anymore, I guess ;-)
Best regards,
Tobi
Offline