jmahdi Posted June 2, 2011 Share Posted June 2, 2011 would anyone know how to make a div's width always the same as the UL inside it?! e.g. I have this menu inside this div: <div id="Menu" style="width: same as ul width"> <ul style="width: a width "> <li> <a href="index.htm">HOME</a> </li> <li> <a href="update.htm">MY ACCOUNT</a> </li> <li> <a href="regis.htm">REGISTER</a> </li> <li> <a href="content.htm">BROWSE MUSIC</a> </li> <li> <a href="uploaded.htm">UPLOAD MUSIC</a> </li> <li> <a href="contact.htm">CONTACT</a> </li> </ul> </div> i need to do this to always make the menu in the middle of header...I can do this for each menu by assigning the width of ul to div, but i need a generic to do this in css file.... thanks in advance Quote Link to comment https://forums.phpfreaks.com/topic/238195-making-div-width-always-the-same-width-ul-inside-it/ Share on other sites More sharing options...
fugix Posted June 2, 2011 Share Posted June 2, 2011 why dont you make the div a certain width and set the ul width to 100% Quote Link to comment https://forums.phpfreaks.com/topic/238195-making-div-width-always-the-same-width-ul-inside-it/#findComment-1224012 Share on other sites More sharing options...
jmahdi Posted June 2, 2011 Author Share Posted June 2, 2011 why dont you make the div a certain width and set the ul width to 100% u see the li's number may vary from page to page , which have an effect on the ul's size depending on the page Quote Link to comment https://forums.phpfreaks.com/topic/238195-making-div-width-always-the-same-width-ul-inside-it/#findComment-1224020 Share on other sites More sharing options...
jmahdi Posted June 2, 2011 Author Share Posted June 2, 2011 why dont you make the div a certain width and set the ul width to 100% u see the li's number may vary from page to page , which have an effect on the ul's size depending on the page meaning more or less menu items on different pages... sorry Quote Link to comment https://forums.phpfreaks.com/topic/238195-making-div-width-always-the-same-width-ul-inside-it/#findComment-1224041 Share on other sites More sharing options...
jmahdi Posted June 2, 2011 Author Share Posted June 2, 2011 hellooo Quote Link to comment https://forums.phpfreaks.com/topic/238195-making-div-width-always-the-same-width-ul-inside-it/#findComment-1224421 Share on other sites More sharing options...
cssfreakie Posted June 3, 2011 Share Posted June 3, 2011 hellooo hellooo! Since you did not supply any relevant css, apart from html I think we need to guess what you need. Is it a horizontal menu? or vertical? do you have a fluid layout? or a fixed center page? here is one method that works without an additional div, since an <ul> is already a container. If it doesn't work for you be more precise and provide some useful css and what you tried, or even better an on line example. In the end we are not Human googles that respond to 'helloo' some html with a logical indention + an #ID of #menu <ul id="menu"> <li> <a href="index.htm">HOME</a> </li> <li> <a href="update.htm">MY ACCOUNT</a> </li> <li> <a href="regis.htm">REGISTER</a> </li> <li> <a href="content.htm">BROWSE MUSIC</a> </li> <li> <a href="uploaded.htm">UPLOAD MUSIC</a> </li> <li> <a href="contact.htm">CONTACT</a> </li> </ul> the css (assuming it's a horizontal menu) ul#menu {background:#f4a; width:900px; text-align: center; margin:0 auto;} #menu li{display:inline; } Quote Link to comment https://forums.phpfreaks.com/topic/238195-making-div-width-always-the-same-width-ul-inside-it/#findComment-1224659 Share on other sites More sharing options...
jmahdi Posted June 3, 2011 Author Share Posted June 3, 2011 hellooo hellooo! Since you did not supply any relevant css, apart from html I think we need to guess what you need. Is it a horizontal menu? or vertical? do you have a fluid layout? or a fixed center page? here is one method that works without an additional div, since an <ul> is already a container. If it doesn't work for you be more precise and provide some useful css and what you tried, or even better an on line example. In the end we are not Human googles that respond to 'helloo' some html with a logical indention + an #ID of #menu <ul id="menu"> <li> <a href="index.htm">HOME</a> </li> <li> <a href="update.htm">MY ACCOUNT</a> </li> <li> <a href="regis.htm">REGISTER</a> </li> <li> <a href="content.htm">BROWSE MUSIC</a> </li> <li> <a href="uploaded.htm">UPLOAD MUSIC</a> </li> <li> <a href="contact.htm">CONTACT</a> </li> </ul> the css (assuming it's a horizontal menu) ul#menu {background:#f4a; width:900px; text-align: center; margin:0 auto;} #menu li{display:inline; } thanks, i know "helloo" does not get caught "robotically" in these forums , i only wanted to raise my theread so people can see... I'm using a horizontal menu, if it helps here is my css part for menu and ul: #Menu{ height: 1px; width: auto; margin: 0 auto; } #Menu ul{ list-style: none; margin: 0; } #Menu li{ float: left; margin: 0 1px; } #Menu li a{ background: url(../final/menuLink.jpg); height: 30px; display: block; padding-top: 6px; padding-left: 3px; padding-right: 3px; text-decoration: none; text-align: center; } Quote Link to comment https://forums.phpfreaks.com/topic/238195-making-div-width-always-the-same-width-ul-inside-it/#findComment-1224904 Share on other sites More sharing options...
gospabode2 Posted June 3, 2011 Share Posted June 3, 2011 Wouldn't the Div automatically expand to fit the contents within if it does not have a fixed width and height? Quote Link to comment https://forums.phpfreaks.com/topic/238195-making-div-width-always-the-same-width-ul-inside-it/#findComment-1224910 Share on other sites More sharing options...
jmahdi Posted June 3, 2011 Author Share Posted June 3, 2011 Wouldn't the Div automatically expand to fit the contents within if it does not have a fixed width and height? it doesn't actually, i have to do this manually for every page... Quote Link to comment https://forums.phpfreaks.com/topic/238195-making-div-width-always-the-same-width-ul-inside-it/#findComment-1224918 Share on other sites More sharing options...
fugix Posted June 3, 2011 Share Posted June 3, 2011 it will wrap to the contents if you make the width: auto; Quote Link to comment https://forums.phpfreaks.com/topic/238195-making-div-width-always-the-same-width-ul-inside-it/#findComment-1224935 Share on other sites More sharing options...
cssfreakie Posted June 4, 2011 Share Posted June 4, 2011 thanks, i know "helloo" does not get caught "robotically" in these forums , i only wanted to raise my theread so people can see... I'm using a horizontal menu, if it helps here is my css part for menu and ul: did you run the code i provided, because that is how to center an unordered list in the middle of the screen no matter the contents? Quote Link to comment https://forums.phpfreaks.com/topic/238195-making-div-width-always-the-same-width-ul-inside-it/#findComment-1224947 Share on other sites More sharing options...
jmahdi Posted June 4, 2011 Author Share Posted June 4, 2011 thanks, i know "helloo" does not get caught "robotically" in these forums , i only wanted to raise my theread so people can see... I'm using a horizontal menu, if it helps here is my css part for menu and ul: did you run the code i provided, because that is how to center an unordered list in the middle of the screen no matter the contents? i just tried it and i think it works, just need to make -padding:left: 0- as the the browser adds a padding-left of 40px for some reason, thanks for the help. Quote Link to comment https://forums.phpfreaks.com/topic/238195-making-div-width-always-the-same-width-ul-inside-it/#findComment-1224953 Share on other sites More sharing options...
cssfreakie Posted June 4, 2011 Share Posted June 4, 2011 I recommend to just place a reset.css above your own style. See the sticky topic if you have no idea what that is. In a nutshell to make it look the same in all browsers Quote Link to comment https://forums.phpfreaks.com/topic/238195-making-div-width-always-the-same-width-ul-inside-it/#findComment-1224961 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.