By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,299 Members | 1,054 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,299 IT Pros & Developers. It's quick & easy.

How can I make this bit of HTML centered between two floats?

Samishii23
100+
P: 246
I have the following basic setup:
Expand|Select|Wrap|Line Numbers
  1. <div>
  2.  <span style="float:left;">
  3.   <span>Items</span>
  4.   <span>Items</span>
  5.   <span>Items</span>
  6.  </span>
  7.  
  8.  <span style="float:right;">
  9.   <span>Items</span>
  10.   <span>Items</span>
  11.  </span>
  12. </div>
I wanna put some HTML between the two span elements that will be in the center of both of them. But I've tried both div and span, align:center;, and I'm not sure how to do this short of using display:table; and re-organizing the my current setup.

Anyone have any ideas?
Jul 27 '11 #1

✓ answered by Rabbit

I mean this
Expand|Select|Wrap|Line Numbers
  1. <style>
  2.    div {
  3.       float: left;
  4.    }
  5. </style>
  6.  
  7. <div>column 1</div>
  8. <div>column 2</div>
  9. <div>column 3</div>
If you want them to be equally spaced, you can give the divs a width of 33%.

Share this Question
Share on Google+
3 Replies


Rabbit
Expert Mod 10K+
P: 12,430
If by center you mean in between the two spans, you can just have 3 elements floated left and they will stack up right next to each other.
Jul 27 '11 #2

Samishii23
100+
P: 246
You mean have another span float in there to create white space?
I was just hoping to have
Expand|Select|Wrap|Line Numbers
  1. +-----------------------------------------+
  2. | SPAN             SPAN               SPAN|
  3. +-----------------------------------------+
Without using a 'hack' of sorts. For example wishing there was something similar to a float: center; sort of idea I guess.
Is there something Im missing? Or is it really only "Hack"able to get this effect without using display:table;??
Jul 27 '11 #3

Rabbit
Expert Mod 10K+
P: 12,430
I mean this
Expand|Select|Wrap|Line Numbers
  1. <style>
  2.    div {
  3.       float: left;
  4.    }
  5. </style>
  6.  
  7. <div>column 1</div>
  8. <div>column 2</div>
  9. <div>column 3</div>
If you want them to be equally spaced, you can give the divs a width of 33%.
Jul 27 '11 #4

Post your reply

Sign in to post your reply or Sign up for a free account.