Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Can I change the width of a div based on content (autosize)?

Posted on 2011-03-22
8
Medium Priority
?
199 Views
Last Modified: 2012-05-11
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!


0
Comment
Question by:lthames
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
8 Comments
 
LVL 84

Expert Comment

by:Dave Baldwin
ID: 35193741
'<div align="center">...</div>' will normally do that.  What do you have to work with?  Can you post a link?
0
 
LVL 16

Expert Comment

by:rbudj
ID: 35193832
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-align:center"></div>

This will cause the buttons to center in the div.
0
 

Author Comment

by:lthames
ID: 35194019
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.
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 84

Expert Comment

by:Dave Baldwin
ID: 35194181
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.
.schools-btn {
	width:108px;
	height:68px;
	background-image:url(../images/school-btn.jpg);
	background-repeat:no-repeat;
	margin:8px auto 0 auto;
	float:left;
}

Open in new window

0
 

Author Comment

by:lthames
ID: 35194246
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 :)
0
 
LVL 84

Expert Comment

by:Dave Baldwin
ID: 35194312
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?
0
 

Author Comment

by:lthames
ID: 35194381
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?

0
 
LVL 84

Accepted Solution

by:
Dave Baldwin earned 2000 total points
ID: 35194421
Both need to be changed.  Actually the method of doing it will have to be changed to get them to center.  I noticed that there are different amounts of text for the buttons.  That can affect the way it works too.  If there is too much text, it will cause the container it's in to expand.  Sometimes that can throw off the alignment so you need to know what you're trying to put there.
0

Featured Post

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

721 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question