Problem in handling spacing for an aria of interface
In the attached image, i want to remove the space of the left of content aria, same space is there on right si开发者_Go百科de of page, remaining parts of interface have spanned over the whole width but it is not spanning over the whole width.
How can i span it on the whole width without disturbing the upper parts of interface?
I'm having the following css file.
#logo {
left:13px;
top:-3px;
position:absolute;
z-index:2;
}
#heading {
height: 150px;
right: 0px;
left: 0px;
top: 0px;
margin-bottom: 5px;
background: #e8e8e8;
position:absolute;
z-index:0;
}
#upperMenu{
position:absolute;
height: 25px;
padding-top:2px;
right: 0px;
left: 0px;
top: 105px;
background: #e38217;
position:absolute;
z-index:1;
}
#content {
right: 0px;
left: 0px;
border: thin solid lightGray;
background: #F0F0F0;
margin-top:150px;
height:700px;
padding-bottom: 20px;
}
It's hard to give accurate advice when you've only shown your CSS and not your HTML but I'd say straight off that you're using too much absolute positioning. You should be trying to work with the normal document flow wherever possible using margins and padding to create space or move elements away from each other. Sometimes you'll also need floats, and usually, absolute positioning will be the final resort.
You should also validate your CSS because you have a few errors like specifying right and left values for elements that aren't either position relative or absolute.
You should also be careful specifying fixed heights and instead let the content of an element dictate how high it or its parent should be. If you specify a fixed height and the content is too long, it'll either spill out of the box or be hidden if you've set overflow:hidden on the parent.
精彩评论