Ad:

HTML and CSS Discussion Thread
Unsolved
Views: 773

Feb 11th, 2009

Horizontal centering issue with varying # of spans

Expand Post »

OK, I guess this should be simple but I haven't been able to figure it out or find an answer. I am displaying a bar of "action buttons" that are spans. I need these action buttons to center, there can be anywhere from 2 to 7 of them. I can get some centering using fixed width but since the number of buttons varies this doesnt really work. I have no problem adding or changing container types. See the HTML and CSS below...

Please help and thanks!!

The HTML:

html Syntax (Toggle Plain Text)
<div class="widgetWrapper">
<div class="widgetWrapperTopHalf">
<div class="widgetName">Widget Name</div>
<div class="widgetDescription">This is some kind of widget</div>
<div class="widgetThumb">
<img class="widgetThumbImage" src="http://www.reel.com/Content/reelimages/reviews/200x130_simpsons_6.jpg" />
</div>
</div>
<div class="widgetWrapperBottomHalf">
<div class="widgetActionBar">
<span class="widgetActionButton" style="color:red;" title="action1">A</span>
<span class="widgetActionButton" style="color:blue;" title="action2">B</span>
<span class="widgetActionButton" style="color:white;" title="action3">C</span>
<span class="widgetActionButton" style="color:black;" title="action4">D</span>
</div>
</div>
</div>
<div class="widgetWrapper">
<div class="widgetWrapperTopHalf">
<div class="widgetName">Widget Name</div>
<div class="widgetDescription">This is some kind of widget</div>
<div class="widgetThumb">
<img class="widgetThumbImage" src="http://www.reel.com/Content/reelimages/reviews/200x130_simpsons_6.jpg" />
</div>
</div>
<div class="widgetWrapperBottomHalf">
<div class="widgetActionBar">
<span class="widgetActionButton" style="color:red;" title="action1">A</span>
<span class="widgetActionButton" style="color:blue;" title="action2">B</span>
<span class="widgetActionButton" style="color:white;" title="action3">C</span>
<span class="widgetActionButton" style="color:black;" title="action4">D</span>
</div>
</div>
</div>

The CSS:

css Syntax (Toggle Plain Text)
<style type="text/css">
.widgetWrapper
{
display:block; 
float:left;
margin-left:7px;
margin-top:7px;
padding-top:10px;
padding-right:5px;
padding-left:5px;
border-right:solid 1px #CFCFCF;
border-left:solid 1px #ECECEC;
border-bottom:solid 2px #CFCFCF;
border-top:solid 1px #ECECEC;
height:350px;
width:250px;
text-align:center;
}
 
.widgetWrapperTopHalf
{
display:block; 
height:80%;
width:100%;
}
 
.widgetWrapperBottomHalf
{
display:block; 
height:20%;
padding:0;
width:100%; 
float:right;
text-align:center;
}
 
.widgetName
{
position:relative;
font-size:11px;
font-weight: Bold;
color: #000000; 
text-align:center;
display:block;
clear:both;
white-spacere-wrap;
margin-top:-10px;
}
 
.widgetThumb
{
width:100%;
display:block;
margin-top:5px;
padding:0px;
}
.widgetThumb img
{
cursorointer;
}
 
.widgetActionBar
{
clear:both;
display:block;
height:24px;
width:100%;
text-align:center;
}
 
.widgetActionButton
{
/* position:relative;*/
float:left;
display:table;
clear:none;
height:20px;
width:17px; 
margin-left:5px;
margin-right:5px;
padding-left:2px;
cursorointer;
background-color:#C0C0C0;
border-top:solid 1px #bababa;
border-left:solid 1px #bababa;
border-right:solid 2px #455769;
border-bottom:solid 2px #455769;
} 
 
</style>
<style type="text/css">
.widgetWrapper
{
display:block; 
float:left;
margin-left:7px;
margin-top:7px;
padding-top:10px;
padding-right:5px;
padding-left:5px;
border-right:solid 1px #CFCFCF;
border-left:solid 1px #ECECEC;
border-bottom:solid 2px #CFCFCF;
border-top:solid 1px #ECECEC;
height:350px;
width:250px;
text-align:center;
}

.widgetWrapperTopHalf
{
display:block; 
height:80%;
width:100%;
}

.widgetWrapperBottomHalf
{
display:block; 
height:20%;
padding:0;
width:100%; 
float:right;
text-align:center;
}

.widgetName
{
position:relative;
font-size:11px;
font-weight: Bold;
color: #000000; 
text-align:center;
display:block;
clear:both;
white-spacere-wrap;
margin-top:-10px;
}

.widgetThumb
{
width:100%;
display:block;
margin-top:5px;
padding:0px;
}
.widgetThumb img
{
cursorointer;
}

.widgetActionBar
{
clear:both;
display:block;
height:24px;
width:100%;
text-align:center;
}

.widgetActionButton
{
/* position:relative;*/
float:left;
display:table;
clear:none;
height:20px;
width:17px; 
margin-left:5px;
margin-right:5px;
padding-left:2px;
cursorointer;
background-color:#C0C0C0;
border-top:solid 1px #bababa;
border-left:solid 1px #bababa;
border-right:solid 2px #455769;
border-bottom:solid 2px #455769;
} 

</style>

waycool141

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

3 posts
since Feb 2009

Permalink

Feb 11th, 2009

Re: Horizontal centering issue with varying # of spans

make the margin for widgetWrapper like this

HTML and CSS Syntax (Toggle Plain Text)

margin:0 auto;

HTML and CSS Syntax (Toggle Plain Text)

margin-left:auto;
margin-right:auto;

cmills83

Reputation Points: 37

Solved Threads: 1

Posting Whiz in Training

Offline

249 posts
since Jun 2004

Permalink

Feb 12th, 2009

Re: Horizontal centering issue with varying # of spans

Click to Expand / Collapse Quote originally posted by cmills83 ...

make the margin for widgetWrapper like this
HTML and CSS Syntax (Toggle Plain Text)
margin:0 auto;
margin:0 auto;
or
HTML and CSS Syntax (Toggle Plain Text)
margin-left:auto;
margin-right:auto;
margin-left:auto; margin-right:auto;

I tried this but it did not work.

Thanks for replying though!

I actually received the answer on another forum I posted on. For anyone curious here was the solution, the .widgetActionButton CSS class was changed.

css Syntax (Toggle Plain Text)
.widgetActionButton
{
	height:20px;
	width:17px;
	display: table-cell;
	display: inline-table; 
	display: inline-block;
	margin-left:5px;
	margin-right:5px;
	padding-left:2px;
	cursor:pointer;
	background-color:#C0C0C0;
	border-top:solid 1px #bababa;
	border-left:solid 1px #bababa;
	border-right:solid 2px #455769;
	border-bottom:solid 2px #455769;
}
.widgetActionButton
{
	height:20px;
	width:17px;
	display: table-cell;
	display: inline-table; 
	display: inline-block;
	margin-left:5px;
	margin-right:5px;
	padding-left:2px;
	cursor:pointer;
	background-color:#C0C0C0;
	border-top:solid 1px #bababa;
	border-left:solid 1px #bababa;
	border-right:solid 2px #455769;
	border-bottom:solid 2px #455769;
}

Last edited by waycool141; Feb 12th, 2009 at 11:19 am.

waycool141

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

3 posts
since Feb 2009

Permalink

Feb 12th, 2009

Re: Horizontal centering issue with varying # of spans

is that working on ie6?

cmills83

Reputation Points: 37

Solved Threads: 1

Posting Whiz in Training

Offline

249 posts
since Jun 2004

Permalink

Feb 12th, 2009

Re: Horizontal centering issue with varying # of spans

Yes, I tested in IE 6.0 and Safari and its working great. I haven't tested in IE 7 as of yet...

waycool141

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

3 posts
since Feb 2009

Permalink

Feb 12th, 2009

Re: Horizontal centering issue with varying # of spans

you should be fine then, sometimes theres ie6 issues with the display:table

cmills83

Reputation Points: 37

Solved Threads: 1

Posting Whiz in Training

Offline

249 posts
since Jun 2004

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in HTML and CSS Forum Timeline: css drop down menu not working in i.e 7

Next Thread in HTML and CSS Forum Timeline: CSS Dropdown Menu - How to highlight current page button ??

DaniWeb Message

Cancel Changes

User Name
Password