How to get inner and outer width to a single element?


Tags: jquery,css,width

Problem :

Is there a way in CSS or jQuery to get inner and outer width to a single element?
I have a div that has a width of 100% and a height of 30px, and inside this div i have a navigation menu list (two unordered lists). I want to get inner width of 960px to this div so that the menu will be centered and the background of the div will have a width:100% because the div has a width of 100%.

example: Inner and outer width

I don't want to add any other div inside or outside this div. I want do all this with this single div. How can i accomplish this?

Any help is greatly appreciated! Thank you so much!



Solution :

What about something like this?

div{
width:100%;
height:30px;
border:1px solid red;/* for fiddle visualization*/}

ul{  
margin:0;
height:30px; 
width:430px;
position: relative;   

}
div ul:first-of-type{
background-color:#00f;/* for fiddle visualization*/
left: 50%;
margin-left: -430px; 
float: left;
}
div ul:nth-of-type(2){
background-color:#0f0;/* for fiddle visualization*/
right: 50%;
margin-right: -430px; 
float: right;

}

here is a fiddle: http://jsfiddle.net/FKZx5/


    CSS Howto..

    How can I stop the submit button from stacking under the text field on a bootstrap form?

    How to properly preload images, js and css files?

    How to control the behaviour of columns in a specific table using CSS

    How to remove the double border bottom line below the breadcrumb

    How to make styling and functioning of form elements get not to break in all browsers?

    How to style the wp_list_page in wordpress?

    How to avoid wrapping in CSS float

    How can i make a fixed box inside a div with scroll?

    How to animate a fixed div with jQuery without page scrollbar resetting to top

    How to make nested divs appear as siblings with CSS?

    How to apply CSS directly to DOM TextNodes?

    how to rotate text with css? transform is not supported by current schema?

    How to make a webpage mobile friendly with css media queries

    CSS Styles How to make this table not fill the entire page width?

    How to create a horizontal navigation in HTML/CSS above an image?

    how to position/resize image after rotation using css/js so that the image is not positioned outside the div holding it or cropped out

    How to enable real time CSS editing in chrome?

    How can I get the current state of my div animation?

    how to show like chat box for the div/p tag top left/right corners

    [SOLVED]How to generate dynamic external link?

    How to make html table made by list responsive?

    how to set formatting of all textbox in asp.net website with css, without set cssclass property of each textbox

    how to find a css class which has another css class as sibling

    How to stop the css attribute font-size to get override from external style sheet universal selector

    how to dynamically change css class for html form elements based on other css class

    How to set Bullet colors in UL/LI html lists via CSS without using any images or span tags [duplicate]

    Thai line breaking: how to break Thai text effectively

    How to prevent embedded video from linking to another web page

    How to rotate text using CSS

    jQuery date picker show half day blocked