CODEWITHSUNDEEP
jquerycsswidth
Mustapha Aoussar
Mustapha Aoussar

Reputation: 5923

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

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!

Upvotes: 3

Views: 182

Answers (3)

avrahamcool
avrahamcool

Reputation: 14094

firstly: if you only trying to achive the centering issue, add text-align:center; to the div. you dont need to play with the width.

secondly: why dont you wand to add a second layer div with width: 960px;?

Upvotes: 1

Ctrl Alt Design
Ctrl Alt Design

Reputation: 707

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/

Upvotes: 1

slash197
slash197

Reputation: 9034

div {
   width: 100%;
   background: url("...");
}
    div ul {
        margin: 0px auto;
        width: 960px;
    }

Upvotes: 1

Related Questions