Lynn Thames
asked on
Can I change the width of a div based on content (autosize)?
I have a content management site specific for school districts. On the home page, there are buttons for each campus and there can be from 3 - 10 buttons.
We want this to be entered within the width of the main content area but I can't figure out how to do this so that the results are automatic no matter how many buttons there are.
Is there a way to center a div and have the width autosize to match the width of the buttons?
Thanks!
We want this to be entered within the width of the main content area but I can't figure out how to do this so that the results are automatic no matter how many buttons there are.
Is there a way to center a div and have the width autosize to match the width of the buttons?
Thanks!
'<div align="center">...</div>' will normally do that. What do you have to work with? Can you post a link?
You will need to set the width of your div to 100%: <div style="width:100%">
You also give it a center value for text align: <div style="width:100%;text-ali gn:center" ></div>
This will cause the buttons to center in the div.
You also give it a center value for text align: <div style="width:100%;text-ali
This will cause the buttons to center in the div.
ASKER
When I tried <div align="center">.....</div> the buttons all displayed in the center (as in on top of each other).
region811.systemicplan.com and look towards the bottom of the screen where there are 2 rows of buttons that need to be centered.
region811.systemicplan.com
This little bit of code tells them to 'float left' which is effectively aligning to the left. You would have to rewrite that and the HTML section to do what you want.
'float: left;' is used to put 'div's side by side starting at the left. Normally, a div will occupy a 100% horizontal slice of the container it is in. You can also do 'float: right;' but there isn't any 'float: center;' although some people keep trying it and hoping. It's not a bad idea but it doesn't exist.
'float: left;' is used to put 'div's side by side starting at the left. Normally, a div will occupy a 100% horizontal slice of the container it is in. You can also do 'float: right;' but there isn't any 'float: center;' although some people keep trying it and hoping. It's not a bad idea but it doesn't exist.
.schools-btn {
width:108px;
height:68px;
background-image:url(../images/school-btn.jpg);
background-repeat:no-repeat;
margin:8px auto 0 auto;
float:left;
}
ASKER
I tried removing the float:left line, but that causes the buttons to stack on top of each other, as you can see right now at region811.systemicplan.com
Thanks for your input :)
Thanks for your input :)
No, you need to change much more than just the one line. It is easy to get either text or images to center but getting them both together and automatically resize for different amounts is going to take a little bit more effort. Where is the info for the buttons coming from? A database?
ASKER
Yes, a database. Is it other CSS lines that need to be changed or actual code in the php that builds the html that would need to be changed?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.